Share Links Template
Use the template type Share Links when you want to load just the share links on your website so that your advocates can refer your services/products.

Advantages of using Share Links

There are several advantages when choosing Share Links for your referral program:

  1. Perfect for using in a banner, footer, lateral menu or ad when you want to give quick access to the share links.
  2. Easy set up and customize through our Templates.
  3. Easy to tweak through our Templates
  4. Easy to install on your website with our code snippets.

Disadvantages


There are also disadvantages when using this type of template:

  1. Limited to the share links referral tools. Advocates are not able to sign up, review statistics and redeem bonuses. In this case, you should use one of the Full Widget or POS templates
  2. Limited to the design templates available in our Design Center.

Choosing your template


To choose the template that best suits your needs, go to Templates 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 Social Widgets (if you haven't created a Social Widget package check out this section) before choosing the template. Click on the template type 'Share Links' 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.

Configuring the extra settings

On the Extra settings section, is where you are able to define configurations related to the referral program layout.

In the Template section, you are able to set up the email subject and payout threshold for your advocates.
Once you've finished with this section, click the 'Continue' button to go to the next step.
Personalizing the template content

In step 3, we display all the content of the referral program. Here you are able to update the main content. To help you personalize the contents of your referral program, we load the main content 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.
Note:
The action 'Regenerate this tab' can be used to regenerate the tab to its original state.
Once you've have finished updating the content, click on the 'Save and Next' button to go to the next step.

Previewing and publishing
The preview and publish tab allows you the see a preview of your referral program. To make a change, just scroll up and click edit on the section to be updated.
Once you are happy with all the changes, click on the 'Get me the code Snippets' button to get the code snippets and instructions needed to load the program on your website.
Loading the template into your website using our codes snippets

To load the template on your website (in your refer a friend page) you need to use the codes snippets generated in

step 1. You'll have to place it where you want to load the referral program on your HTML page. The following example shows the details.
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_share_links_design" id="gr-share-link">&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": "share-link",
        "grCustomerEmail": "CUSTOMER_EMAIL",
    "grCustomerFirstname": "CUSTOMER_FIRSTNAME",
        "grCustomerLastname": "CUSTOMER_LASTNAME",
        "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.
Catching new referrals

The process of catching new referrals is very simple, you just need to load the code snippets on step 2, the code snippet has all needed for catching the referrals. The code must be placed on the landing page (landing URL) specified your the widget package 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.
<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.
Processing customers

So far, we have loaded the referral program in the website and placed the code snippet needed to catch new referrals. The next step (3) is to send your customers data to Genius Referrals so that we can track new shares, clicks, referrals, and bonuses. We will need only the Name, Last name and Email of your 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 CUSTOMER_NAME, CUSTOMER_LASTNAME, and CUSTOMER_EMAIL by the proper values. The following is a fully-functional example.
<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">
  /**
        * This script creates a new advocate in the Genius Referrals platform. Also, if is needed it will create a new referral between the new advocate and his referrer.
        **/
    grToolbox.processCustomer({
        "grTemplateSlug": "share-link-1",
        "grCustomerFirstname": "John",
        "grCustomerLastname": "Smith",
        "grCustomerEmail": "john@smith.com",
        "grCustomerCurrencyCode": "USD",
        "grCanRefer": true    });
</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 create a new advocate in your Genius Referrals account. If the new customer is been referred by a friend we will also create a new 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 in 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'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.
  • AMOUNT_OF_PAYMENTS: The amount 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">
 /**
        * This script tries to give a bonus to the customer's referrer.
        **/
    grToolbox.processForBonus({
        "grTemplateSlug": "share-link-1",
        "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, gift cards, credit, products, discount codes and more. You can review the Rewards section on your Genius Referrals account for more information. Also, you can learn more about this topic on the Bonuses page.