ReferralCandy gives you the ability to host the embedded signup page directly on your website. The embedded signup page widget allows you to:
Embed an iframe for the signup widget into a page on your website.
Embed a personal sharing widget to your customer’s account page.
See a live sample of this widget here.
Note: Your referral campaign must be set to Live for the embedded signup widget to appear. Learn more
Copy the widget code snippet
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.
On the dashboard, go to Campaigns > Select your campaign.
Go to Widgets.
In the Embedded Signup section, click Copy to copy the iframe code snippet to your clipboard. The embedded signup widget contains the
refcandy-candyjarscript.
Embed the widget in your store
Shopify
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 on your site. 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-widthanddata heightattributes as desired.
Click Save.
Your customers can now join your referral program via the embedded form on your page.
Show the referral link without signing up (Optional)
Show the referral link without signing up (Optional)
If your customers are logged into your Shopify store, you have the option to push attributes (dynamic variables) to the widget. View attributes
When logged-in customers reach that page, they won't need to provide their email and name. 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 access if you want to restrict your referral program only to those with store accounts.
Note: Using customer-specific dynamic variables such as name and email address may or may not work depending on your Shopify theme or your page builder app.
Other platforms
For other platforms, just 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 anywhere on your site, or add a new page dedicated for the signup widget.
Add the widget to your customer's account page
To implement this for your store, paste the code snippet into your store's Customer Account Page. Add in the corresponding attributes so that the widget automatically reflects the customer's referral sharing options. View attributes
Use widget attributes
Below are the attributes you can add or change:
Note: (Shopify) Using customer-specific dynamic variables such as name and email address may or may not work depending on your Shopify theme or your page builder app.
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.
Shopify:
data-email="{{customer.email}}"
data-fname: (only if data-email is specified) First name of customer (e.g. data-fname="John")
Shopify:
data-fname="{{customer.first_name}}"
data-lname: (only if data-email is specified) Last name of customer (e.g. data-lname="Smith")
Shopify:
data-lname="{{customer.last_name}}"
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”)
If you use 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