What this article covers
This guide is for merchants on non-Shopify platforms who want to add ReferralCandy’s floating referral widget (also called the Referral Widget) to their website.
Before you proceed, take note that:
You may need a developer to assist you with this process.
Your platform must allow the insertion of an HTML or JavaScript snippet.
Steps may vary depending on the website builder/platform you’re using.
If you’re using Shopify instead:
Use our Shopify guide here: [Shopify] Using a floating referral widget (legacy “Referral Widget”)
Embedding the referral widget (Other platforms)
In your ReferralCandy dashboard, go to Campaigns.
Select your campaign.
Go to Widgets.
Scroll to Referral Widget.
Click Copy to copy the code snippet to your clipboard.
Note: The referral widget code includes the refcandy-poprocks script.
Paste the code just before the </body> tag on your store’s website (or in the 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: Your campaign must be Live for the referral widget to appear.
Customize the widget’s styling and text (Theme editor)
After the widget is installed on your site, you can edit how it looks and what it says in ReferralCandy’s Theme editor.
In your ReferralCandy dashboard, go to Campaigns.
Select the campaign you’re using.
Go to Theme (left sidebar).
At the top of the Theme editor preview, select Referral Widget.
Use the tabs on the left:
Branding (styling)
In the Branding tab, you can update styling that applies across your theme, such as:
Logo and banner
Primary color
Font
Primary sharing method
Content (text)
In the Content tab:
Click Edit All Text to edit the Referral Widget’s text fields (for example: minimized button label, header, input labels/subtitles, button label, and offer message).
Click Save when you’re done.
Note:
The Theme editor controls the widget’s styling and text.
The widget snippet you pasted into your site controls where the widget is loaded/displayed on your website.
Configuring the widget’s position (left/right) and overlap behavior
These changes are done by editing the same widget snippet you pasted into your site.
Switching the location (left vs right)
The widget appears in the lower-right corner by default.
To move it to the lower-left, set the data-location attribute to “left”.
Changing the stack order (z-index)
If your site has other sticky elements (cookie banners, chat bubbles, sticky footers), you can adjust the widget’s z-index (zIndex) to prevent elements from overlapping.
Example:
If you want a cookie/GDPR banner to appear on top of the widget, set the widget’s zIndex to a lower value.
If you’re unsure what to change, share a screenshot of the overlap and the snippet you pasted, and Support can point you to the exact setting to update.
Troubleshooting
If the widget doesn’t appear:
Confirm the campaign is Live.
Confirm the snippet is placed just before </body> (or your platform’s equivalent).
Try an incognito window (site caching can affect testing).
Confirm your platform allows third-party scripts to run (some builders restrict scripts depending on plan/settings).