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.

View as Markdown

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.

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.

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:

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:

Card container

<div id="cevoid-container" data-card="CARD_ID"></div>

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

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:

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 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: galleries that follow the product, collection, category or brand of the page.
Market values: override URL-based market detection.
Runtime helpers: refresh widgets on dynamic pages and react to their load state.