JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
    <body>
        <iframe id="xpv-viewer" src="https://expivi.expivi.net/product/chair/embed"></iframe>
        <pre><code id="event-viewer"></code></pre>
        <script src="https://cdn.jsdelivr.net/npm/@expivi/iframe-client@1.0.1/dist/xpv-iframe-api.min.js"></script>
  </body>
</html>

CSS

iframe {
  width: 100%;
  height: 500px;
}

pre {
  padding: 4px;
  background: grey;
  max-height: 100px;
  overflow-y: scroll;
}

JavaScript

const eventViewer = document.getElementById('event-viewer');
const expiviFrame = document.getElementById('xpv-viewer');
const expiviService = new ExpiviIFrameService(expiviFrame.contentWindow);

expiviService.isReady().then(() => {
  eventViewer.innerText += 'Expivi is ready\n';
});

expiviService.setEventListener('v1.add-to-cart', (event) => {
  eventViewer.innerText += 'Received v1.add-to-cart: ' + JSON.stringify(event) + '\n';
});

expiviService.setEventListener('v1.save-current-config', (event) => {
  eventViewer.innerText += 'Received v1.save-current-config: ' + JSON.stringify(event) + '\n';
  return { foo: 'bar' };
});

expiviService.setEventListener('v1.price-changed', (event) => {
  eventViewer.innerText += 'Received v1.price-changed: ' + JSON.stringify(event) + '\n';
  return 0.0;
});

expiviService.setEventListener('v1.before-image-upload', (event) => {
  eventViewer.innerText += 'Received v1.before-image-upload: ' + JSON.stringify(event) + '\n';
  return true;
});