Home Login/Signup Pricing Examples

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 Dashboard Widget

  • ReferralHero Signup Widget

  • ReferralHero Horizontal 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.

ReferralHero Dashboard Widget

(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 share screen. 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 sharing screen is shown after a successful signup

To install the Dashboard Widget on your website:

  1. Go to your campaign dashboard > Installation 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="maitre-widget"></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="maitre-widget"></div>
</body>

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

Edit Campaign > Widget Builder > Signup Widget > Confirmation Screen > click on the message ‘Thank you for Signing Up’ > customize the text in ‘Property Options’

To install the Signup Widget on your website:

  1. Go to your campaign dashboard > Installation 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"></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"></div>
</body>

ReferralHero Horizontal 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 all visitors or referrals only)

  2. The confirmation screen is shown after a successful signup

To customize:

Edit Campaign > Widget Builder > Horizontal Banner

To install the Horizontal Banner on your website:

  1. Go to your campaign dashboard > Installation 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 dashboard > Installation > Step #3 > Horizontal Banner > Toggle ON

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

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 their status or "login".

  2. The sharing screen is shown

To customize:

Edit Campaign > Widget Builder > 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 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.

<body>
  <div id="referralhero-sharing-widget"></div>
</body>

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 Subscriber Dashboard Widget will appear in the form of a popup.

The Floating Button only shows on pages where you DO NOT use the Subscriber 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 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 ‘How do you want subscribers to interact with your campaign?’, choose the ‘Dashboard Widget’ tab

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

  6. Changes will be saved automatically

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 you campaign dashboard > Edit Campaign > Widget Builder > Signup Form or Share Screen > Template Settings > 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 AttributionNextIntegrations

Last updated