1. Help Center
  2. Building Your Referral Program
  3. The Builder (Promoting Your Campaign)

How To Install A Widget On Your Website

To make it even easier for you to get people to join and share your referral campaigns, Referral Factory created a widget feature that you can install on your website both for logged-out and logged-in environments.

In this help guide, we’re going to cover how you can Install a widget on your website or in your app that works for both of your logged-in and logged-out users. 

 

Table Of Contents 👇

How To Install The Widget For Your Logged-Out Environment

  • Select the campaign you want to use for the widget. 
  • Inside your campaign builder, navigate to the “Promote Your Campaign” tab. 
  • Then select “Install our widget on your website for logged-out users”. 

 

install_widget

  • Your script is unique to your campaign. So please get it from your campaign “Promote Your Campaign” tab. 

widget_script_add_on_website

  • Please make sure you copy the script for “LOGGED-OUT USERS” if you want to insert this script on your website. 
  • Copy the script shown in the screenshot above and paste it right before the </body> tag in your website code.

Below are two screenshots of what the widget looks like on our own website once installed. 

The first image is what the widget looks like before you click on it.

The second screenshot is what the widget looks like once clicked on or opened. 

widget_when_not_clicked

The text "Refer Friends" can be edited. You can change it from here 👇

change_widget_name

widget_look_once_clicked

 

How To Install The Widget For Your Logged-In Environment

If your users or customers have a portal that they can log into, you can also embed the widget inside that logged-in environment. This will allow your users to skip the pages for the person referring, and allow your users to refer in one click 👏

 

To set up the Referral Factory widget so that it works in a logged-in environment, please follow below. 

  • Select the campaign you want to use for the widget. 
  • Inside your campaign builder, navigate to the “Promote Your Campaign” tab. 
  • Then select “Install our widget on your website for logged-in users”. 

 

widget_install_on_logged_in_environment

  • Your script is unique to your campaign. So please get it from your campaign “Promote Your Campaign” tab. 

widget_code

  • Please make sure you copy the script for “LOGGED IN USERS” if you want to insert this script on a logged-in area of your website. 
  • Copy the script above and paste it right before the </body> tag. You will also need to replace loggedInUserFirstName and loggedInUserEmail with the variables you use in your own system.

Below are two examples of what the widget looks like on our own website once installed. 

The first image is what the widget looks like before you click on it. The text "Refer Friends" can be edited. 

The second screenshot is what the widget looks like once it's been clicked on or opened. 

widget_for_logged_in

widget_for_your_users

If you need any help installing the widget on your website or logged-in environment, please reach out to our friendly customer support team here

How To Customize What Your Widget Looks Like

We allow you to customize the widget to match the style of your own website. You can change the colors of the widget as well as the text on the widget.

Here are the instructions on how to do that 👇

  • Select the campaign you want to use for the widget. 
  • Inside your campaign builder, navigate to the “Promote Your Campaign” tab and click on the “Widget”. 
  • On the top field, you can set the text for your widget (widget text has a 20-character limit). 
  • On the bottom right side, you can customize the widget's colors and see how it will look on your website. See the screenshot below to see how it works. 

 

widget_customize

Please note that the widget logo will be the same as your campaign logo.

 

👉 Learn How To Install A Widget On Your No-Code Website | WordPress

👉 Learn How To Install A Widget On Your No-Code Website | Webflow

👉 Learn How To Install A Widget On Your No-Code Website | Squarespace

Read more about other promotional options that Referral Factory offers in this help guide.