Integrate Genius Referrals with Squarespace to Grow Sales and Customer Reach

Learn step-by-step how to integrate Squarespace with Genius Referrals. Follow our guide to add the necessary code snippets and customize your referral program on your Squarespace store.
Please Note: Squarespace Integration are only available on certain Genius plans. See our plans and pricing here.
Squarespace is user-friendly website-building software known for its sleek templates and drag-and-drop functionality. This makes it ideal for creating professional websites without coding knowledge.
Prerequisites
  1. Registration on the Platform: Sign up for Genius Referrals.
  2. Advocate Portal: Select and customize a template for your Genius Referrals program. This portal is for users and visitors.
  3. Active Store on Squarespace: You need an active store to add the code snippets for integration.
Step 1: Initiating the Squarespace Integration with Genius Referrals
To integrate the Genius Referrals program into your Squarespace store, you will need to insert three specific code snippets on different pages:

  • Code Snippet to embed the advocate portal template.
  • Tracking code snippets on the homepage to capture referrals.
  • The conversion code snippet is on the thank-you page after the purchase.
Refer to the following sections for detailed instructions and examples for each scenario in your store.
Step 2: Selecting the Code Snippet for Integration with Squarespace
Based on your website store's features, you should select the installation option for the program that best suits your needs: Embedded Code, Popup Window, or Floating Bubble. To view the details for each integration method, you can follow this path in the Genius Referrals platform: Program Setup > Integrations > Code Snippets > Installation.

There is a configuration section for the Popup Window and Floating Bubble options, where you can customize details such as style and positioning.
Installation options.
To generate the code snippet:
  1. Click on the desired option.
  2. Select the page you want to install.
  3. Copy the corresponding code snippet.
  4. Follow the instructions to install it in your store.
This process will provide you with the necessary code to install the Advocate Portal in Squarespace.
Embedded Code Example
To embed the referral program in Squarespace using the Embedded Code option, use the following code snippet:
<!-- 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 Example
To install the referral program in Squarespace using the Popup option, use the following code snippet:
<!-- 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 Example
To install the referral program in Squarespace using the Floating Bubble option, use the following code snippet:
<!-- 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 -->

Step 3: Installing the Advocate Portal in Squarespace

Follow these steps to integrate the Genius Referrals template into your Squarespace store:

  1. Log in to your Squarespace account using your credentials.
  2. Create a new page with a blank layout and name it Refer and Earn.
  3. Copy the code snippet from the previous step for the Advocate Portal.
  4. Navigate to the "Advanced" section within the Page Settings to customize the HTML code for your new page.
  5. Paste the copied code snippet from Step 2.
  6. Save all changes, then load the Refer and Earn page to see the template in action.

Step 4: Select Tracking and Conversion Scripts

  1. Go to the Integrations section in the Genius Referrals platform.
  2. Navigate to the Code Snippets subsection.
  3. Locate the Conversion Tracking section and click on Platform.
  4. Select Squarespace from the platform dropdown.
  5. Set the cookie expiration time, which determines how long the tracking cookie stays active in browsers to track your referrals (e.g., 180 days).
  6. Click the Next button to generate the code snippet and follow the installation instructions.
Obtain the Code Snippets for Tracking and Conversions
Step 5: Testing and Verification
Once the installation is complete, your referral program should be up and running. Your customers and visitors can access the program and refer your products or services.

  1. Verify Program Access: Ensure that customers can access the referral program.
  2. Check Referrals: Verify that referrals are successfully created in Genius Referrals.
  3. Bonuses: Confirm that advocates receive their bonuses once referrals complete purchases.
Scenario: Referring New Leads to the Squarespace Store

In this scenario:

  • You operate a Squarespace store specializing in t-shirt sales.
  • A referral program with Genius Referrals is established to facilitate customer and visitor referrals.
  • Your referral campaign offers customers $10 for each qualified referral who completes a purchase.
  • John Smith, one of your loyal customers, refers his friend Matt to your store for t-shirt purchases.
  • John receives a $10 bonus once Matt completes a purchase.
The subsequent image illustrates the flow of the referral program, which we will proceed to test:
Referral Program Workflow
Testing John's Ability to Share Products:
In order for John to successfully refer products, he must navigate to the referral program page and utilize the available referral tools.
  1. Access Referral Program Page: John should first access the referral program page within your Squarespace store. This can typically be found in the website navigation menu under the 'Refer and Earn' link.
  2. Utilize Referral Tools: Upon accessing the referral program page, John will find various tools available under the "Share" tab. These tools enable advocates like John to share your products with others.
  3. Share Personal URL with Matt: In this scenario, John will utilize one of the available referral tools, typically a personal URL, to share your products with his friend Matt. By sharing this unique URL, John provides Matt with direct access to your store's products, allowing him to browse and make a purchase.
By testing this aspect of the referral program, you ensure that advocates like John can effortlessly share your products with their network, maximizing the program's reach and effectiveness in driving referrals.
Enabling Customers to Refer Your Services Through Your Referral Program
Testing Referral Creation:
Once John has shared his referral link with Matt, the next step is to ensure that a new referral is successfully created for Matt in the Genius Referrals system.

  1. Matt's Interaction: Matt should click on John's referral link, which will direct him to your store's landing page dedicated to referrals.
  2. Browsing and Purchase: Matt will then proceed to browse your products, add items to his cart, and complete a purchase transaction.
  3. Referral Generation: Upon Matt's successful purchase, the Genius Referrals system should automatically generate a new referral entry for Matt.
  4. Verification: To confirm the referral was created, navigate to the Members section of the Genius Referrals platform. Here, you should find Matt listed as a new referral.
By conducting this test, you can ensure that the referral process is functioning correctly, allowing advocates like John to refer new customers like Matt to your store successfully.
Generating a new referral on your Squarespace store
Testing Bonus Allocation:
To ensure that the referral bonus system functions as intended, we need to verify whether the advocate, John, receives a bonus upon completing Matt's purchase.

  1. Purchase Completion: Once Matt completes a purchase and the order status is updated to "Payment accepted," the system should trigger the issuance of a bonus to John.
  2. Bonus Confirmation: Navigate to the Bonus section within the Genius Referrals platform to check whether John has received the $10 bonus as per the referral program terms.
By performing this test, you can confirm that advocates like John are duly rewarded for their successful referrals, fostering continued engagement and participation in the referral program.
Bonus Awarded to Advocate in the Squarespace Referral Program
Was this page helpful?
Español
LANGUAGE