Listen to customizer events from JavaScript
Read the live customizer price and react to product, view, and element changes from your own JavaScript using the client-side ChamevoJS API.
The product customizer runs as a <cv-customizer> web component on the page. It fires DOM events as the customer works, and exposes a ChamevoJS instance you can read directly. Use these to mirror the live price in your own plugin, sync customization data, or trigger custom logic.
This is the most common request from third-party plugins: showing the live customizer price somewhere else on the page.
Before you start
- This is a client-side (browser) API. All code runs on the product page, not in PHP.
- Identifiers below are real JavaScript names from ChamevoJS. Use them exactly as written.
- The plugin mounts
<cv-customizer>with JavaScript, so the element may not exist the moment your script runs. See Wait for the element to exist below. - Even once the element exists, its
chamevoinstance and price are only available after thecvReadyevent fires.
Get the customizer instance
There are three ways to get a reference to the customizer, depending on how it was added to the page.
a) Query the element (WordPress and WooCommerce). The Chamevo plugin adds the element for you, so this is the usual approach on a product page:
const customizer = document.querySelector('cv-customizer');
The plugin mounts the element with JavaScript, not as static HTML. So querySelector can return null if it runs before the element appears β see Wait for the element to exist.
b) Keep the return value of createCustomizer(). If your own code creates the customizer, the factory returns the element:
import { createCustomizer } from '@chamevo/customizer';
const customizer = createCustomizer('#customizer', {
stageWidth: 900,
stageHeight: 600,
});