How To Add The Referral Factory Widget To Your Website

To make it even easier for you to get people joining your referral campaign, we have created a widget that you can install on your website. This will allow visitors to your website to click on the widget and immediately start referring!

In this help guide, we will show you the different ways you can use the Referral Factory Widget 👇

 

1. How to customize what your widget looks like 

2. How to install the widget on your WordPress website (or any other no-code website)

3. How install the widget on your website by inserting a code snippet

4. How to configure the widget to work in a logged-in environment


1. 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. Please note that the widget text has a 20-character limit. 

Here are the instructions on how to do that 👇

  • Open the campaign builder - on the campaign you want to create a widget for.
  • Go to the 'Outputs' tab and click on the widget icon.
  • On the top field, you can set the text for your widget (remember that you are limited to 20 characters) 
  • On the bottom fields, 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. 

referral_program_widget

 

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

 

2. How to install the widget on your WordPress website 

 

  • Select the campaign you want to use for the widget.
  • Go to the 'Outputs' tab and click on the widget icon.


widget_location

  • Then select "For Users Who Are NOT Logged in"
  • Your script is unique to your campaign. So please get it from your campaign Outputs tab :point_down:
widget_outputs
  • Copy the entire <script> section.
  • Next, log in to your WordPress dashboard and navigate to “Plugins”
  • Search for the plugin 'Insert Headers and Footers’ and Install/Activate it.
  • Go to the 'Settings' section on WordPress and select 'Insert Headers and Footers'.
  • Copy and paste the widget <script> in the Footer section.

widget_on_wordpress

Important: If you want to use the widget for a logged-in environment so that users will go straight to step 2 (that you see in the campaign builder), please jump to the last section of this help guide

3. How to install the widget on your website

 

  • Select the campaign you want to use for the widget.
  • Go to the 'Outputs' tab and click on the widget icon.


    widget_location

  • Your script is unique to your campaign. So please get it from your campaign Outputs tab :point_down:

    referral_campaign_widget

  • Copy the script shown in the screenshot above and paste it right before the </body> tag in your website code.
  • Please make sure you copy the script for 'NOT logged-in users' if you want to insert this script on your website. 
  • If you want to use the widget for a logged-in environment, so that users will go straight to step 2 (that you see in the campaign builder), please jump to the last section of this help guide

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 clicked on or opened. 


widget_button_preview

widget_on_website

4. How to configure the widget to work in a 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 bypass step one of the campaign builder, 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 the instructions below. 

  • Select the campaign you want to use for the widget.
  • Go to the 'Outputs' tab and click on the widget icon.


    widget_location_of_referral_program

  • Your script is unique to your campaign. So please get it from your campaign Outputs tab :point_down:

widget_of_referral_campaign

  • 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.
  • Your widget will then work in a logged-in environment 🤘 

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_button

preview_of_widget

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