INSTALLING YOUR REFERRAL PROGRAM ON WOOCOMMERCE

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

Who should read this tutorial?

Your Woocommerce 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 (prospects, agents, affiliates, influencers, etc.).
  2. A shop on Woocommerce.
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 Woocommerce 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 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 Woocommerce 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 Woocommerce 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 Pages tab and the necessary code is added as shown in the image.

Adding the Advocate's Portal template to your store

Installing your refer and earn program on your Woocommerce with Genius Referrals code snippets.
Once the code is ready, you will need to click on the Visual tab of the Woocommerce editor and then go back to the Text tab and you will see how it finally formats the code.
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
Final code snippet on your Woocommerce referral program
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 Woocommerce 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 Woocommerce 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": "{customer_first_name}",
     "grCustomerLastname": "{customer_last_name}",
     "grCustomerEmail": "{customer_email}",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "Order Number: {order_number}",
     "grPaymentAmount" : "{dollars_spent_order}"
};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 Woocommerce store.

In this scenario, we are assuming the following:
  1. You have a Woocommerce 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 Woocommerce 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 Woocommerce Referral Program

That's all.

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