ReferralCandy gives you the ability to host the Embedded Signup Widget directly on your website. 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 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.

On your ReferralCandy dashboard, go to Campaigns and click All Campaigns.
Select your active campaign and go to the Widgets page.
In the Embedded Signup section, find the snippet code block. Click Copy to copy the HTML/JavaScript code.
From your Shopify Admin page, go to Online Store and click Pages.
Click the page where you want to embed the widget. You can add the widget on any page that best suits your design. You can also add a new page to create a dedicated page for the signup widget.
Under Content, click the <> (Show HTML) button and paste the code snippet you copied from ReferralCandy. You can adjust the data-width and data height attribute as desired.
Click Save.

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

See what it looks like

(Optional Feature) Show the referral link without signing up

If your customers are logged into your Shopify store, you have the option to push dynamic variables to the widget:

data-email="{{customer.email}}"
data-fname="{{customer.first_name}}"
data-lname="{{customer.last_name}}"

When logged-in customers reach that page, they won't need to provide their email and name, because the system will automatically push those variables to the widget for them.

You could even place this on a page that only logged-in customers can reach if you'd prefer to keep the referral program restricted only to those with store accounts.

Other platforms

Adding the widget to any page

On your ReferralCandy dashboard, go to Campaigns and click All Campaigns.
Select your active campaign and go to the Widgets page.
In the Embedded Signup section, find the snippet code block. Click Copy to copy the HTML/JavaScript code.
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, or add a new page dedicated for the signup widget.

Adding the widget to your customer's account page

To implement this for your store, follow the same steps above, but paste the code snippet into your store's Customer Account Page. Add in the corresponding dynamic variables so that the widget automatically reflects 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 help? Click the chat widget on the right to start a conversation. Learn more