Embeddable Widgets

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.

Advocate Dashboard

(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:

  1. The signup form is first shown (bypassable if subscribers are identified via our API)

  2. The Dashboard is shown after a successful signup

To install the Dashboard Widget on your website:

  1. Go to your Campaign Overview> Edit Campaign > Launch and copy your Global Tracking Code

  2. 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

  3. 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.

<body>
  <div id='referralhero-dashboard-MFxxxxxxxxxx'></div>
</body>

Referral Signup Widget

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:

  1. The signup form is first shown

  2. 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.

To customize:

Campaign Overview > Edit Campaign > Widget Builder > Referral Signup Widget > Confirmation Screen > click on the message ‘Thanks for Registering!’ > customize the text in ‘Property Options’

To install the Signup Widget on your website:

  1. Go to your Campaign Overview > Edit Campaign > Launch and copy your Global Tracking Code

  2. 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

  3. 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.

<body>
  <div id='referralhero-signup-widget-MFxxxxxxxxxx'></div>
</body>

Referral Welcome Banner

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:

  1. The signup form is first shown (to organic visitors or referrals only)

  2. The confirmation screen is shown after a successful signup

To customize:

Campaign Overview > Edit Campaign > Widget Builder > Referral Welcome Banner

To install the Welcome Banner on your website:

  1. Go to your Campaign Overview > Edit Campaign > Launch and copy your Global Tracking Code

  2. 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

  3. Go to your Campaign Overview> Edit Campaign > Launch > Step #3 > Referral Welcome Banner > Toggle ON

  4. Decide if you want the widget to display for organic visitors or referrals only

Sharing Widget

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:

  1. 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".

  2. The sharing screen is shown

To customize:

Campaign Overview > Edit Campaign > Widget Builder > Advocate Dashboard Widget > Signup Form > click on the ‘Form Submit Button’ > customize the text in ‘Property Options’

To install the Sharing Widget on your website:

  1. Go to your Campaign Overview > Edit Campaign > Launch 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-MFxxxxxxxxx"></div> exactly where you want the widget to appear on your page. It must be within the <body> of your page.

<body>
  <div id='referralhero-sharing-widget-MFxxxxxxxxxx'></div>
</body>

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 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.

To install the Floating Button on your website:

  1. Go to your Campaign Overview > Edit Campaign > Launch 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. Go to your Campaign Overview > Edit Campaign > Launch > Step #2 > Section D

  4. Click on the toggle Enable Floating Button and customize the text and color of the button

  5. Changes will be saved automatically

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 you Campaign Overview > Edit Campaign > Widget Builder > Signup Form or Dashboard > Template Settings > Advanced Options > Custom CSS

  2. 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.

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:

.mtr-optin-form *, .mtr-sharing-screen * {
  font-family: 'Nunito'
}

Don't forget to change 'Nunito' with the font-family you want to use.

PreviousCustom AttributionNextCustom Domain

Last updated

Was this helpful?