ReferralCandy

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


The Embedded Signup widget allows you to:


  • Embed a signup widget to a page in your website dedicated to your referral program
  • Embed a personal sharing widget to your customer’s account page


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



For Shopify Merchants


Adding the widget to any page


You can embed a signup page to any existing page or a dedicated page for your referral program. This is a great way to encourage your customers to join your referral program and get more advocates for your store. 


Once you have the page set up, simply follow the steps below.


  1. Go to the Widgets section of the ReferralCandy dashboard.

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

  3. Copy the HTML/JavaScript snippet



4. From the Shopify Admin page, go to Online Store and click on Pages

5. Click on the page where you want to embed the signup widget. You can add the widget on any page that will best suit your design. 

6. Under Content, click on the Show HTML button and paste the code snippet from the ReferralCandy dashboard. You can adjust the data-width and data height attribute based on your page design. 

7. Click Save.


That’s it! Your customers can now join your campaign and start referring their friends!




Adding the widget to your customer’s account page


Make it easy for your customers to share their referral links by embedding a sharing panel on their account page. This sharing panel is visible to them once they log in. 


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 → Click Action on the current theme →Edit code customers/account.liquid


The following dynamic values can be used: 


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

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

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


  You’re done! Your customers can now easily share their referral links from their account pages.








For merchants on other platforms


Adding the widget to any page


  1. Go to the Widgets section of the ReferralCandy 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)



Adding the widget to your customer's account page


To implement this for your store, please follow these steps:


  1. Go to the Widgets section of the ReferralCandy dashboard.

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

  3. Copy the HTML/JavaScript snippet

  4. Paste the widget into your store's 'Customer Account Page' and add in the corresponding dynamic variables so that the widget will automatically reflect the customer's referral sharing options. 


Below are the attributes you can add/change


  • 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.




Need to customize the language of this widget? Learn more about How to customize the language of the Embedded Signup Widget



Did you find it helpful? Yes No

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