Integrate Genius Referrals with Adobe Commerce (Magento) to Grow Your Referral Program

Discover how to integrate Genius Referrals with your Adobe Commerce store to enhance your referral program. This step-by-step guide will help you set up the integration, allowing your customers to recommend your store and earn rewards.

Magento, now known as Adobe Commerce, is an open-source e-commerce platform that allows you to create and manage online stores with high customization and scalability. It offers advanced features for product management, payments, inventory, and marketing tools. It is ideal for businesses of any size and supports multiple languages and currencies.
Requirements
Requirements
Before you begin integrating Genius Referrals with your Adobe Commerce store, ensure you have the following:
  • Genius Referrals Account: Sign up and register on the Genius Referrals platform.
  • Advocates Portal Setup: Select and customize a template for your referral program’s portal. This portal is tailored for customers, promoters, affiliates, and influencers to easily share your store.
  • Active Adobe Commerce Store: Ensure you have an active Adobe Commerce store. You’ll need to add integration code snippets to enable the referral program.

Step 1: Start Integrating Adobe Commerce with Genius Referrals

To integrate Genius Referrals into your Adobe Commerce store, follow these steps to add three code snippets to the relevant pages:

  1. Install the Advocates Portal Template: Add the required code snippet to activate the advocate portal template and ensure your customers can access their referral dashboard.
  2. Add the Tracking Code: Insert the tracking code snippet on your homepage to track referrals from when customers enter your store.
  3. Implement the Conversion Code: Place the conversion code snippet on the thank-you page shown after a purchase. This will enable you to record conversions generated by referrals.

Step 2: Choose the program installation type

Select the Genius Referrals program installation type that best suits your online store: Embedded Code, Pop-up Window, or Floating Widget. To review the details of each option and obtain the correct code, follow this path in the Genius Referrals platform: Set Up Program > Integrations > Code Snippets > Installation.
If you choose the Pop-up Window or Floating Widget, you can access an additional configuration section to customize settings such as style and placement on your site.
Embedded Code: This option generates a code snippet that you can easily integrate into your website’s HTML. The embedded code allows you to seamlessly display the referral program directly within your site’s content, providing a cohesive user experience. It ensures that visitors can access the program without any interruptions, making it an effective way to encourage participation in your referral initiative.
Embedded Code Example
To install the referral program in Adobe Commerce using the Embedded Code option, 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 -->
Modal Window: Choosing this option generates a code snippet tailored to display the referral program in a modal window on your website. This method provides a sleek and concise way to present the program to your visitors.
Modal Window Example
To install the referral program in Adobe Commerce using the Pop-up option, please use the code snippet below:
<!-- 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: Selecting the Floating Bubble option generates a code snippet that adds a small floating button or badge to your website. When clicked, it reveals a window or panel showcasing the referral program. This option enhances visibility while minimizing space usage on your pages.
Floating Bubble Example
To install the referral program in Adobe Commerce using the Floating Bubble option, please use the code snippet below:
<!-- 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: Install the Advocate Portal on Your Adobe Commerce Store

Follow these steps to add the advocate's portal template to your store using the Embedded Code method:

  1. Create a new page in your Adobe Commerce store called "Refer and Earn.
  2. Select the HTML code block for editing the new page, then copy the code snippet you obtained in the previous step and paste it in.
  3. Save your changes and preview the "Refer and Earn" page to see the template in action.
Referral Program Template in Your Magento Store.

Step 4: Select Tracking and Conversion Scripts

  1. Go to the Integrations section in Genius Referrals.
  2. Select the Code Snippets option.
  3. Under Conversion Tracking, choose Platform and select Magento.
  4. Set the cookie expiration time (e.g., 180 days).
  5. Click Next to generate the code.
  6. Follow the provided instructions to complete the setup.
Fragmento de código para seguimiento 1
<!-- 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 -->
Fragmento de código para conversión 2
<!-- 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
Once the installation is complete, your referral program will be ready to operate seamlessly, enabling your customers and visitors to join and recommend your products.


Here’s a quick checklist to ensure everything is functioning correctly:
  • Verify Program Access: Ensure that customers can easily access the referral program.
  • Confirm Referral Creation: Check that referrals are being successfully generated and tracked in Genius Referrals.
  • Validate Bonuses: Make sure advocates are receiving the correct bonuses once their referrals complete the required actions.
Following these steps will help guarantee your program runs smoothly and delivers the desired results.
Scenario: Referring New Prospects to Adobe Commerce Store
Assumptions:

  • You operate an Adobe Commerce store specializing in T-shirts.
  • Your store has an active referral program through Genius Referrals.
  • Customers earn a $10 reward for each qualified referral that leads to a purchase.
  • John Smith, one of your loyal customers, refers his friend Matt to your store.
  • As a result, John receives a $10 bonus once Matt completes a purchase.
Referral Program Workflow
Testing John’s Ability to Share Products
For John to refer products, he needs to access the Advocate Portal page and use the tools under the Share tab. Here, John can choose from all available options to share his personal URL. In this scenario, John sends Matt his personal referral link so that Matt can review the products and potentially become a customer.
Enabling Customers to Refer Products in Your Referral Program
Verifying Referral Creation Success
After John shares his personal link, Matt will click on it and arrive at your store. Once Matt completes a purchase, a new referral will be generated in Genius Referrals. To confirm the referral was created correctly, go to the Members section, where you should see Matt listed.
Verify John's Referral Bonus
Now, we need to verify that the advocate, John, receives his bonus once the referral, Matt, completes a purchase. After Matt completes a purchase, John should receive a $10 bonus. To verify if the bonus was awarded to the advocate, go to the Bonus section. You should see John's new bonus listed on this page.
Advocate Bonus Awarded
Was this page helpful?
Español
LANGUAGE