ReferralCandy

ReferralCandy gives you the ability to host the Embedded Signup Widget directly on your website. This guide will help walk you through how to set this up.


The Embedded Signup widget will allow you to:

  • Embed a signup widget directly on your website (domain) for your referral program, or

  • Embed a personal sharing widget for each customer on their own user account page in your store


Note: Your referral campaign must be Active in order for the Embedded Sharing Panel widget to appear. When your campaign is "Stopped", the Embedded Sharing Panel will show a transparent panel instead (i.e nothing will be shown).


How to set up 

  1. Go to the Widgets section of your dashboard

  2. In the 'Embedded Signup' section, click on ‘Add Code Snippet’

  3. Copy the HTML/JavaScript snippet


  4. Insert the Code Snippet into your store's page by pasting it just before the HTML </body> tag (you also have the option to place it somewhere that best suits your design)


You’re done! Here's a sample preview of what a customer sees when he or she goes to an online store’s Refer-a-Friend page


How to customize your sharing panel by changing / adding attributes of the iframe:

  • data-height: Height of the sharing panel in pixels or percentage

  • data-width: Width of the sharing panel in pixels or percentage (Note: use 100% if you want the panel to be responsive to the width of the browser e.g. for mobile)

  • data-email: Specify this attribute (e.g. data-email="john@example.com") to display the sharing panel for a specific customer. Leave this attribute out to display a view similar to your Advocate Join Page. 

  • data-fname: (only if data-email is specified) First name of customer (e.g. data-fname="John") 

  • data-lname: (only if data-email is specified) Last name of customer (e.g. data-lname="Smith")

  • data-locale: (only for accounts with multiple languages) Specify this attribute to display the widget using the correct theme based on locale (e.g. data-locale=”fr”)

 

Note: If you are using the data-email, data-fname, or data-lname attributes, be sure to generate the values dynamically to match the customer logged in to your store.


Are you using Shopify?

Shopify store owners need to insert the code at the bottom of the customer/account.liquid page, which can be found in a Shopify account at:

 

Online Store → Themes → Customize Theme → Theme Options → Edit HTML/CSS → customers/account.liquid

 

The following dynamic values can be used: 

  • data-email="{{order.email}}" 

  • data-fname="{{order.customer.first_name}}" 

  • data-lname="{{order.customer.last_name}}"

J
Jason is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.