Example - React (ESM CDN)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wexio Widget - React component (ESM CDN)</title>

    <!-- React + React DOM come from the host page so the widget's
         externalised peer deps resolve. In a real React app your bundler
         injects React; here an import map gives the same dependency shape. -->
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19.2.4",
          "react-dom": "https://esm.sh/react-dom@19.2.4",
          "react-dom/client": "https://esm.sh/react-dom@19.2.4/client",
          "react/jsx-runtime": "https://esm.sh/react@19.2.4/jsx-runtime"
        }
      }
    </script>
  </head>
  <body>
    <h1>My website</h1>
    <pre id="log">- waiting for callbacks -</pre>
    <div id="widget-mount"></div>

    <script type="module">
      import { createElement } from "react";
      import { createRoot } from "react-dom/client";
      import { WexioWidget } from "https://cdn.wexio.io/widget/widget-react.js";

      const log = document.getElementById("log");
      const push = (line) => {
        if (log.textContent === "- waiting for callbacks -") log.textContent = "";
        const at = new Date().toISOString().slice(11, 19);
        log.textContent = `[${at}] ${line}\n` + log.textContent;
      };

      const root = createRoot(document.getElementById("widget-mount"));
      root.render(
        createElement(WexioWidget, {
          publicKey: "pk_live_...",
          onResize: ({ width, height }) => push(`resize → ${width} × ${height}`),
          onClose: () => push("close"),
        }),
      );
    </script>
  </body>
</html>