Examples
Example — Web Component
A complete HTML page embedding the widget as a custom element
The <wexio-widget> custom element, backed by Shadow DOM. Framework-agnostic — this page is plain HTML, but the same element drops into Vue, Angular, or Svelte. It shows attributes, the identify() method, and the custom events.
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 — web component embed</title>
</head>
<body>
<h1>My website</h1>
<button id="login">Identify visitor</button>
<button id="logout">Log out</button>
<pre id="log">— waiting for events —</pre>
<!-- 1. Pre-boot settings (optional): identity / prefill / a pre-resolved config. -->
<script>
window.wexioSettings = {
prefill: { name: "Ada Lovelace", email: "ada@example.com" },
};
</script>
<!-- 2. Load the bundle once. -->
<script type="module" src="https://cdn.wexio.io/widget/widget.js"></script>
<!-- 3. Place the element anywhere. Swap in your public key. -->
<wexio-widget public-key="pk_live_..." locale="en"></wexio-widget>
<script type="module">
const el = document.querySelector("wexio-widget");
const log = document.getElementById("log");
const push = (line) => (log.textContent = line + "\n" + log.textContent);
// Identify a logged-in user with a server-signed JWT (optional).
document.getElementById("login").onclick = () =>
el.identify({ jwt: "<host-signed-jwt>", name: "Ada Lovelace" });
document.getElementById("logout").onclick = () => el.identify(null);
el.addEventListener("wexio:resize", (e) =>
push(`resize → ${e.detail.width} × ${e.detail.height}`),
);
el.addEventListener("wexio:close", () => push("close"));
</script>
</body>
</html>What to change
| Token | Replace with |
|---|---|
pk_live_... | Your public key. |
<host-signed-jwt> | A server-signed JWT — only if you identify visitors. |
Related
- Web Component reference — attributes, events,
identify(). - Live demo on the CDN.