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 Website Builder.
If you haven't already done this yet, please go to our Website Builder and customize your referral program templates before continuing to read this tutorial.

INSTALLING YOUR REFERRAL PROGRAM ON SQUARESPACE

This tutorial is for clients with a Squarespace online store. If you want to install a referral program on Squarespace, read on. Otherwise, go to our integration section and find the guide that best fits your needs.

Who should read this tutorial?

Your Squarespace website homepage where you will install a referral program

Expectations

At the end of this tutorial, you will have a referral program installed in your store. Where your customers and visitors can become brand advocates, access the right tools to share your products (on social media, via email and instant messages, QR codes, etc.), and earn rewards for each qualified referral.
Your advocates will also be able to check their performance in the statistics section and redeem their bonuses as PayPal cash, gift cards, vouchers, account credit, and/or products.

Requirements

  1. An Advocate Portal template. This template is for your clients and visitors (advocates, agents, affiliates, influencers, etc.).
  2. A shop on Squarespace.
List of optional requirements:
  1. A Post-Purchase template that you can add to the order confirmation page. This Post-Purchase action will allow your customers to share your products right after completing a purchase.
To install the Genius Referrals program on your Squarespace store, you will need to add 3 code snippets on some pages. For example: to install the program, capture referrals, and reward advocates once the referral completes a purchase, you need to add:

1. The code snippet that allows you to install the Advocate's portal template.
2. The tracking code snippet on your landing page to track referrals.
3. The conversion code snippet on their thank you page.

In the next section, we will explain in detail some examples for each of the scenarios that you may have in your store.
To get each of the previous code snippets, go to Integrations-Code Snippets-Installation.

Starting the Squarespace integration with Genius Referrals

Integration section through which you will install your referral program
On the installation section, note that we have 4 options to install the program: Embedded Code, Modal Window, Floating Bubble, and Slider. Considering the requirements of your store, choose the option that best suits your needs. Once you select one of the options, you will have access to the corresponding code snippet to install the Program template.
The Modal Window, Floating Bubble, and Slider options include a setting section where you can customize some details, for example, style and location.
Installation options.
Follow the instructions and you will get the code corresponding to 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 -->
To add the Genius Referrals template, create a new page in Squarespace which you will name "Refer and Earn" and then insert the code snippet obtained in the previous step. To create the page, you will do it from the Pages tab, press the "+" to add a new page and select "Blank page" as shown in the image.

Adding the Advocate Portal template to your store

Add and fill the fields of a new page in your Squarespace store.
Once the page has been created, the configuration icon of the page itself is selected in the "Advanced" section.
Add and fill the fields of a new page in your Squarespace store.
In the next window, copy the code generated by Genius Referrals obtained in the Installation section and insert the corresponding code as shown in the image.
Once the code is ready, you need to click the "Save" button and reload the "Refer and Earn" page, you should see the Genius Referral template.
Look how beautiful looks your referral program template on your Squarespace website
To get the code snippet, go to the Integrations-Code Snippets-Conversion Tracking-Platforms section.

Configure the Tracking and Conversion scripts

Get the code snippets for tracking and conversion.

1. Add the Tracking code to your store.

First, select the Squarespace platform and follow the instructions to obtain the code snippet.
We will get the tracking code snippet that needs to be copied and installed following the instructions above, below we can see an example of the code.
<!-- 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.
Get the conversion code snippet that needs to be copied and installed following the instructions mentioned above. Below we can see an example of the code.
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){const e=window,o={
     "grTemplateSlug": "referral-program-home-page-1646",
     "grCustomerFirstname": "{customerEmailAddress}".match(/^([^@]*)@/)[1],
     "grCustomerLastname": "{customerEmailAddress}".match(/^([^@]*)@/)[1],
     "grCustomerEmail": "{customerEmailAddress}",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "Order Id: {orderId}",
     "grPaymentAmount" : "{orderSubtotal}"
};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 --> 
        

Test the installation of the referral program.

Once the installation is completed, your referral program should be up and running. Your clients and visitors will be able to access the program and recommend your products. Some things you will notice in your store:

  1. A new link in the website navigation menu 'Refer and Earn', which visitors and customers (advocates) can use to refer your products.
  2. A program installed on the Referral Program page where advocates can:
    1. Learn how it works.
    2. Sign up on the program.
    3. Refer your products to friends and family using their personal link, email, social media, blog posts, chats, etc.
    4. Review the program's performance and react. Here are some questions they might ask themself:
      1. How many referrals and bonuses have I generated?
      2. What distribution channels work best for me?
      3. Where should I put my efforts?
    5. Manage bonuses and payouts. Bonuses can be redeemed for credit in the local account they have in your business, cash in their PayPal accounts, gift cards, products, vouchers, etc. Almost anything you want.
  3. If you installed a Post-Purchase template, your customers will see the post-purchase action on the purchase confirmation page. The Post-Purchase template will appear to invite customers to refer your products right after an order is completed (this is highly recommended).

Scenario: Refer new leads to the Squarespace store.

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

Test that John can share your products anywhere.

For John to be able to refer products, he needs to access the referral program page and use the referral tools.
John will be able to use all the tools available on the "Share" tab. In this scenario, John sends Matt his personal URL so that Matt can check out your products and make a purchase.
Allowing your customers to refer your services on your referral program

Test that the referral (Matt) was created successfully.

Once John has shared his share link with Matt, Matt will click on the link and land on your store (on your referrals landing page). Matt will search for 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. You should be able to see Matt on the list.
Generating a new referral on your Squarespace store

Testing that a bonus is given to John once Matt has completed a purchase

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 status Payment accepted, John should receive a $10 bonus on Genius Referrals.
To check if the bonus was given to the advocate, go to the bonus section. You should be able to see John's new bonus on this page.
Bonus given to advocate on Squarespace Referral Program

That's all.

If everything has gone well so far, your referral program is working fine.
LANGUAGE