⚠️ Developer article. This guide requires JavaScript implementation and is the responsibility of your development team. Measmerize does not provide support for custom integration code.
What This Is
Script Integration — Modal Mode lets you embed the Measmerize Size Hub inside a modal you already own and control. Instead of Measmerize injecting its own CTA and managing its own overlay, you decide when the widget appears, inside which container, and how the open/close lifecycle is handled.
Use this when:
You already have a modal (e.g. a combined Size Guide + Measmerize overlay with tabs)
You want a single "Find My Size / Size Guide" CTA that triggers both your content and the Size Hub
You need full control over the modal's open/close behaviour from your own UI logic
Step 1: Add the Size Hub Container
Inside your required modal, add a <div> with id="measmerize-modal". This is where the Size Hub will be rendered when you call modal.mount().
<div class="your-modal-window">
<div class="your-modal-body">
<!-- Your own content (e.g. static size guide) -->
</div>
<div id="measmerize-modal"></div>
</div>
The id="measmerize-modal" attribute is required and must be unique on the page. modal.mount() targets this element specifically. If it doesn't exist in the DOM at mount time, the widget will not render.
Step 2: Calling modal.mount() Correctly
window.measmerize?.modal.mount() injects the Size Hub into <div id="measmerize-modal"></div>. You call it when the user clicks CTA responsible for opening Find My Size modal.
window.measmerize?.modal.mount();
This is where most integration issues happen. The ?. optional chaining prevents a crash if the script hasn't fully loaded yet — but it does not check whether the current product has a size chart assigned. If you call modal.mount() and the product has no size chart assigned in the Measmerize dashboard, the script method will be undefined.
In that case, the widget simply won’t appear, and from the user’s perspective, nothing happens when they click your CTA.
To handle this properly, define clear conditions for your design using the Custom Events outlined in Step 3.
Step 3: Listening to Custom Events (Required)
This step is mandatory and can be specific for your page design. The Measmerize script emits custom events on the script element to communicate its state. You need to listen to these events to know when it is safe to call modal.mount() — and to keep your modal UI in sync with the widget.
All events fire on the main Measmerize script element identified by id="measmerize-script":
const measmerizeScript = document.getElementById("measmerize-script");
The Four Events You Must Handle
measmerize.widget.ready Fires when the current product has a valid size chart assigned and the widget is ready to render. This is your signal to show your CTA and enable modal.mount(). Do not call mount or show your button before this event fires.
measmerize.widget.unavailable Fires when the widget cannot render — typically because the current product has no size chart assigned in the Measmerize dashboard. Hide your CTA when this fires. Calling modal.mount() in this state produces the garmentType error described above.
measmerize.modal.close Fires when the user closes the Size Hub from within the widget (using the widget's own close control). Use this to close your modal container and keep both layers in sync.
measmerize.script.ready Fires when the script has loaded and your data-brand-code is valid. Useful as an early health check, but does not confirm the current product is supported — use measmerize.widget.ready for that.
Complete Working Example
The pattern below gates your CTA on measmerize.widget.ready, prevents modal.mount() from firing when the widget is unavailable, and syncs your modal close behaviour with the widget's own close event.
const measmerizeScript = document.getElementById("measmerize-script");
let widgetReady = false;
// Show CTA only when the widget is ready for this product
measmerizeScript.addEventListener("measmerize.widget.ready", () => {
widgetReady = true;
document.getElementById("your-find-my-size-btn").style.display = "block";
});
// Hide CTA if this product has no size chart
measmerizeScript.addEventListener("measmerize.widget.unavailable", () => {
widgetReady = false;
document.getElementById("your-find-my-size-btn").style.display = "none";
});
// Mount the widget only when the user clicks AND the widget is ready
document.getElementById("your-find-my-size-btn").addEventListener("click", () => {
if (!widgetReady) return;
document.getElementById("your-modal-overlay").style.display = "block";
window.measmerize?.modal.mount();
});
// Sync: close your modal when the user closes the Size Hub from within
measmerizeScript.addEventListener("measmerize.modal.close", () => {
document.getElementById("your-modal-overlay").style.display = "none";
});
The widgetReady flag is the key safeguard. Without it, your CTA fires modal.mount() on every product — including those without a size chart — and users get a broken, silent failure.
Full Custom Events Reference
These events are emitted on the measmerize-script element throughout the widget lifecycle:
Event | When it fires | Returns data? |
| Script loaded, | No |
| Invalid | No |
| Product has a size chart assigned, widget will mount | No |
| No size chart for this product, widget will not mount | No |
| User has opened the widget | No |
| User has closed the widget | No |
| A size recommendation was generated | Yes — |
| User selected a recommended size | Yes — |
| User clicked "Add to Cart" from the widget | Yes — |
| User cleared their recommendation data | No |
Using Recommendation Data
Auto-select the recommended size in your PDP size picker:
measmerizeScript.addEventListener("measmerize.widget.recommend", (e) => {
const { size } = e.detail;
selectSizeOnPage(size); // your own size picker handler
});
Close your modal and update the cart when the user adds a size:
measmerizeScript.addEventListener("measmerize.widget.addToCart", (e) => {
const { size } = e.detail;
document.getElementById("your-modal-overlay").style.display = "none";
addToCart(size); // your cart handler
});
Common Mistakes
Calling modal.mount() without checking measmerize.widget.ready first. The most frequent issue. If the product has no size chart, or the garmentType mapping is stale, mount will fail silently with a console error. Always gate the call with the widgetReady flag pattern shown above.
Calling modal.mount() before <div id="measmerize-modal"></div> exists in the DOM. If your modal container is rendered dynamically (React, Vue, Angular), ensure the container div is in the DOM before triggering mount. Calling mount on a container that doesn't exist yet silently fails.
Not handling measmerize.modal.close. The user can close the Size Hub using the widget's own close button, independently of your modal's close control. If you don't listen to measmerize.modal.close, your modal overlay stays open after the widget disappears, leaving the user with a broken UI state.
Injecting the script more than once. Multiple injections cause state conflicts. One tag, one location.
Related Articles
Integration for Headless Storefronts — Script injection on headless frontends
How to Keep Your Existing Size Chart Visible When Rolling Out Progressively — Handling products without a size chart using measmerize.widget.unavailable
Opening the Size Hub to a Specific Tab — Note: measmerize.modal.open() does not apply in Modal Mode