INSTALLING YOUR REFERRAL PROGRAM ON ECWID

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 done this yet, please go to our Design Center and customize your referral templates before continuing with this tutorial.
This tutorial is for clients with a Ecwid online store. If you want to install a referral program on Ecwid, please continue reading. Otherwise, go to our integration section and find the guide that best fits your needs.

Who should read this tutorial?

Your Ecwid website homepage where we 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

The following list of items are required:

  1. An advocate portal template. This template is for your customers and visitors (prospects, agents, affiliates, influencers, etc.).
  2. A shop on Ecwid
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 Ecwid 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 portal template.
2. The tracking code snippet on your landing page to track referrals.
3. The conversion code snippet on the purchase 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 Ecwid 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 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 -->
To add the Genius Referrals template, create a new page in Ecwid and name it "Refer and Earn". Then we insert the code snippet obtained in the previous step. Once the page is created and the code configured correctly, you need to click the "Save" button and load the "Refer and Earn" page, you should see the Genius Referral template.

Adding the Advocate's Portal template to your store

Look how beautiful looks your referral program template on your Ecwid 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 Ecwid 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">
   <#noescape>
   var full_name = "${customer.name?js_string}";
   var first_name = full_name.split(' ').slice(0, -1).join(' ') ? full_name.split(' ').slice(0, -1).join(' ') : full_name;
   var last_name = full_name.split(' ').slice(-1).join(' ') ? full_name.split(' ').slice(-1).join(' ') : full_name;
   var payment_amount = "${order. subtotal}".replace(/[^\d.-]/g, '');
   </#noescape>
!function(){const e=window,o={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerFirstname": first_name,
     "grCustomerLastname": last_name,
     "grCustomerEmail": "${customer.email?js_string}",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "Order Number: ${order.number}",
     "grPaymentAmount" : payment_amount 
};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 Ecwid store.

In this scenario, we are assuming the following:
  1. You have an Ecwid 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 services 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 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 your products with Matt, Matt will click on John's share 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 Ecwid 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 Ecwid Referral Program

That's all.

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