# Embed UGC galleries and cards

> Add the Cevoid widget script to your storefront and render UGC galleries and cards with one container element per widget.

Breadcrumb: Widget › Embed UGC widgets · Updated: 2026-10-17
Docs index: https://docs.cevoid.com/developers/llms.txt

This page gives you the base embed code for Cevoid UGC galleries and cards. To show galleries that follow the product, collection, category or brand of the page, start here and continue with [Dynamic galleries](https://docs.cevoid.com/developers/widget/dynamic-galleries.md).

## Add the widget script

Add the widget script once on every page that shows a gallery or card. It can go in the `<head>`, before the closing `</body>` tag or next to the widget container.

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

The script looks for elements with `id="cevoid-container"` and mounts a gallery or card in each, based on the element's data attributes.

## Add a gallery container

Use one container per widget:

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

## Add a card container

For a card, use `data-card` instead of `data-gallery`:

```html title="Card container"
<div id="cevoid-container" data-card="CARD_ID"></div>
```

A container should render either a gallery or a card, not both.

> [!NOTE]
> Copy the gallery ID, the card ID or the complete embed code from the widget's **Embed** dialog in Cevoid.

## Put it together

A product page with a dynamic product gallery in the main column and a card in the sidebar:

```html title="product.html"
<!doctype html>
<html lang="en">
  <head>
    <script type="module" src="https://gallery.cevoid.com/index.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Trail runner</h1>
      <div id="cevoid-container" data-gallery="GALLERY_ID" data-product="auto"></div>
    </main>
    <aside>
      <h2>Seen on Instagram</h2>
      <div id="cevoid-container" data-card="CARD_ID"></div>
    </aside>
  </body>
</html>
```

`data-product="auto"` filters the gallery to the product on the current page. See [Dynamic galleries](https://docs.cevoid.com/developers/widget/dynamic-galleries.md) for how Cevoid matches the page to a product.

## Container attributes

| Attribute | Use |
| --- | --- |
| `data-gallery` | Renders a gallery by gallery ID. |
| `data-card` | Renders a card by card ID. |
| `data-post` | Renders a single post when you have a post-specific embed. |
| `data-product` | Filters a dynamic gallery by product. Use `auto` or a product ID. |
| `data-collection` | Filters a dynamic gallery by collection. Use `auto` or a collection identifier. |
| `data-category` | Filters a dynamic gallery by category. Use `auto` or a category identifier. |
| `data-brand` | Filters a dynamic gallery by brand. Use `auto` or a brand slug. |
| `data-country` | Overrides country detection when needed. |
| `data-market` | Sets the Cevoid market used for language, product links and the default currency. |
| `data-market-currency` | Sets the market used for prices and currency display. |
| `data-hide-prices` | Hides product prices when set to `true`. |

## Next steps

- [Dynamic galleries](https://docs.cevoid.com/developers/widget/dynamic-galleries.md): galleries that follow the product, collection, category or brand of the page.
- [Market values](https://docs.cevoid.com/developers/widget/market-values.md): override URL-based market detection.
- [Runtime helpers](https://docs.cevoid.com/developers/widget/runtime-helpers.md): refresh widgets on dynamic pages and react to their load state.

---

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