Files
- sendhub_widget_load.js
- sendhub_widget.html
- usage_example.html
Quick Preview
To get a quick preview, open the usage_example.html in a browser and click on the green button to see this widget in action.
Setup
To setup the widget on your own website, add the following javascript code before the close body tag of your target page.
<script type="text/javascript" src="sendhub_widget_load.js"></script>
Then add the following <div> tag where you want the Notification button to appear on your web site. <div id="sh-widget-container"></div>
The <script> will load the necessary html and javascript into your webpage. Additionally, you will need to make the changes below in the “Settings” section before the application will work properly.
Settings
Linking your SendHub Account
To tie the widget to your SendHub account please make the following changes to the sendhub_widget.html. You will need to add your SendHub username and api-key at approximately line 209. You can get your username and api-key from the My Settings page.
Choosing your Group(s)
You will also need to configure the group or groups that you want your customers to be able to opt-in. You can retrieve your group ids using one of the following methods;
- VIA SendHub Web App Interface – Log into your account and click on the Group Menu option and the select the group you would like to add. In the URL address the Group Id is at the end of the string.
- Via API - Post this in your browser (preferably Firefox for clean autoformatting): https://api.sendhub.com/v1/groups/?username=USERNAME&api_key=APIKEY Replace USERNAME and APIKEY with your appropriately account information. (Note: Group IDs are 18 characters long and you will want to look for the keywords id and name.)
Within the sendhub_widget.html change the line(s) at approximately 158 to match the group id and the group name. You can add or delete more options tags if you have more groups, or remove a group if you only have one.
<option value="YOUR GROUP ID" selected="selected">GROUP NAME</option>
<option value="YOUR OTHER GROUP ID">OTHER GROUP NAME</option>
Example of two groups one called Coupons and the second called Newsletter.
<option value="115999753870914707" selected="selected">Coupons</option>
<option value="115999753870914708">Newsletter</option>
Security
Read our Join Widget FAQs here.