Full Widget Template

Use the template type Full Widget when you want to load a full referral program widget in your website with tabs for handling Program Overview, Referrals Tools, Statistics, Bonuses Redemption and Registration &  Log in forms. The Registration &  Log in forms are optional and you can opt-out when configuring the program in step 2. 

Advantages of using Full Widget

There are several advantages when choosing the Full Widget template for your referral program:

  1. Easy set up and customize through our Design Center
  2. A full set of tools that your advocates can use to manage and monitor their referral program. 
  3. Easy to install in your website with our code snippets. 

Disadvantages 

There are also disadvantages when using this type of template:  

  1. Limited to the design templates available in our Design Center.  
  2. Not very functional when you only want to present to your advocates the referral tools. In this case, you should use one of the POS or Share Links templates. 

Choosing your template in our Design Center

To choose the template that best suits your needs, go to the Design Center 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 4 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 'Full Widget' 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 the perfect template for your referral program

choosing the perfect template for your affiliation program

Configuring the extra settings

In the extra settings section, is where you are able to define configurations related to the referral program's layout and notifications.

In the 'Referral program layout' section, you can choose whether or not to have registrations and log in forms in your program. Also, you are able to set up the email subject and payout threshold for your advocates.  

settting up extra setting in your refer a friend program

In the  'Notifications' section is where you decide whether or not to send notifications to your advocates. Choose the notification that you want to include in your program and customize the subject and message to be sent to your advocates. The following tags are available to use in the subject and message: [advocate_name], [advocate_lastname], [advocate_email], [advocate_claimed_balance], [advocate_unclaimed_balance], [advocate_total_bonuses], [advocate_total_referrals], [referral_name], [referral_lastname], [referral_email], [referral_claimed_balance], [referral_unclaimed_balance], [referral_total_bonuses], [referral_total_referrals]. These tags will be replaced with the correct values. You will also have the Integration section where you can select when you want to give bonuses to your advocates.

set up notifications for your refer a friend program

Once you've finished with this section, click on the 'Continue' button to go the next step. 

Personalizing the template content

In step 3, we display all the tabs that are part of your referral program. A typical full widget template will have 5 or 4 tabs, it will have 4 tabs only when you've not included the registration and sign up forms.  

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 a WYSIWYG 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. 

Tab Overview

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

personalize the tab overview for your refer a friend program

NOTE: 

The action 'Regenerate this tab' can be used to regenerate the tab to its original state.

 Once you've have finished updating the first tab, click on the 'Save and Next' button to go to the next tab.   

Tab Registration and Login 

The tap Registration and Login will be available only if you've selected 'Yes on the option 'Add tab for registration & login form' that in available in step 2. This tab displays the forms that your advocates will use to sign up and log into your referral program. 

IMPORTANT

Please, do not remove or add a new field to these forms, the system will work only with the fields defined in the template. If you need something more sophisticated get in touch with us and we'll customize a template according to your needs. 

Feel free to update the headers, the content wording, images, colors, etc. 

personalize the registration forms for your affiliation program

Once you've have finished updating the tab, click on the 'Save and Next' button to go to the next tab.   

Tab Referrals Tools

The Referrals Tools 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. 

personalize the referrals tools for your referral program

Once you've have finished updating the tab, click on the 'Save and Next' button to go to the next tab.   

Tab Statistics

On the statistics tab, your advocates will be able to see the amount 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. 

personalize the statistics tab for your referral program

Once you've have finished updating the tab, click on the 'Save and Next' button to go to the next tab.

Tab Bonuses Redemption

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 step 2. 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.  

personalize the bonuses redemption tab for your referral program

Once you've have finished updating the tab click, on the 'Save and Next' button to go to the next tab.

Previewing and publishing

The preview and publish tab allows you the see a preview of your referral program, click on the tabs to see all the contents. To make a change, just scroll up and click edit on the section to be updated. 

preview of your referral program

Once you are happy with all the changes, click on the 'Publish and get me the code' button to get the codes snippets and instructions needed to install the program in your website. 

your code snippets and instructions

Loading the template into your website using our codes snippets

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 (CODE SNIPPET 1) 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

NOTE:

You can load the template in a regular page or a pop up.

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>    
         <img src="http://media-cache-ec0.pinimg.com/originals/83/d8/5d/83d85df16252b600986876c58e8e5b4d.jpg"></img>
         <br /><br />        
   <!-- BEGINNING Genius Referrals code snippet -->

<span class="gr_full_widget_design" id="gr-referral-program-home-page-256">&nbsp;</span>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>

<script type="text/javascript">

    grToolbox.loadTemplate({

        "grTemplateSlug": "referral-program-home-page-256",

        "grCustomerCurrencyCode": "USD",

        "grLanguage": "en"

    });

</script>



<!-- ENDING Genius Referrals code snippet -->

        <br />
        <img src="http://media-cache-ak0.pinimg.com/originals/ec/11/c5/ec11c5ecbf4dee4f1ababd0b00821b54.jpg"></img>    
 </body>
</html>


NOTE:

You will be able to download this example at the end of this article.

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 on your website

Catching the referrer data

The process of catching the referrer data is very simple, you just need to load the code snippets on step 2, the code snippets has all needed for catching the referrals. The code must be placed on the landing Page (landing URL) specified your the widget package asociated with the template (if you don't know where to find your landing URL, please read our tutorial on how to create a widget package for more information), paste the script tags inside and at the end of the "body" tag. The example below shows the details.

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>  
    <!-- BEGINNING Genius Referrals code snippet -->    

<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>

<script type="text/javascript">

    grToolbox.catchReferrer();

</script>

    <!-- ENDING Genius Referrals code snippet -->
</body>
</html>

NOTE:

You will be able to download this example at the end of this article.

Tracking new referrals

So far, we have loaded the referral program in the website and placed the code snippet needed to catch the referrer data. The next step (CODE SNIPPET 3) is to track new the 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 sign up 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.

NOTE:

The processCustomer method will send your leads data to Genius Referrals only when the lead is a qualified referral.


<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>  
    <!-- BEGINNING Genius Referrals code snippet -->    

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>

<script type="text/javascript">

    grToolbox.processCustomer({

        "grTemplateSlug": "referral-program-home-page-256",

        "grCustomerFirstname": "CUSTOMER_FIRSTNAME",

        "grCustomerLastname": "CUSTOMER_LASTNAME",

        "grCustomerEmail": "CUSTOMER_EMAIL",

        "grCustomerCurrencyCode": "USD",

        "grCanRefer": false    });

</script>


    <!-- ENDING Genius Referrals code snippet -->
</body>
</html>


NOTE:

You will be able to download this example at the end of this article.

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 quilified referral.

Giving bonuses to your advocates

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, you can read more in this post     
  3. Using the code snippets provided on step 5.

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' 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, AMOUNT_OF_PAYMENTS (optional) and PAYMENT_AMOUNT (optional) with the proper values. The following example shows the details.

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>  
    <!-- BEGINNING Genius Referrals code snippet -->    

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>

<script type="text/javascript">

  grToolbox.processForBonus({

        "grTemplateSlug": "referral-program-home-page-256",
        "grCustomerEmail": "john@smith.com",
        "grReference" : "123456789",  /** could be the order id, timestamp, etc. **/
        "grPaymentAmount" : "5" /** optional (float) **/
    });
</script>


    <!-- ENDING Genius Referrals code snippet -->
</body>
</html>


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 has more information about this topic.


Resource Extension Size



Please leave your comments/questions below