Integrate Genius Referrals with Your OpenCart Store

Learn how to seamlessly integrate Genius Referrals with your OpenCart store to unlock the full potential of your referral program. This step-by-step guide helps you set up referrals, track recommendations, manage rewards, and boost customer loyalty, driving more sales effortlessly.

OpenCart is an open-source eCommerce platform for creating and managing online stores. It features a user-friendly interface, extensive customization through extensions and themes, and tools for managing products, payments, and shipping.
Prerequisites
  • Register on Genius Referrals: Create an account to get started.
  • Customize your Advocate Portal: Choose and personalize a referral program template tailored to customers, affiliates, employees, and influencers.
  • Active OpenCart store: Ensure your OpenCart store is live and ready for integration.

Step 1: Initiating OpenCart Integration with Genius Referrals

  1. Install the Advocate Portal Template: Insert the necessary code snippet to activate the Advocate Portal template. This allows your customers to access their referral dashboard seamlessly.
  2. Install the Tracking Code: Place the tracking code snippet on your header to monitor referral activity when they visit your store.
  3. Install the Conversion Code: Add the conversion code snippet to your order confirmation page. This ensures you can track and manage conversions generated through referrals after a purchase is completed.

Step 2: Choosing the Integration Code Snippet for OpenCart

In this step, choose the Genius Referrals installation method that best suits your online store: Embedded Code, Pop-up Window, or Floating Bubble. To access the details of each option and retrieve the appropriate code snippet, navigate to Program Setup > Integrations > Code Snippets > Installation in the Genius Referrals platform.

For the Pop-up Window or Floating Bubble options, you'll also have access to a configuration section where you can further customize elements like style and placement on your website.
Integration Options for Your Referral Program with Third-Party Platforms
Embedded Code
To install the referral program using the Embedded Code option, please use the following code snippet:
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-genius-magpie-template-73">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "your-advocate-portal",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.1.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 -->
Pop-up Window
To install the referral program using the Pop-up Window option, please use the following code snippet:
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-genius-magpie-template-73">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "your-advocate-portal",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"modal"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.1.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
To install the referral program using the Floating Bubble option, please use the following code snippet:
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-genius-magpie-template-73">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "your-advocate-portal",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"bubble"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.1.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 -->

Step 3: Embed the Advocate Portal Template to Your OpenCart Store

Follow these steps to add the Genius Referrals template to your store:

  1. Log in to your OpenCart admin panel.
  2. Navigate to the Catalog section and select Pages.
  3. Click on the Add New button and name the page Refer and Earn.
  4. Open the new Refer and Earn page in the editor.
  5. Insert the code snippet obtained in the previous step into the appropriate field.
  6. Save all changes made to the page.
  7. Load the Refer and Earn page from the front end of your OpenCart store.
  8. Verify that the Genius Referrals template displays correctly.
Your Referral Program Template in Your OpenCart Store


Step 4: Select Tracking and Conversion Scripts

  1. Go to the Integrations section in Genius Referrals.
  2. Choose the Code Snippets option.
  3. Under Conversion Tracking, select Platform and choose OpenCart.
  4. Specify the cookie expiration time (e.g., 180 days).
  5. Click Next to generate the code.
  6. Follow the provided instructions to complete the setup.
Tracking Code Snippet
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     grCookieLifeTime:"180"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.2.min.js",e.onload=function(){GRToolbox.catchReferrer(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
Conversion Code Snippet
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referrals-landing-page-748",
     "grCustomerFirstname":"{$customer.firstname}",
     "grCustomerLastname":"{$customer.lastname}",
     "grCustomerEmail":"{$customer.email}",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" :"Order Number {$id_order}",
     "grPaymentAmount" :"{$total}"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.2.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(grSetting).then(e=>{})};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
Step 5: Testing and Verification
After completing the installation, your referral program should be fully operational. Customers and visitors should be able to access it and recommend your services.

  • Verify Program Access: Ensure customers can access the referral program without issues.
  • Check Referrals: Confirm that referrals are successfully created in Genius Referrals.
  • Bonuses: Ensure that advocates receive their bonuses once the referrals complete a purchase.
Scenario: Referring New Leads to an OpenCart Store

Assumptions:

  • You operate an OpenCart store specializing in T-shirts.
  • Your store has a referral program implemented through Genius Referrals.
  • Customers receive a $10 reward for each qualified referral that results in a purchase.
In this scenario, one of your loyal customers, John Smith, refers his friend Matt to your store. As a result, John earns a $10 bonus once Matt completes a purchase.
Referral Program Flow
Testing John's Ability to Share Products
For John to refer products, he needs to visit the Advocate Portal and utilize the tools in the Share tab. John will have access to all available sharing options. In this scenario, he sends Matt his personal link so Matt can browse the products and make a purchase.
Allow customers to refer their products in your referral program
Verifying Successful Referral Creation
Once John shares his personal link, Matt clicks on it and arrives at your website. After Matt completes a purchase, a new referral will be generated in Genius Referrals. To ensure the referral has been successfully created, go to the Members section, where you should find Matt listed.
Generating a New Referral
Verifying John's Bonus
Now, let's check that John, the advocate, receives his bonus after Matt completes his purchase. Once Matt finalizes his order, John should receive a $10 bonus. To confirm that the bonus has been awarded, go to the Bonuses section. You should see John's new bonus listed there.
Bonificación otorgada al promotor en el programa de referencia.
Was this page helpful?
Español
LANGUAGE