Skip to main content

Setting up an embedded signup page (Non-Shopify)

Add a join page on your site to get customers to sign up for your referral program

Adam avatar
Written by Adam
Updated this week

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.


Copy the widget code snippet

ReferralCandy app on Shopify

With Shopify 2.0, apps are no longer advised to use script-based widgets. Shopify merchants are encouraged to use the join block as an alternative for the embedded signup page.

Note: The join block is compatible only with Online Store 2.0 themes. This widget doesn't support vintage themes and may not work on custom themes.

Other platforms

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

Note: Your campaign must be set to Live for the embedded signup widget to appear. Learn more

  1. On the ReferralCandy dashboard, go to Campaigns > Select your campaign.

  2. Go to Widgets.

  3. In the Embedded Signup section, Copy the iframe code snippet. The embedded signup widget contains the refcandy-candyjar script.

  4. Insert the code 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 (Non-Shopify)

Below are the attributes you can add or 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.

    • 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


Did this answer your question?