POS Template


Use the template type POS (Point Of Sale) when you want to load just the referrals tools on your website so that your advocates can refer your services/products. 

Advantages of using POS

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

  1. Perfect for using a pop-up or small windows when you want to give a quick access to the referrals tools after a purchase is completed, a signup process is completed, etc.
  2. Easy set up and customize through our Design Center.
  3. Easy to tweak through our Design Center
  4. 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 referrals tools. Advocates are not able to sign up, review statistics and redeem bonuses. In this case, you should use one of the Full Widget templates 
  2. Limited to the design templates available in our Design Center.  

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 NameDescription, and Widget Package (if you haven't created a widget package check out this section) before choosing the template.  Click on the template type 'POS' 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 are able set up the email subject and payout threshold for your advocates. 

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 tags [name] and [account_website_url] will be replaced automatically by our system before sending out the notification email. 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 content of the referral program. Here you are able to update the tab header and the main content. To help you personalise 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.

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.  

personalize the referrals tools 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 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. 

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 load the program in your website. 

your code snippets and instructions

Loading the template into your website using our codes snippets

To load the template in 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. 
have to place it in the place where you want to upload your referral program on your HTML page

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_pos_design" id="gr-pos-2">&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": "pos-2",
        "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. 
loading a new referral program in your website

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

Processing customers

So far, we have loaded the referral program in the wesite 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 NameLast 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_NAMECUSTOMER_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": "pos-2",
        "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 APIsyou 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 tryign 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.
  • 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_EMAILREFERENCEAMOUNT_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": "pos-2",
        "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