How To Add The Referral Factory Pop-Up To Your Website

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

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

 

1. How to install the pop-up on your website for users who are not logged in
2. How to install the pop-up to work in a logged-in environment
3. If you want to trigger the pop-up on a scroll or on a timer please read this section 

    1. How to install the pop-up on your website for users who are not logged in

     

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


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

      popup_script_for_not_logged_in_users

    • Copy the pop-up class name and the code that you need to put on your website. 
    • Go to the source code for your website. 
    • Paste your pop-up's class name into the button you want to trigger your pop up.
    • You also need to paste the script right before the </body> tag on the same page as the button. 
    • If you want to use the pop-up 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 next section on this help guide

     

    Below is the example of what the pop-up looks like once it's been clicked on or opened - this is for users who are NOT logged in. 

     

    Popup_preview_for_not_logged_in_users

    2. How to install the pop-up 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 pop-up 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 pop-up so that it works in a logged-in environment, please follow the instructions below. 

     

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

      popup_location

    • Then select “For Logged In Users”
    • Your script is unique to your campaign. So please get it from your campaign Outputs tab :point_down:

    popup_script_for_logged_in_users

    • Copy the pop-up class name and the code that you need to put on your website. 
    • Go to the source code for your website. 
    • Paste your pop-up's class name into the button you want to trigger your pop-up.
    • You also need to paste the script right before the </body> tag on the same page as the button. You will also need to replace loggedInUserFirstName  and loggedInUserEmail with the variables you use in your own system.
    • Your pop-up will then work in a logged-in environment 🤘 

    Below is an example of what the pop-up looks like once it's been clicked on or opened - this is for users who are logged in. 

     

    popup_preview_for_logged_in_users


    3. If you want to trigger the pop-up on a scroll or on a timer please read this section 

    If you want to create pop-ups customized to your needs, such as on-scroll and timer-triggered pop-ups, then use this guide and the resources below. 

    Make sure you have access to a developer (Javascript).

    To Install and customize your pop-up based on scroll and timer triggers. 

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




    • Then select which type of user you build the pop-up for (Logged in Or Logged out)
    • Your script is unique to your campaign. So please get it from your campaign Outputs tab


    • Copy the pop-up class name and the code that you need to put on your website. 
    • Go to the source code for your website and add an invisible button on the page you want to show the pop-up. 
    • Paste your pop-up's class name into the invisible button.
    • You also need to paste the script right before the </body> tag on the same page as the invisible button. 
    • If you’re using the code for logged-in users - don’t forget that you also need to replace loggedInUserFirstName  and loggedInUserEmail with the variables you use in your own system
    • From there you can use the source code below to trigger the pop-up either on a scroll or on a timer.

    For Scroll triggered pop-up, use this code and adapt it for your needs: 👇

    window.onscroll = (event) => {

        let rfTriggerWorked = localStorage.getItem('rfTriggerWorked');

        if (document.documentElement.scrollTop > 200 && !rfTriggerWorked) {

            localStorage.setItem('rfTriggerWorked', true);

            let rfPopupItem = document.getElementsByClassName(`{useYourPopupClassNameHere}`)[0];

            if (rfPopupItem !== undefined) {

                rfPopupItem.click()

            }

        }

    };

     

    For a Timer triggered pop-up, use this code and adapt it to your needs:  👇

    setTimeout(() => {

        let rfPopupItem = document.getElementsByClassName(`{useYourPopupClassNameHere}`)[0];

        if (rfPopupItem !== undefined) {

            rfPopupItem.click()

        }

    }, 5000); // this will trigger in 5000 milliseconds (5 seconds), you can use any time you want

     

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