Web Component

Embed the widget as a custom element — attributes, events, and the identify() method

The Web Component embed registers a wexio-widget custom element backed by Shadow DOM. It's framework-agnostic — drop it into Vue, Angular, Svelte, or plain HTML.

Basic embed

Load the module once, then place the element anywhere in your markup:

<script type="module" src="https://cdn.wexio.io/widget/widget.js"></script>

<wexio-widget public-key="pk_live_..."></wexio-widget>

Attributes

These attributes are observed live — changing them re-resolves config without unmounting the widget:

Attribute	Default	Behaviour
`public-key`	—	Your widget's public key. Omit or leave empty for the demo fallback.
`locale`	auto	Force a UI locale (a BCP-47 code). Overrides the operator's locale strategy. See Localization.
`prefill-name`	—	Unverified prechat prefill.
`prefill-email`	—	Unverified prechat prefill.
`prefill-phone`	—	Unverified prechat prefill.

<wexio-widget public-key="pk_live_..." locale="pt-BR"></wexio-widget>

Identifying a visitor

The element exposes an identify() method. Pass a VisitorIdentity to sign a visitor in, or null to log out:

const el = document.querySelector("wexio-widget");

el.identify({ jwt: "<host-signed-jwt>", name: "Ada Lovelace" });

// later, on logout:
el.identify(null);

See Authentication for how to produce the proof.

Events

The element dispatches custom events (they bubble and cross shadow boundaries):

Event	`event.detail`	When
`wexio:resize`	`{ width, height }`	The panel's dimensions changed.
`wexio:close`	—	The visitor closed the panel.

el.addEventListener("wexio:resize", (e) => {
  console.log("panel size", e.detail.width, e.detail.height);
});

Pre-boot settings

You can pass identity, prefill, and even a pre-resolved config before the element mounts by setting window.wexioSettings:

<script>
  window.wexioSettings = {
    user: { jwt: "<host-signed-jwt>", name: "Ada" },
    config: { /* InjectableWidgetConfig — skips the bootstrap fetch */ },
  };
</script>
<script type="module" src="https://cdn.wexio.io/widget/widget.js"></script>
<wexio-widget public-key="pk_live_..."></wexio-widget>

Passing a config object skips the GET /api/web/config/:pk bootstrap fetch — handy when you already have the config server-side. See the config reference.

React component — if your host is React.
Localization — pinning and switching languages.
Authentication — identity proofs.