Embeddable Widgets
Embeddable widgets are our ready-made components that can be quickly inserted into your page for displaying the sign-up form, the sharing screen and more.
We currently have two embeddable widgets:
sign-up widget
floating button
You can use either one on your website to have a quick way to allow people to sign-up to your referral program and get their referral link. If you're not a technical person, then the embeddable widgets are your best options.
To install the sign-up widget on your website:
Go to your campaign dashboard > Installation 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 websitePaste
<div id="maitre-widget"></div>exactly where you want the widget to appear in your page. It must be within the<body>of your page.
<body><div id="maitre-widget"></div></body>
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 Floating Button is a button fixed on the screen (exactly like a chat widget, e.g: Intercom) that allows your users to sign up from any page of your website, thus making it easier for them to join your referral program. For you, it also means that you don't need to create a dedicated landing page for your referral program.
To install the Floating Button on your website:
Go to your campaign dashboard > Installation 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 websiteGo to your campaign dashboard > Edit Campaign > Installation
In the section called "Choose how to add participants to your campaign", choose the "Floating button" tab
Click on the toggle Enable Floating Button and customize the text and colour of the button
Save the changes
To avoid conflicts, the Floating Button only works on pages where you DO NOT use the sign-up form. In other words, you can't have the form and the Floating Button on the same page and if you do, the form will be given precedence and the floating button will not appear.
To verify the installation of your ReferralHero Tracking code, follow these steps:
Go to the Installation page (campaign dashboard > Edit Campaign > Installation)
Click on the tab "Verify installation"
Enter the URL of the page where you have installed ReferralHero
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.
Our widget editor 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 your campaign dashboard > Edit Campaign > Design > Extra Settings
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:
#mtr-optin-form *, #mtr-sharing-screen * {font-family: 'Nunito'}
Don't forget to change 'Nunito' with the font-family you want to use.
