# Cevoid widgets

> How Cevoid widgets load on your storefront, the two snippet shapes for UGC and loyalty, and which guide to follow next.

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

Cevoid widgets show UGC galleries and cards and your loyalty program on your storefront. You design each widget in the Cevoid platform; your code only loads a script and marks where each widget goes. If you only need to configure widgets, see [Galleries](https://docs.cevoid.com/ugc/showcase/galleries.md), [Cards](https://docs.cevoid.com/ugc/showcase/cards.md) and [On-site widgets](https://docs.cevoid.com/loyalty/setup/on-site-widgets.md) in the Help Center.

On Shopify, add widgets as 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.

## Two snippet shapes

UGC widgets and the loyalty widget load differently, so they use different snippets. Both need a script once per page and one element per widget.

### UGC: script plus one container per widget

UGC widgets show content collected from customers, creators and your brand. The widget script mounts a gallery or card into every Cevoid container on the page.

```html title="UGC gallery"
<script type="module" src="https://gallery.cevoid.com/index.js" defer></script>

<div id="cevoid-container" data-gallery="GALLERY_ID"></div>
```

### Loyalty: autoloader plus one container per section

The autoloader is a small script that watches the page for Cevoid loyalty elements. When the first one appears, even if it is added after the page has loaded, the autoloader loads the loyalty widget script, which renders the loyalty elements on the page. Add the autoloader before the closing `</head>` tag, then add one element per section, or one for the full landing page.

```html title="Loyalty sections"
<script async src="https://autoloader.cevoid.com/autoloader.js" type="module"></script>

<div class="cevoid-widget" data-type="engage" data-section="hero" data-id="HERO_WIDGET_ID"></div>
<div class="cevoid-widget" data-type="engage" data-section="tier-progress" data-id="TIER_PROGRESS_WIDGET_ID"></div>
```

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

Each section is its own widget with its own ID. Copy each section's snippet, with its ID, from that widget's **Embed** dialog in Cevoid.

### How they differ

|  | UGC widgets | Loyalty widget |
| --- | --- | --- |
| Script | `gallery.cevoid.com/index.js` | `autoloader.cevoid.com/autoloader.js` |
| Element | `<div id="cevoid-container">` | `<div class="cevoid-widget" data-type="engage">` |
| Selects the widget with | `data-gallery` or `data-card` | `data-id`, plus `data-section` for a single section |
| Signed-in state | Not needed | A Shopify customer account, Cevoid email login or [custom customer authentication](https://docs.cevoid.com/developers/widget/customer-authentication.md) |

## Core concepts

- **Gallery:** shows several images or videos in one widget. Its content sources, layout and design are set in the Cevoid platform.
- **Card:** shows one selected image or video. Use a card to highlight a specific post instead of a dynamic set.
- **Markets:** decide a widget's language, prices, currency, currency formatting and product links. By default, Cevoid detects the market from the page URL, which works best when each market has a unique URL. If several markets share a URL, or visitors can switch language or currency without the URL changing, set [market values](https://docs.cevoid.com/developers/widget/market-values.md) in code.
- **Product catalogs:** connect product, collection, category, price and URL data to Cevoid. Dynamic product, collection and category galleries depend on identifiers that match the [product data](https://docs.cevoid.com/integrations/ecommerce/product-feeds.md) you send to Cevoid.

## Guides

- [Embed UGC widgets](https://docs.cevoid.com/developers/widget/embed.md): Add the widget script and render gallery or card containers on a storefront.
- [Dynamic galleries](https://docs.cevoid.com/developers/widget/dynamic-galleries.md): Show product, collection, category or brand galleries that follow the page.
- [Embed the loyalty widget](https://docs.cevoid.com/developers/widget/embed-loyalty.md): Load the autoloader and place loyalty sections by their section IDs.
- [Customer authentication](https://docs.cevoid.com/developers/widget/customer-authentication.md): Sign members in to loyalty widgets with your own user system.
- [Runtime helpers](https://docs.cevoid.com/developers/widget/runtime-helpers.md): Refresh widgets on dynamic pages and react to their load state.
- [Performance](https://docs.cevoid.com/developers/widget/performance.md): How the widgets load and what they mean for your site speed.

## Advanced

Use these when the core embed path is not enough.

- [Advanced overview](https://docs.cevoid.com/developers/widget/advanced.md): Optional paths for programmatic markets, CMS blocks and custom storefront logic.
- [Programmatic market values](https://docs.cevoid.com/developers/widget/market-values.md): Override URL-based market detection for multi-market, language, currency, staging and preview setups.
- [CMS blocks](https://docs.cevoid.com/developers/widget/cms-blocks.md): Build a reusable CMS block for content teams to add Cevoid galleries and cards safely.

**Recent changes**

No Widget changes yet.

[Open the changelog](https://docs.cevoid.com/developers/changelog.md)

## Related articles

- [Custom CSS](https://docs.cevoid.com/developers/widget/custom-css.md)
- [Using Cevoid galleries](https://docs.cevoid.com/developers/analytics-sdk/using-cevoid-galleries.md)

---

Canonical: https://docs.cevoid.com/developers/widget