Embed the loyalty widget
Load the loyalty autoloader once per page and place the full landing page or single sections by their widget IDs and section types.
The loyalty widget shows your loyalty program on your storefront: a full landing page, or single sections such as a hero or a tier progress bar. Your code loads the autoloader once per page and adds one element per widget; the content and design come from Cevoid.
On Shopify, add the loyalty blocks in the theme editor through the Cevoid Shopify app instead of pasting code. Use the snippets below on any other platform and in headless storefronts.
Prerequisites
- Loyalty is part of your workspace's plan. Without it, the widget does not load.
- The widgets you want to show exist in Loyalty → On-site widgets. To set them up, see On-site widgets.
Add the autoloader
Paste the autoloader right before the closing </head> tag, once per page:
<script async src="https://autoloader.cevoid.com/autoloader.js" type="module"></script>The autoloader looks for loyalty elements on the page. When it finds the first one, it loads the loyalty widget script once, and that script renders every loyalty element on the page.
Add a widget
Each widget has its own ID. Copy its element from the widget's Embed dialog: go to Loyalty → On-site widgets, open the widget and choose Embed. The dialog shows the autoloader too.
The full landing page is one element:
<div class="cevoid-widget" data-id="ew-3qGflV" data-type="engage"></div>A single section adds data-section, the section's type:
<div class="cevoid-widget" data-id="ew-8kPq2d" data-section="hero" data-type="engage"></div>| Attribute | Required | What it does |
|---|---|---|
class="cevoid-widget" | Yes | Marks a Cevoid loyalty element. |
data-type="engage" | Yes | The autoloader loads the loyalty script only for elements with it. |
data-id | Yes | The widget's ID from its Embed dialog. Without it, the element shows "Missing widget id". |
data-section | For a section | Renders only that section of the widget. |
To sign members in with your own user system, add data-tracking-id, data-user-id, data-user-email and data-digest as described in Customer authentication. Without them, members sign in with a Shopify customer account or with Cevoid's email login, depending on your loyalty settings.
Section types
data-section | Section | Shows |
|---|---|---|
hero | Hero | A hero image with a call to action to join your program |
about | About | What your program is and how it works |
account-summary | Account summary | The member's main information, tier, points and rewards |
my-account | My account | The member's account information |
my-rewards | My rewards | A grid of the rewards the member has earned |
purchase-incentives | Purchase incentives | The active purchase incentives |
activities | Activities | Every activity a member can take part in |
redeemable-rewards | Redeemable rewards | The rewards a member can buy with points |
tiers | Tier cards | Your live tiers as cards |
tier-progress | Tier progress | The member's progress through the tiers as a bar |
faq | FAQ | Your frequently asked questions |
Place as many elements on a page as you need; each one renders on its own.
Markets and language
Elements have no market or language attribute. Cevoid picks the market from the page URL: the market whose domain matches the URL best, else your default market. On Shopify, the storefront's country decides between markets that share a domain. The widget then uses that market's language and currency.
Elements added after the page has loaded
- Before the loyalty script has loaded: when your app adds the first loyalty element later, for example after a client-side route change, the autoloader notices it and loads the script, which renders every loyalty element on the page at that moment. The autoloader only sees an element that is itself added to the page, not one inside a container you add.
- After the loyalty script has loaded: new elements are not rendered on their own. Call
window.cevoid.reloadAll()after adding them; it renders every loyalty element on the page again.
// After your router has put the new page's loyalty elements in the DOM:
window.cevoid?.reloadAll()The loyalty script sets window.cevoid to an object with reloadAll only, replacing what the UGC widget script put there. On a page with both scripts, the one that loads last owns window.cevoid, so call reloadAll there with care: see Runtime helpers for the UGC side.
Troubleshooting
- Nothing renders: check that the element has
data-type="engage"and that the autoloader is on the page. Elements withoutdata-typenever load the loyalty script. - "Missing widget id": add
data-idwith the ID from the widget's Embed dialog. - An element added by your app stays empty: call
window.cevoid.reloadAll()after adding it. - Wrong language or currency: the page URL matched another market. Check the domains of your markets in Cevoid.