Genius Referrals
 
Use the Advocate Portal template to create a referral program with pages for handling program overview, access, sharing tools, statistics, and payouts.

ADVOCATE PORTAL TEMPLATE

There are several advantages to using the Advocate Portal template for your referral program:
  1. Easy setup and customization through our Website Builder.
  2. Set of tools to manage and monitor the referral program that is available to its promoters.
  3. Easy to install on your website using the code snippets we offer.
There are also downsides to using this type of template:
  1. Not very functional when you want to present only the sharing tools to your promoters. In this case use the templates
  2. Not very functional when you want to present only the sharing tools to your promoters. In this case use the templates of type Link Sharing or Post Purchase.

    ADVANTAGES

    of using Advocate Portal

    DISADVANTAGES

    of using Advocate Portal
    To choose the template that best suits your needs, go to the Website Builder and click on the 'New' button and start creating your new template. The system will start a wizard to help you with this process, there are in total 2 steps to be completed before finishing the process.

    Make sure you enter the Name, Description, and Widget Package (if you haven't created a widget package check out this section) before choosing the template. Click on the template type 'Advocate Portal' and select the template that best suits your needs. Once you've selected the template click on the 'Continue' button to go to the next step. The images below show the details.

    Choosing your template in our Website Builder

    In step 2, we display all the tabs that are part of your referral program.

    Here you are able to update the tab headers and the main contents of the tabs. To help you personalize the contents of your referral program, we load the main content of each tab in an editor that you can use to update every section. You can add new images, embed videos, remove or add texts, add JavaScripts and CSS, etc.

    Personalizing the template content

    The tab Overview is the first tab your advocates see when the program loads on your website, it's intended to provide general information about the program.

    Tab Overview

    Personalize the tab overview for your refer a friend program
    Once you've have finished updating the first tab, click on the 'Save' button and select the Access page in the main menu or you can select the following page in the editor's header Current page option..
    This tab displays the forms that your advocates will use to sign up and log into your referral program.

    Tab Access

    IMPORTANT
    You can add a new field to these forms.
    i
    Feel free to update the headers, the content wording, images, colors, etc.
    Once you've have finished updating the tab, click on the 'Save' button and select the Share page in the main menu or you can select the following page in the editor's header Current page option.
    The Share tab is the one your advocates will use to refer your services/products. They will be able to use all the tools available on the template to share your services/products socially everywhere they want. Once again, feel free to update the wording, colors, etc.

    Tab Share

    Personalize the referrals tools for your referral program
    Once you've have finished updating the tab, click on the 'Save' button and select the Earn page in the main menu or you can select the following page in the editor's header Current page option.
    On the Earn tab, your advocates will be able to see the number of bonuses generated per network and the amount of referral generated per network. This is very useful as they will be able to focus on the network that is been generating more revenue.

    Tab Earn

    Personalize the statistics tab for your referral program
    Once you've have finished updating the tab, click on the 'Save' button and select the Get Paid page in the main menu or you can select the following page in the editor's header Current page option.
    Once your advocates start accumulating bonuses, they will be able to request a bonus redemption on this tab. The amount to request will have to be bigger than the payout threshold defined in the Settings section. Make sure you replace the $$$ by the proper amount (your payout threshold) and feel free to change any other element in the template. Once an advocate requests a bonus redemption, the request will have to be processed by your team, you can find more details here.

    Tab Get Paid

    Personalize the bonuses redemption tab for your referral program
    Once you've have finished updating the tab, click on the 'Save' button so that all changes are registered.
    In the extra settings section, is where you are able to define configurations related to the referral program's layout and notifications.

    In the section, you are able to set up the payout threshold for your advocates, you can specify the template title, description and badge image to display when uploading or sharing your page.

    Also, it includes a section to manage the languages in which your Program will be available and you can add translations of the content of your template.

    Configuring the extra settings

    Setting up extra setting in your refer a friend program
    Once you've finished with this section, click on the 'Save' button to register the changes.

    Code snippets

    To obtain each of the code snippets to install the program on your website, we must go to Integrations- Code Snippets-Installation.
    Integration section through which you will install your referral program
    If we are already in the installation section, we can notice that we have 4 options to install the Embedded Code program, Modal Window, Floating Bubble, and Slider. Taking into account the details of your store, you can choose the one you want and best suit your needs. Once you select one of the options, you will have access to the corresponding code snippet to install the Program template.
    For the modal window, floating bubble, and slider options, they include a setting section where you can customize some details for example style and location.
    Installation options.
    Follow the instructions and you will get the code corresponding to each case.
    Embedded Code
    <!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
    <span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
    <script type="text/javascript">
    !function(){
    const grSetting={
         "grTemplateSlug": "referral-program-home-page",
         "grCustomerCurrencyCode": "USD",
         "grLanguage": "en",
         "grInstallMethod":"embeddedcode"
    },
    e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
    </script>
    <!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
    Modal Window
    <!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
    <span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
    <script type="text/javascript">
    !function(){
    const grSetting={
         "grTemplateSlug": "referral-program-home-page",
         "grCustomerCurrencyCode": "USD",
         "grLanguage": "en",
         "grInstallMethod":"modal"
    },
    e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
    </script>
    <!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
    Floating Bubble
    <!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
    <span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
    <script type="text/javascript">
    !function(){
    const grSetting={
         "grTemplateSlug": "referral-program-home-page",
         "grCustomerCurrencyCode": "USD",
         "grLanguage": "en",
         "grInstallMethod":"bubble"
    },
    e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
    </script>
    <!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
    NOTE:
    You can load the template in a regular page, modal window, floating bubble or slider.
    i
    Let's first install the referral program's template on your website so that your advocates can access to the program. Create your new referral page on your website and name it "Referral Program". Then install the following codes snippets to load the template on your website. Copy the code snippet and place it wherever you want your template to be loaded in the HTML code on your Referral Program page.

    Loading the template into your website using our codes snippets

    Once the code is in place, refresh the page in your browser (F5). if everything goes ok, your system should be able to load the program on your refer a friend page. See the image below for more details.
    Loading a new referral program in your websit.
    To get each of the specific scripts you need to go to the Integrations-Code Snippets-Conversion Tracking section. In this section you can find two options "Platforms and Scenarios" by which you can obtain these fragments, you must choose which one you will use. The first has a group of platforms, where the steps and code fragments specific to the selected platform are indicated. In the second option you can find a selection of various scenarios that can be adjusted to your needs.

    Configuration of the Tracking and Conversion scripts.

    Get the code snippets for tracking and conversion.

    Catching the referrer data

    The process of catching new referrals is very simple, you just need to load the tracking code snippets and place it on the landing page (landing URL) specified in the package of the share courier associated with the template (if you don't know where to find your landing URL, please read our tutorial on How to create a social widget package for more information), paste the script tags inside and at the end of the "body" tag. The example below shows the details.
    In this guide we will use the Integrations-Code Snippets-Conversion Tracking-Scenarios section. Depending on which one is chosen, the steps to follow and the fragments to install vary. Scenario E004 was chosen for this guide.
    <!-- STARTING GENIUS REFERRALS TRACKING CODE -->
    <script type="text/javascript">
    !function(){
    const grSetting={
         grCookieLifeTime:"180"
    },
    e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.catchReferrer(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
    </script>
    <!-- ENDING GENIUS REFERRALS TRACKING CODE -->  
    
    So far, we have loaded the referral program on the website and placed the code snippet needed to catch the referrer data. The next step is to track new referral.

    This code snippet needs to be triggered when the prospect (advocate's friend) has filled out a form on your website, this can be a contact form, a signup form, etc. You can trigger the code snippet on a confirmation page or on the submit event of your form 'Submit' button. We will need only the Name, Last name, and Email of your lead and/or customers. Copy the scripts tags and place them inside and at the end of the 'body' tag in your sign up confirmation page or book now confirmation page, etc. so that we can create a new advocate in our platform. Make sure to replace the parameters indicated in red by the proper values. The following is a fully-functional example.

    Tracking new referrals

    NOTE:
    The processCustomer method will send your leads data to Genius Referrals only when the lead is a qualified referral.
    i
    <!-- STARTING GENIUS REFERRALS TRACKING CODE -->
    <script type="text/javascript">
    !function(){
    const grSetting={
         "grTemplateSlug": "referral-program-home-page",
         "grCustomerFirstname": "CUSTOMER_FIRSTNAME",
         "grCustomerLastname": "CUSTOMER_LASTNAME",
         "grCustomerEmail": "CUSTOMER_EMAIL",
         "grCustomerCurrencyCode": "USD",
         "grCanRefer": false,
         "grReference" : "REFERENCE",  /** could be the order id, timestamp, etc. **/
         "grPaymentAmount" : "PAYMENT_AMOUNT" /** optional (float) **/
    },
    e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
    </script>
    <!-- ENDING GENIUS REFERRALS TRACKING CODE -->
    
    Once the code is been put in place, every time the processCustomer method is called, the code snippet will check if the prospect and/or customer is been referred and create a new referral in your Genius Referrals account only when it's a qualified referral.
    Most of the time, when an advocate generates a new referral he will receive a bonus. This, of course, will depend on your business rules and the restrictions you have specified in your referral campaign. To give bonuses to the customer's referrer (advocate) you have three options:
    1. Using our Control Center, you can read how in this post
    2. Using our SDKs or APIs
    3. Using the code snippets provided in the previous step.
    We are going to focus here on the third option as the other ones have been documented elsewhere. To give a bonus to the customer's referrer, copy the scripts tags and place them inside and at the end of the 'body' tag in your payment confirmation page or wherever you want to give a bonus to the customer's referrer. When trying to give a bonus the following parameters are available to be sent:
    • CUSTOMER_EMAIL: The customer's' email (eg. john@smith.com). This is a required parameter.REFERENCE: Your reference number, could be a payment id, order id, timestamp, etc. This is a required parameter.TOTAL_OF_PAYMENTS: The total of payments the customer has made on your system. This is an optional parameter and is needed only when you've set up the amount_of_payment restriction on your referral campaign.
    • PAYMENT_AMOUNT: The total amount of the payment made in your system. This is an optional parameter and is needed only when you've set up a referral campaign based on percentage.
    • Make sure to replace the parameters CUSTOMER_EMAIL, REFERENCE and PAYMENT_AMOUNT (optional) with the proper values. The following example shows the details.

    Giving bonuses to your advocates

    <!-- STARTING GENIUS REFERRALS TRACKING CODE -->
    <script type="text/javascript">
    !function(){
    const grSetting={
         "grTemplateSlug": "referral-program-home-page",
         "grCustomerFirstname": "John",
         "grCustomerLastname": "Smith",
         "grCustomerEmail": "john@smith.com",
         "grCustomerCurrencyCode": "USD",
         "grCanRefer": true,
         "grReference" : "12345",  /** could be the order id, timestamp, etc. **/
         "grPaymentAmount" : "5" /** optional (float) **/
    },
    e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
    </script>
    <!-- ENDING GENIUS REFERRALS TRACKING CODE -->
    Once a bonus is given to the advocate, he will be able to redeem it as cash, credit or goods. You can review the bonuses section on your Genius Referrals account for more information. Also, the post managing bonuses have more information about this topic.
    LANGUAGE