Cevoid widgets

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, Cards and On-site widgets in the Help Center.

On Shopify, add widgets as blocks in the theme editor through the Cevoid Shopify app instead of pasting code. Use the snippets below on any other platform and in headless storefronts.

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

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

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

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.

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

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

• 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 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 you send to Cevoid.

• Embed UGC widgets

  Add the widget script and render gallery or card containers on a storefront.

• Dynamic galleries

  Show product, collection, category or brand galleries that follow the page.

• Embed the loyalty widget

  Load the autoloader and place loyalty sections by their section IDs.

• Customer authentication

  Sign members in to loyalty widgets with your own user system.

• Runtime helpers

  Refresh widgets on dynamic pages and react to their load state.

• Performance

  How the widgets load and what they mean for your site speed.

Use these when the core embed path is not enough.

• Advanced overview

  Optional paths for programmatic markets, CMS blocks and custom storefront logic.

• Programmatic market values

  Override URL-based market detection for multi-market, language, currency, staging and preview setups.

• CMS blocks

  Build a reusable CMS block for content teams to add Cevoid galleries and cards safely.