The Join Widget is provided by SendHub to its customers as a portal for them to place a small snippet of code directly on their web site in order for their customers to be able to sign up for SMS marketing campaigns.
Files
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;
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
Don’t forget to protect your HTML and Javascript sources with an Obfuscater (e.g. JScrambler etc.) to make the code as protected as possible. Also, leveraging other standard best practices for integrating third party widgets is highly recommended.
Read our Join Widget FAQs here.
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
Don’t forget to protect your HTML and Javascript sources with an Obfuscater (e.g. JScrambler etc.) to make the code as protected as possible. Also, leveraging other standard best practices for integrating third party widgets is highly recommended.
Read our Join Widget FAQs here.