What this article covers
This guide is for non-Shopify merchants who want to add ReferralCandy's floating referral widget (also called the Referral Widget) to their store.
Important:
This is a script-based widget — you install it by pasting a snippet into your store's website code (just before the closing
</body>tag, or in your platform's "footer" / "end of body" area).Your platform must allow you to insert custom HTML or JavaScript snippets. Steps may vary depending on the website builder/platform you're using.
You may need a developer to help you paste the snippet, since this involves editing your site's template/theme code.
Before you start
Your referral campaign should already be set up in ReferralCandy.
Your campaign needs to be Live for the widget to load — the widget won't appear on a stopped or draft campaign.
Add the floating referral widget to your storefront
In your ReferralCandy dashboard, go to Referral campaigns and open your campaign.
Under Promote campaign, click Widgets.
Find Referral widget and click Copy to copy the code snippet to your clipboard.
In your website builder/CMS, paste the snippet just before the closing
</body>tag (or in your platform's "footer" / "end of body" area, if that's what your platform calls it).Save/publish the changes.
Visit your site to confirm the widget is showing (it typically appears in the lower corner of the page).
Note: The snippet uses ReferralCandy's refcandy-poprocks script. Pasting it just before the closing </body> tag (or your platform's equivalent) typically makes the widget load across your storefront.
Configure the widget's position (left/right) and overlap behavior
By default, the widget appears in the lower-right corner.
To change the position, start the widget minimized, or fix overlap issues, you'll need to edit the widget snippet that you pasted into your site (the same snippet you copied from Widgets).
The snippet supports:
Moving it to the lower-left by setting
data-locationto"left"(default"right").Starting minimized by setting
data-minimizedto"yes"(default"no") — the widget shows as a small button until clicked.Adjusting z-index (
zIndex) if it overlaps (or sits behind) other sticky elements like cookie banners or chat bubbles.
If you're unsure what to change, share a screenshot (and the snippet you pasted) with our support team and we'll tell you exactly what to update.
Customize the widget's text and styling (ReferralCandy Theme editor)
Once the floating widget is installed on your site, you'll customize what it says (and how it looks) in ReferralCandy's Theme editor.
Open the Theme editor for the Referral Widget
In your ReferralCandy dashboard, go to Referral campaigns and open your campaign.
Under Customize campaign, click Themes.
On your active (selected) theme, click Customize to open the Theme editor.
In the Theme editor, expand Theme Assets → Entry, then click the Referral Widget card.
Edit the widget content
The left panel opens with Page Design by default. To edit per-section text and labels, click directly on the widget section you want to edit in the center preview — the left panel switches to show the editable fields for that section.
Use the Preview Options panel on the right to switch between widget states — Sign-up, Referral, Waitlist, Ineligible — and friend-offer variants (With offer / Without offer). Use the Desktop / Mobile toggle at the top of the preview to check each layout.
Available fields by section
Page Design (widget-level)
Primary Color — applies to buttons and interactive elements throughout the widget.
Sign-up Form (Sign-up screen — click on the form area)
Minimized button label (the small button shown when the widget is collapsed)
Header with offer (visible when "With offer" is selected) — supports a Reset to default option
Header without offer (visible when "Without offer" is selected) — supports a Reset to default option
Email field label and Email field subtitle
Name field label and Name field subtitle
Submit button label
Referral Page (Referral screen — click on the welcome/offer message area)
Welcome message
Offer message (single purchase) — supports a Reset to default option
Link copied alert (the toast shown when an advocate copies their referral link)
Social Sharing (Referral screen — click on the social share icons)
Social link preview instruction
To change the messages sent through each share channel (Facebook, X, WhatsApp, Telegram, Email, Messenger), edit them under the Social Media Messages section in the Theme editor (separate from the Referral Widget).
Status Messages (Waitlist and Ineligible screens — click on the message)
Waitlist welcome message, Waitlist offer message, and Waitlist button label
Ineligible welcome message and Ineligible offer message (no button on this screen)
Note:
The Theme editor controls the widget's text and styling.
The widget snippet you pasted into your site controls where the widget is loaded/displayed on your storefront.
Troubleshooting
If the widget doesn't appear:
Confirm your campaign is Live.
Confirm the snippet is placed just before the closing
</body>tag (or your platform's equivalent).Try an incognito window (site/script caching can affect testing).
Confirm your platform allows third-party scripts to run (some builders restrict scripts depending on plan/settings).