# 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.

Breadcrumb: Widget › Embed the loyalty widget · Updated: 2026-10-18
Docs index: https://docs.cevoid.com/developers/llms.txt

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](https://docs.cevoid.com/integrations/ecommerce/shopify.md) 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](https://docs.cevoid.com/loyalty/setup/on-site-widgets.md).

## Add the autoloader

Paste the autoloader right before the closing `</head>` tag, once per page:

```html title="Autoloader"
<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:

```html title="Full landing page"
<div class="cevoid-widget" data-id="ew-3qGflV" data-type="engage"></div>
```

A single section adds `data-section`, the section's type:

```html title="Hero section"
<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](https://docs.cevoid.com/developers/widget/customer-authentication.md). 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.

```js title="Render new loyalty elements"
// 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](https://docs.cevoid.com/developers/widget/runtime-helpers.md) for the UGC side.

## Troubleshooting

- **Nothing renders:** check that the element has `data-type="engage"` and that the autoloader is on the page. Elements without `data-type` never load the loyalty script.
- **"Missing widget id":** add `data-id` with 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.

## Related articles

- [On-site widgets](https://docs.cevoid.com/loyalty/setup/on-site-widgets.md)
- [Custom customer authentication for program widgets](https://docs.cevoid.com/developers/widget/customer-authentication.md)
- [Cevoid widgets](https://docs.cevoid.com/developers/widget.md)

---

Canonical: https://docs.cevoid.com/developers/widget/embed-loyalty