Install Methods

Compare the embed methods and framework packages, the CDN layout, and the version-cache policy

Every embed method delivers the same widget — same runtime, same chat, same visitor identity. Pick the one that fits your host page.

You'll find your public key and ready-made snippets in the Brand editor under Setup → Install.

Setup → Install sub-tab showing the public key and the embed-method snippet tabs

Two zero-build options

	Script loader (`loader.js`)	Web Component (`widget.js`)
Host API surface	`<script>` data attributes	HTML attributes + custom events
Style isolation	Full document (iframe)	Shadow DOM
JS isolation	Full	Shared with host
Accessibility tree	Separate	Part of host page
Best for	Paste-a-tag installs, CMS / WYSIWYG	Any framework or vanilla, no build step

Each framework package is a thin wrapper around the Web Component — they give you idiomatic props/inputs and events for your framework while running the exact same widget underneath. All published from npm and versioned together.

Framework	Package	Selector / usage
React	`@wexio/messenger-widget-react`	`<WexioWidget />`
Vue 3	`@wexio/messenger-widget-vue`	`<WexioWidget />`
Angular	`@wexio/messenger-widget-angular`	`<wexio-widget-ng />` (standalone component)
Ember	`@wexio/messenger-widget-ember`	`<wexio-widget>` (registers the element)

Decision guide

Using React / Vue / Angular / Ember? → the matching framework package (npm) for idiomatic props and events.
Another framework (Svelte, Solid, …) or plain HTML with a build step? → Web Component — one module script, one <wexio-widget> element.
Simplest possible one-tag install, or a CMS / WYSIWYG block? → Script loader.

Every framework package and both zero-build options have a runnable, click-to-fork example in the public examples repo (StackBlitz + CodeSandbox). See Examples.

CDN layout

All bundles are served from https://cdn.wexio.io/widget/:

cdn.wexio.io/widget/
├── loader.js            # Iframe loader (vanilla JS)
├── widget.js            # Web-component bundle (ESM)
├── widget-react.js      # React-component bundle (ESM)
├── widget-demo.html     # Demo page (web component)
├── widget-react-demo.html
└── v1.0.X/              # Pinned-version copies (immutable)
    ├── loader.js
    └── widget.js

Cache policy

Path	Cache-Control	Meaning
Unversioned (`/widget/loader.js`, …)	`max-age=300, s-maxage=300, stale-while-revalidate=86400`	5-minute hard cache + 24-hour stale-while-revalidate. Bug-fixes ship fast.
Versioned (`/widget/v1.0.X/...`)	`max-age=31536000, immutable`	One year, immutable. Never invalidated.
All responses	`Access-Control-Allow-Origin: *`	Loadable from any origin.

Unversioned paths always serve the latest release. To lock a specific build, see version pinning.

Legacy flat URLs (cdn.wexio.io/loader.js, cdn.wexio.io/loader@1.0.X.js, …) still work via CDN rewrites, so existing embeds don't break. New integrations should use the namespaced /widget/... paths.

Try a live demo

Web Component: https://cdn.wexio.io/widget/widget-demo.html
React (ESM CDN): https://cdn.wexio.io/widget/widget-react-demo.html