Example - Web Component

<!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>