INSTALLING YOUR REFERRAL PROGRAM ON TILDA

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.
This tutorial is for clients with a Tilda online website. If you want to install a referral program on Opencart, please continue reading. Otherwise, go to our integration section and find the guide that best fits your needs.

Who should read this tutorial?

Your Tilda 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

The following list of items are required:

  1. An Advocate's Portal Template. This template is for your clients and visitors (advocates, agents, affiliates, influencers, etc.).
  2. Website in Tilda.
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 template and the other codes on your Opencart website, 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 Tilda 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 Tilda and name it "Refer and Earn". Then we insert the code snippet obtained in the previous step. To create the page we do it from the administration panel you can find the option "Create new page".

Adding the Advocate's Portal template to your store

Add and fill the fields of a new page in your Tilda store.
Once the page is created, a new block will be added. In the "Others" section of the block library, select "Embed HTML code". When editing the content of the block, the code obtained previously is copied.
Prueba de que la referencia (Matt) se ha creado con éxito.

Una vez que John haya compartido los servicios con Matt, Matt hará clic en el enlace para compartir de John y aterrizará en su tienda. Matt buscará su producto, agregará algunos al carrito y finalmente pagará por los productos. Una vez que Matt haya completado una compra, se generará una nueva referencia en Genius Referrals. Para verificar si se ha creado la nueva referencia, vaya a la sección de su defensor sobre referencias Genius. Deberías poder ver a Matt en la list
Add and fill the fields of a new page in your Tilda store.
Once the code is ready, you need to click the "Save" button and load the "Refer and Earn" page, you should see the Genius Referral template.
Look how beautiful looks your referral program template on your Tilda website
To get the code snippet, go to the Integrations-Code Snippets-Conversion Tracking-Scenarios section. In this section, you can find a selection of various scenarios that can be tailored to your needs depending on which one applies to your website.

Configure the Tracking and Conversion scripts

Get the code snippets for tracking and conversion.

Select the scenario and install the necessary fragments.

1. Get the snippets to install:

1. Select the scenario.
(Depending on which one is chosen, the steps to follow, and the fragments to install change. Scenario E001 was chosen for this guide).
2. Enter the URL where your subscription form is located.
3. Indicate how each of the fields and buttons obtained from your form corresponds.
4. Set the expiration time for cookies.
5. Generate a code snippet
Code snippet

<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function (){
const submit = function (e){
const grFirstName=document.getElementsByName("Name")[0].value,
grLastName=document.getElementsByName("Name")[0].value,
grEmail=document.getElementsByName("Email")[0].value,
grMetadata='['+']';
if (grEmail != '') {
e.preventDefault();
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerFirstname": grFirstName,
     "grCustomerLastname": grLastName,
     "grCustomerEmail": grEmail,
     "grMetadata": grMetadata,
     "grCustomerCurrencyCode":  "USD", /** your customers currency code **/
     "grCanRefer": "false",
     "grReference" : "1611863348" /** could be the order id, timestamp, etc. **/
}
const button = this;
GRToolbox.processCustomerAndBonus(grSetting).then(function(){
button.onclick=function(){};button.click();});}};
const grSettingCookie={
     "grCookieLifeTime": "180",
},
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.catchReferrer(grSettingCookie);t.getElementsByClassName("t-submit")[0].onclick = submit;};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 below:
1. By managing your site go to the page where you have the registration form of your subscribers to which you want to track and convert.
2. Add a block for "Embed HTML code".
3. Edit and copy the code obtained previously.
4. Save and publish the changes.
Prueba de que la referencia (Matt) se ha creado con éxito.

Una vez que John haya compartido los servicios con Matt, Matt hará clic en el enlace para compartir de John y aterrizará en su tienda. Matt buscará su producto, agregará algunos al carrito y finalmente pagará por los productos. Una vez que Matt haya completado una compra, se generará una nueva referencia en Genius Referrals. Para verificar si se ha creado la nueva referencia, vaya a la sección de su defensor sobre referencias Genius. Deberías poder ver a Matt en la list
Add and fill the fields of a new page in your Tilda store.

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: E001: I want referrals to sign up to my email subscriber list and reward promoters once the referral enters their email address.

In this scenario, we are assuming the following:
  1. 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.
  2. On your referral campaign, you are giving your customers $10 for each qualified referral. A qualified referral is a referral who completes a purchase.
  3. 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
  4. John refers 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
  5. 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
Lista de solicitudes de canje.

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 Tilda store

Testing that John receives a bonus after Matt has completed the sign-up process.

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 Tilda Referral Program

That's all.

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