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

Choosing your template in our Template Builder


To choose the template that best suits your needs, go to the 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 Widget Package (if you haven't created a social 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.
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 to 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
Once you've finished with this section, click on 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 tab header and 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.

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 code snippets and instructions needed to load the program on your website.
Your code snippets and instructions
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.
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 have 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 on 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": "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 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.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": "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 have more information about this topic.