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.
Sign-up widget
To install the sign-up 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>section of your website - 3.Paste
<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.
1
<body>
2
<div id="maitre-widget"></div>
3
</body>
Copied!
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.Floating Button
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:
- 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 colour of the button
- 6.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.
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 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):
- 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 4mo ago