Embeddable Widgets
Last updated
Last updated
The ReferralHero Widgets are our ready-made components that can be quickly inserted into your page to display the signup form, the sharing screen, and more.
We currently have five embeddable widgets:
ReferralHero Advocate Dashboard
ReferralHero Referral Signup Widget
ReferralHero Referral Welcome Banner
ReferralHero Sharing Widget
ReferralHero Floating Button
You can use one or more on your website/web app to have a quick way to allow people to sign up for your referral program, get their referral link, and check their status.
IMPORTANT
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.
The ReferralHero Dashboard, Signup, Floating Widget, or Javascript API RHform.submit() can only be used once on a single webpage. Do not add them multiple times on the same webpage.
(Recommended) This widget can be embedded or triggered as a popup in your website/web app, or used as a standalone landing page. It features a signup form (bypassable if subscribers are identified via our API) and a Dashboard. Designed to promote engagement in your campaign, it provides access to a personal dashboard where subscribers can find their referral link or QR code, track referrals, view rewards, or check the leaderboard.
This is how the user will experience this widget:
The signup form is first shown (bypassable if subscribers are identified via our API)
The Dashboard is shown after a successful signup
To install the Dashboard Widget on your website:
Go to your Campaign Overview> Edit Campaign > Launch and copy your Global Tracking Code
Add the ReferralHero Global Tracking Code to your site so that it loads on each webpage. This is typically done by adding it to the <head></head> section of your website
Paste <div id="referralhero-dashboard-MFxxxxxxxxxx"></div> exactly where you want the widget to appear on your page. It must be within the <body></body> of your page.
This widget can be embedded into your website or used as a standalone landing page. It features a dynamic message or signup form, specifically designed to engage and convert identified referrals.
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 (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:
The signup form is first shown
The confirmation screen is shown after a 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.
Campaign Overview > Edit Campaign > Widget Builder > Signup Widget > Confirmation Screen > click on the message ‘Thank you for Signing Up’ > customize the text in ‘Property Options’
Go to your Campaign Overview > Edit Campaign > Launch and copy your Global Tracking Code
Add the ReferralHero Global Tracking Code to your site so that it loads on each webpage. This is typically done by adding it to the <head></head> section of your website
Paste <div id="referralhero-signup-widget-MFxxxxxxxxxx"></div> exactly where you want the widget to appear on your page. It must be within the <body> of your page.
This banner is displayed on the top or bottom of your website. It features a dynamic message or signup form, specifically designed to engage and convert identified referrals.
This is how the user will experience this widget:
The signup form is first shown (to all visitors or referrals only)
The confirmation screen is shown after a successful signup
Campaign Overview > Edit Campaign > Widget Builder > Referral Welcome Banner
Go to your Campaign Overview > Edit Campaign > Launch and copy your Global Tracking Code
Add the ReferralHero Global Tracking Code to your site so that it loads on each webpage. This is typically done by adding it to the <head></head> section of your website
Go to your Campaign Overview> Edit Campaign > Launch > Step #3 > Referral Welcome Banner > Toggle ON
Decide if you want the widget to display for all visitors or referrals only
This widget is identical to the Advocate Dashboard, except no new subscribers can sign up directly through the widget. For that reason, it's recommended to use the Advocate Dashboard for most setups.
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:
The subscriber is identified automatically. If the subscriber is not able to be identified automatically, they will be prompted to check their status or "login".
The sharing screen is shown
Campaign Overview > Edit Campaign > Widget Builder > Dashboard Widget > Signup Form > click on the ‘Form Submit Button’ > customize the text in ‘Property Options’
Go to your Campaign Overview > Edit Campaign > Launch instructions and copy your Tracking Code
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
Paste <div id="referralhero-sharing-widget-MFxxxxxxxxx"></div> exactly where you want the widget to appear on your page. It must be within the <body> of your page.
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:
The Floating Button is clicked
The Advocate Dashboard will appear in the form of a popup.
The Floating Button only shows on pages where you DO NOT use the Advocate Dashboard, 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.
Go to your Campaign Overview > Edit Campaign > Launch instructions and copy your Tracking Code
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
Go to your Campaign Overview > Edit Campaign > Launch
In the section called ‘How do you want subscribers to interact with your campaign?’, choose the ‘Advocate Dashboard’ tab
Click on the toggle Enable Floating Button and customize the text and color of the button
Changes will be saved automatically
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):
Go to you Campaign Overview > Edit Campaign > Widget Builder > Signup Form or Dashboard > Template Settings > Custom CSS
Enter the following element(s) in the Custom CSS field and add the custom styling.
To see a list of the customizable CSS elements and some examples click here.
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:
Don't forget to change 'Nunito' with the font-family you want to use.
