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

# Runtime Helpers

> Refresh Cevoid UGC widgets and react to gallery or card load state on dynamic pages.

Use runtime helpers when your storefront changes widget containers after the initial page load, or when your code needs to react to widget load state.

## Refresh widgets on dynamic pages

The script mounts widgets when it loads. If your site adds or changes Cevoid containers after the initial page load, call `window.cevoid.reloadAll()` after updating the DOM.

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
if (window.cevoid?.reloadAll) {
  window.cevoid.reloadAll();
}
```

Use this for single-page apps, AJAX-loaded sections, product variant changes, and CMS tabs that reveal widget containers after load.

## Check widget load state

Cevoid exposes gallery and card load state on `window.cevoid`.

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const galleryId = "GALLERY_ID";

if (window.cevoid?.galleries?.[galleryId]?.hasContent) {
  console.log("Gallery has content.");
} else {
  console.log("Gallery has not loaded or has no content.");
}
```

Cards use the same pattern under `window.cevoid.cards`.

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const cardId = "CARD_ID";

if (window.cevoid?.cards?.[cardId]?.hasContent) {
  console.log("Card has content.");
}
```

This is useful when you want to hide a section if a dynamic gallery has no posts.

## Listen for widget load events

Use widget load events when your code needs to react as soon as a gallery or card finishes loading.

### Gallery loaded

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
window.addEventListener("cevoid-gallery-loaded", (event) => {
  const galleryId = event.detail.gallery;
  const numberOfPosts = event.detail.numberOfPosts;

  if (numberOfPosts > 0) {
    console.log(`Gallery ${galleryId} has content.`);
  } else {
    console.log(`Gallery ${galleryId} has no content.`);
  }
});
```

### Card loaded

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
window.addEventListener("cevoid-card-loaded", (event) => {
  const cardId = event.detail.card;

  console.log(`Card ${cardId} has loaded.`);
});
```

Set up event listeners before loading dynamic widgets when possible, especially if your script needs to react to the first widget load.

## Related

* [Embed Galleries and Cards](./embed)
* [CMS Blocks](./cms-blocks)
* [Using Cevoid Galleries](../analytics/using-cevoid-galleries)