Examples
Example — React (ESM CDN)
Embed the React component with no npm install, loading it over an import map
Embed the React component inside any page without an npm install — the bundle is served from the same CDN as the loader and web component. React and React DOM come from the host page via an import map, so the widget's externalised peer deps resolve.
This mirrors the live demo at https://cdn.wexio.io/widget/widget-react-demo.html.
Full page
<!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_...",
locale: "en",
onResize: ({ width, height }) => push(`resize → ${width} × ${height}`),
onClose: () => push("close"),
}),
);
</script>
</body>
</html>The live CDN demo imports the bundle by the relative path /widget/widget-react.js because it's served from the CDN origin. For your own site, import the absolute https://cdn.wexio.io/widget/widget-react.js (as above) so its code-split chunks resolve correctly.
What to change
| Token | Replace with |
|---|---|
pk_live_... | Your public key. |
Related
- React component reference — full prop list.
- React app (npm) example — if you have a bundler.