Embeddable Widgets
The ReferralHero Widgets are our ready-made components that can be quickly inserted into your page for displaying the signup form, the sharing screen, and more.
We currently have four embeddable widgets:
- ReferralHero Combo Widget
- ReferralHero Signup Widget
- ReferralHero Sharing Widget
- ReferralHero Floating Button
You can use one or more on your website to have a quick way to allow people to sign up for your referral program, get their referral link, and check their status. If you're not a technical person, then our embeddable widgets are your best option.
If your website undergoes a major design change where themes and template files are replaced or content in your
<head> tags or anywhere else the Tracking Code is installed are replaced, it's a possibility you will need to re-install the Tracking Code.ReferralHero Combo Widget
This is our one-and-done widget. Install this widget if you want a single place for current members and friends to sign up and check participation status in your campaign. People will sign up for your campaign and then will be immediately shown the sharing screen where they can get their unique referral URL, check their number of referrals, and see any rewards that have been unlocked.
This is how the user will experience this widget:
- 1.The signup screen is first shown
- 2.The sharing screen is shown after successful signup
To install the Combo Widget on your website:
- 1.Go to your campaign dashboard > Installation instructions and copy your Tracking Code
- 2.Add the ReferralHero Tracking Code to your site so that it loads on each webpage. This is typically done by adding it into the
<head></head>section of your website - 3.Paste
<div id="maitre-widget"></div>exactly where you want the widget to appear on your page. It must be within the<body></body>of your page.
1
<body>
2
<div id="maitre-widget"></div>
3
</body>
Copied!
ReferralHero Signup Widget
Install this widget if you want to allow people to sign up for your campaign and then be shown a success message.
Use this widget if you:
- Want to display a different marketing message or landing page to inbound "friends" signing up for your campaign (ex. someone special thought about you, sign up and get your coupon code).
- Want multiple places to capture leads on your website but don't want the sharing widget to show (ie. you want to add a signup form at the bottom of each of your blog posts).
This is how the user will experience this widget:
- 1.The signup screen is first shown
- 2.The success message is shown after successful signup
If the email confirmation requirement is enabled, the user signing up must confirm their email before they will be added to your campaign.
To customize the success message go here:
Edit Campaign > Design > Opt-in Form > Advanced Options > Thank You Message
To install the Signup Widget on your website:
- 1.Go to your campaign dashboard > Installation instructions and copy your Tracking Code
- 2.Add the ReferralHero Tracking Code to your site so that it loads on each webpage. This is typically done by adding it into the
<head></head>section of your website - 3.Paste
<div id="referralhero-signup-widget"></div>exactly where you want the widget to appear on your page. It must be within the<body>of your page.
1
<body>
2
<div id="referralhero-signup-widget"></div>
3
</body>
Copied!
ReferralHero Sharing Widget
Install this widget if you want a place to show current subscribers their participation status in your campaign where they can get their unique referral URL, check their number of referrals, and see any rewards that have been unlocked.
Use this widget if you:
- Want a stand-alone landing page to host your referral program for people who are already signed up.
- Plan to use your own signup form and want to redirect people to another page with the Sharing Widget.
- Have identified the user by other means and want to show the Sharing Widget (ex. you require a login into your web app, identifying the user, therefore they don't need to "sign up to our widget" and can be just shown the Sharing Widget).
People not already subscribed to your campaign will not be able to sign up through this widget and will receive an "email not found error message".
This is how the user will experience this widget:
- 1.The subscriber is identified automatically. If the subscriber is not able to be identified automatically, they will be prompted to check status or "login".
- 2.The sharing screen is shown
To customize the check status button text go here:
Edit Campaign > Design > Opt-in Form > Advanced Options > Check Position Label
To install the Sharing Widget on your website:
- 1.Go to your campaign dashboard > Installation instructions and copy your Tracking Code
- 2.Add the ReferralHero Tracking Code to your site so that it loads on each webpage. This is typically done by adding it into the
<head></head>section of your website - 3.Paste
<div id="referralhero-sharing-widget"></div>exactly where you want the widget to appear on your page. It must be within the<body>of your page.
1
<body>
2
<div id="referralhero-sharing-widget"></div>
3
</body>
Copied!
ReferralHero Floating Button
The Floating Button is a button fixed on the screen and overlays your webpage. Install this widget if you want to allow your users to sign up from any page on your website.
Use this widget if you:
- Want a 'call to action' to join your referral program to appear on every page of your website.
This is how the user will experience this widget:
- 1.The Floating Button is clicked
- 2.The ReferralHero Combo Widget will appear in the form of a popup.
The Floating Button only shows on pages where you DO NOT use the Combo, Signup, or Sharing Widget. If the Floating Button and the other ReferralHero Widgets are on the same page the other Widgets will be given precedence and the Floating Button will not appear.
To install the Floating Button on your website:
- 1.Go to your campaign dashboard > Installation instructions and copy your Tracking Code
- 2.Add the ReferralHero Tracking Code to your site so that it loads on each webpage. This is typically done by adding it into the
<head>section of your website - 3.Go to your campaign dashboard > Edit Campaign > Installation
- 4.In the section called "Choose how to add participants to your campaign", choose the "Floating button" tab
- 5.Click on the toggle Enable Floating Button and customize the text and color of the button
- 6.Save the changes
How to verify the installation
To verify the installation of your ReferralHero Tracking code, follow these steps:
- 1.Go to the Installation page (campaign dashboard > Edit Campaign > Installation)
- 2.Click on the tab "Verify installation"
- 3.Enter the URL of the page where you have installed ReferralHero
- 4.You will be redirected to the page you have entered. If the Tracking Code is present you will see a confirmation box in the top left corner of the screen.
Customize the widget
Our widget editors will give you the ability to customize the look and feel of either widget to match your brand guidelines. However, if you are looking for some additional stylizing options you can do this through CSS.
To edit the CSS of the widget(s):
- 1.Go to your campaign dashboard > Edit Campaign > Design > Extra Settings
- 2.Enter the following element(s) in the Custom CSS field and add the custom styling.
Note on changing the font for the widgets:
ReferralHero's embeddable widgets automatically use the font set for the parent container, however sometimes this means that the wrong font is used. This example would change the font of both widgets:
1
#mtr-optin-form *, #mtr-sharing-screen * {
2
font-family: 'Nunito'
3
}
Copied!
Don't forget to change 'Nunito' with the font-family you want to use.
Last modified 2mo ago