---
title: Display Size Charts with Custom JavaScript
description: "For the normal popup workflow, use the app’s built-in trigger. The following is an advanced custom integration example for a theme developer, who can listen for `prikid_content_ready` and use the returned HTML in a custom storefront presentation. This is a…"
url: "https://prikid.app/docs/can-i-use-a-custom-script-to-display-size-charts-any-api/"
updated: "2026-10-14"
category: Advanced and Legacy
---

# Display Size Charts with Custom JavaScript

For the normal popup workflow, use the app’s built-in trigger. The following is an advanced custom integration example for a theme developer, who can listen for `prikid_content_ready` and use the returned HTML in a custom storefront presentation. This is a browser event from the installed widget, not a public REST API or an installation method for an unsupported storefront.

## Event scope, timing and payload

In the current widget, this event is dispatched on `document` when a modal is initialized, after its HTML has been prepared. It can come from a size-chart popup or a general popup. Opening the popup is not required. An item displayed only by direct inline injection does not use this event path.

Register your listener **before the PRIKID widget runs**; an event that has already fired is not replayed. The payload has `content` (prepared HTML), `id` and `cssClasses`. The standard size-chart modal currently does not supply an item ID; general popups do. Do not assume an ID is always populated, or that one event identifies one individual chart. A standard chart popup can contain combined matching content.

```
document.addEventListener('prikid_content_ready', (event) => {
  const detail = event.detail;
  if (!detail || typeof detail.content !== 'string') return;
  const htmlContent = detail.content;
  // Render only content you manage and trust in PRIKID.APP.
});
```

A page can initialize several modals or initialize them again. Filter the events needed by your integration and reuse existing controls. Quick view, dynamically replaced products and general popups need their own assessment. For ordinary inline placement, use [Display a Size Chart Directly on a Product Page](https://prikid.app/docs/how-to-inject-a-size-chart-into-a-product-page-content-directly/).

## Example: one custom size-guide dialog

This example adds one **Open Size Guide** button and a right-side native dialog for a standard product-page chart popup. The background color is `#f1f1f1`. It includes a Close button, Escape support and focus restoration, and updates the same dialog after repeated chart events. The app’s original trigger remains available.

Use this for simple text/image content in a browser that supports `HTMLDialogElement.showModal()`. It does not reproduce PRIKID’s table-conversion controls, iframe resizing or every interactive block. The current missing-ID check distinguishes the standard chart path from identified general popups; it is an implementation detail, not a stable chart-ID API. Have a theme developer adapt and test it for your storefront.

```
<script>
(() => {
  if (window.prikidCustomGuideInstalled) return;
  window.prikidCustomGuideInstalled = true;

  // This example is for one standard size-chart popup per product page.
  // Install it before PRIKID runs. Do not use it for quick view or general popups.
  let latestContent = '';
  let button, dialog, content;

  function renderContent() {
    content.innerHTML = latestContent;
    // Avoid duplicating the widget's own generated modal-container ID.
    const wrapper = content.querySelector('#prikid_size_chart_modal_container');
    if (wrapper) wrapper.removeAttribute('id');
  }

  function mount() {
    if (dialog || !document.body || !latestContent) return;
    button = document.createElement('button');
    button.type = 'button';
    button.textContent = 'Open Size Guide';
    button.className = 'button';
    button.setAttribute('aria-haspopup', 'dialog');
    button.setAttribute('aria-controls', 'prikid-custom-guide');

    dialog = document.createElement('dialog');
    dialog.id = 'prikid-custom-guide';
    dialog.setAttribute('aria-label', 'Size guide');
    dialog.style.cssText = 'box-sizing:border-box;position:fixed;' +
      'inset:0 0 0 auto;margin:0;width:28rem;max-width:100%;' +
      'height:100dvh;max-height:100dvh;padding:1rem;border:0;' +
      'overflow:auto;background-color:#f1f1f1;';

    const close = document.createElement('button');
    close.type = 'button';
    close.textContent = 'Close size guide';
    content = document.createElement('div');
    renderContent();
    dialog.append(close, content);
    document.body.append(button, dialog);

    button.addEventListener('click', () => {
      if (!dialog.open) dialog.showModal();
    });
    close.addEventListener('click', () => dialog.close());
    // Native dialog supports Escape and keeps keyboard focus inside the modal.
    dialog.addEventListener('close', () => button.focus());
  }

  document.addEventListener('prikid_content_ready', (event) => {
    const detail = event.detail;
    if (!detail || typeof detail.content !== 'string' || !detail.content) return;
    // Current general popups have an ID; the standard chart modal does not.
    // This is an implementation detail, not a stable item-identification API.
    if (detail.id != null) return;
    latestContent = detail.content;
    if (content) renderContent();
    mount(); // Repeated events update the same controls instead of duplicating them.
  });
  document.addEventListener('DOMContentLoaded', mount, { once: true });
})();
</script>
```

1. Add the script to your storefront’s supported custom-script area, before PRIKID initializes. Keep one copy. If using a raw JavaScript file, omit the surrounding `<script>` tags.
2. Test on a product with a published matching chart in popup mode. Reload after installation; adding a listener later cannot recover an earlier event.
3. Open the custom button with mouse/touch and keyboard. Check Close, Escape, returned focus, narrow-screen scrolling, images and links. Repeated events should leave only one custom button/dialog.
4. Keep the original app trigger until the replacement has passed your theme’s accessibility and interaction checks. Do not hide it in an invisible placeholder as a shortcut.

## Next steps and related guides

- [Display a chart directly on the page](https://prikid.app/docs/how-to-inject-a-size-chart-into-a-product-page-content-directly/)
- [Open a technical support ticket](https://support.prikid.app/new-ticket)

Still need help? [Open a support ticket](https://support.prikid.app/new-ticket) and include your store URL, the affected product URL, and a screenshot.