> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cevoid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Galleries and Cards

> Add the Cevoid widget script and render UGC gallery or card containers on your site.

Use this page when you need the base embed code for Cevoid UGC galleries and cards. If you are building product, collection, category, or brand-aware galleries, start here and then continue to [Dynamic Galleries](./dynamic-galleries).

## Add the widget script

Add the Cevoid widget script once on pages where you render galleries or cards. You can place it in the `<head>`, before the closing `</body>` tag, or next to the widget container.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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 based on the container's data attributes.

## Add a gallery container

Use one container per widget.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID"></div>
```

## Add a card container

For cards, use `data-card` instead of `data-gallery`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-card="CARD_ID"></div>
```

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

<Note>
  You can copy the gallery ID, card ID, or full embed code from the widget's embed dialog in Cevoid.
</Note>

## Supported 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 default currency behavior. |
| `data-market-currency` | Sets the market used for price and currency display.                                    |
| `data-hide-prices`     | Hides product prices when set to `true`.                                                |

## Next steps

* Need contextual galleries: [Dynamic Galleries](./dynamic-galleries)
* Need market overrides: [Programmatic Market Values](./market-values)
* Need dynamic page refresh or load-state events: [Runtime Helpers](./runtime-helpers)
