Genius Referrals
If you are in this section, we are assuming at this point that you have already personalized the templates for your referral program in our Templates Builder. If you haven't done this yet, please go to our Design Center and customize your referral templates before continuing with this tutorial.

INSTALLING YOUR REFERRAL PROGRAM ON CSCART

This tutorial is for clients with a Cscart online store. If you want to install a referral program on Cscart, please continue reading. Otherwise, go to our integration section and find the guide that best fits your needs.
Who should read this tutorial?
Your Cscart website homepage where we will install a referral program
Expectations
At the end of this tutorial, you will have a full referral program installed on your store that will empower your customers and visitors with the right tools to refer your products (on social media, using email and instant messages, QR codes, etc.) and generate bonuses for every qualified referral. Your advocates will also be able to review the performance of their referral program, redeem bonuses for cash, gift cards, credit, vouchers, coupons, or products.
Requirements
The following list of items are required:

  1. A Full Widget template with the Sign Up and Login forms. This template is for visitors (advocates, agents, affiliates, etc.) who want to refer your services but are not your customers, as they are not your clients they need to sign up for the referral program.
  2. A Full Widget template without the Sign Up and Login forms. This template is for your clients to access the program using single sign-on.
  3. A Cscart store
The following list of items are optional:

  1. A POS Template to load on the order confirmation page. This call to action will allow your customers to share your products right after an order has been completed. A POS template will increase your conversion rate by at least 10%.
To install the Genius Referrals template and the other codes on your Cscart website, you need to add the code snippets on some pages of your website. For example: to capture new referrals, you need to add a specific code snippet to the contact form.

In the next section, we will explain in detail some examples for each of the scenarios that you may have on your website.

To obtain each of the specific scripts we need to go to the Integrations-Code Snippets-Installation section.
Starting the Cscart integration with Genius Referrals
Integration section through which you will install your referral program
This installation section allows you to choose the way you would like the referral program to be displayed on your site, it can be (Embedded code - Modal window - Floating bubble - Slider) once you select one of the options you will have access to the fragment corresponding code, in addition to the modal, bubble and slider control, it has a configuration section where you can choose the style and location in each case.
Code snippets for your 3dcart instalation
Follow the instructions and you will get the respective code for each case.
Embedded Code
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page-1646">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page-",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "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.0.0.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-1646">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page-",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "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.0.0.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-1646">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page-",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "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.0.0.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 -->
Slider
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page-1646">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page-",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "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.0.0.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 -->
To load the Genius Referrals template, we create a new page in Cscart and name it "Refer and Earn". Then we add the code snippet obtained in the previous step. Once the page is created and the code configured correctly, you will need to save all the changes and load the "Refer and Earn" page, then you can see your Genius Referral template.
Loading the Full Widget template on your referral program page

Look how beautiful looks your referral program template on your Cscart website
To obtain each of the specific scripts we need to go to the Integrations-Code Snippets-Conversion Tracking-Platforms section.
Configure the Tracking and Conversion scripts
Getting the code snippet to place on the landing page of your referral program
1. Add the Tracking code to your store.
You need to select the Cscart platform and follow the steps, to install the code snippet follow the instructions as shown in the image.
You will get the tracking code shown in the following image which you will copy according to the previous instructions.
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){const e=window,t=document;o={
            grCookieLifeTime:"180"
   };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.0.0.min.js",e.onload=function(){GRToolbox.catchReferrer(o)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
        
2. Add the Conversion code to your store.
To install the code snippet follow the instructions as shown in the image.
You will get the tracking code shown in the image below which you will copy according to the instructions above.
  <!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){const e=window,o={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerFirstname": "{$order_info.firstname}",
     "grCustomerLastname": "{$order_info.lastname}",
     "grCustomerEmail": "{$order_info.email}",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "Order Number: {$order_info.order_id }",
     "grPaymentAmount" : "{$order_info.subtotal}"
};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.0.0.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(o).then(e=>{})};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE --> 
Testing the Installation of your new Referral Program
Once the installation of the module is completed and configured, your referral program should be up and running. Your customers and visitors will be able access to the program and refer your products. A few things you will notice in your store:

  1. A new link on your navigation bar 'Referral Program', that your visitors and customers (advocates) can use to refer your products.
  2. A template installed on the Referral Program page where your advocates will be able to:
    1. Access the referral program and learn how it works
    2. Sign up on the program if they are not your customer
    3. Refer your products with friends and family using their personal share links via email, social media, blog posts, chats, etc.
    4. Review the performance of their referral program and react. These are some questions they might ask themselves:
      1. How many referrals and bonuses I have generated?
      2. What distribution channels are working better for me?
      3. Where should I put my efforts?
    5. Manage bonuses and redemptions. Bonuses can be redeemed for cash, products, credict, gift card, charity, points, Paypal, vouchers, etc. Pretty much anything you want.
  3. If you selected a POS template, your customers will see a call to action on the order confirmation page. The POS template will pop up to invite customers to refer your products right after an order is completed (this is highly recommended).
  4. If you selected the option 'Auto bonuses redemption as Cart Rule?', a new Cart Rule will be generated and be available for your customer's next purchase.
Scenario: Referring new prospects to a Cscart Store

In this scenario, we are assuming the following:
  1. You have a Cscart store that sells t-shirts online.
  2. You have set up a referral program with Genius Referrals to allow your customers and visitors to refer your products to friends, family, colleagues, etc.
  3. On your referral campaign, you are giving $10 to your customers for every qualified referral. A qualified referral is a referral that completes a purchase.
  4. John Smith is one of your best customers, he loves your products and is happy to share your services with his friends, family, colleagues, etc. This is his personal data:
    1. Name: John
    2. Last name: Smith
    3. Email: john@example.com
  5. John refers to his friend Matt so that he can buy new t-shirts in your store. This is his personal data:
    1. Name: Matt
    2. Lastname: Hanks
    3. Email: matt@example.com
  6. John receives $10 as a bonus once Matt has completed a purchase
The following image represents the referral flow that we will be testing:


Referral Program process
Testing that John can share services anywhere he wants
For John to be able to refer products he needs to access the referral program page and use the referrals tools to share the services.
John will be able to use all the tools on the "Share" tab. In this scenario, John sends Matt his personal URL so that Matt can check outthe products and make a purchase.
Allowing your customers to refer your services on your referral program
Testing that the referral (Matt) is successfully created
Once John has shared a product with Matt, Matt will click on John's personal URL and land on your store (on your landing page). Matt will browse your products, add some to the cart and finally complete a purchase. Once Matt has completed the purchase, a new referral will be generated on Genius Referrals. To check if the new referral was created, go to your Members section on Genius Referrals. You should be able to see Matt on the list.
Generating a new referral on your Cscart store
Testing that a bonus is given to John once Matt has completed a purchase
Now we need to check if the advocate (John) receives a bonus once the referral (Matt) completes a purchase. Once a purchase is completed, and the order is moved to the state Payment accepted, John should receive a $10 bonus on Genius Referrals.
To check if the bonus was awarded to the advocate on Genius Referrals, go to the bonus section. You should be able to see John's new bonus on this page.
Bonus given to advocate on Cscart Referral Program

Excellent!

LANGUAGE