Profile Widget

We've got a great widget you can use to show your profile on any other website!

Here's what it looks like:

 

All it takes is 2 lines of code to use this on any other website. Just place the widget code on your site anywhere between the <body> tags (or ask your webmaster) to add a widget button. This will also work on any third-party sites which allow JavaScript code.

You'll find your unique widget code in your Member Center at the bottom of the Profile menu.

Customize The Button Text

Change the text of the button to read anything you want. Just enter your own text in place of the highlighted text below:

<button onclick="openSpeakerMatchForm(profile_XXXXXXXXX); return false;" data-smpBtnColor="1" class="speakermatch_profile_button">View My SpeakerMatch Profile</button>

Customize The Button Color

To change the button color, simply add the element data-smpBtnColor with it's corresponding pre-defined color number to your code. These are the pre-defined colors and their corresponding number codes:

1 - BLUE
2 - GREEN
3 - ORANGE
4 - RED

So your new code will look something like this:

<button onclick="openSpeakerMatchForm(profile_XXXXXXXXX); return false;" data-smpBtnColor="1" class="speakermatch_profile_button">View My SpeakerMatch Profile</button>

You can also enter ANY color HEX code to create a button color that works best for your purposes. So your code would look like this:

<button onclick="openSpeakerMatchForm(profile_XXXXXXXXX); return false;" data-smpBtnColor="#4B0082" class="speakermatch_profile_button">View My SpeakerMatch Profile</button>

 

Completely Control The Button Style:

You can have complete control over the button's style by adding the element data-smpBtnCustomStyle="yes" to your button code, so it will look something like this:

<button onclick="openSpeakerMatchForm(profile_XXXXXXXXX); return false;" data-smpBtnCustomStyle="yes" class="speakermatch_profile_button">View My SpeakerMatch Profile</button>

You can then use your own style sheet to set attributes to the speakermatch_profile_button class as in the example below:

<style type="text/css">
.speakermatch_profile_button{
    background-color: purple;
    color: white;
    padding: 20px;
}
</style>

Using your own custom style will remove the microphone logo on the button.