Web Widget
Embed a customisable chat widget on your website — install, theme, authenticate, and manage content
The Wexio Web Widget (Web Messenger) is a customisable chat widget you embed on your website. Visitors get a launcher that opens a panel with up to five tabs — Home, Messages, Help, News, and Profile — backed by your AI assistant, help articles, and news posts.
You configure its look, content, and behaviour from the Brand editor in the dashboard, then embed it with a single script tag (or a Web Component / React install).
This section is the developer + admin reference for embedding and configuring the widget. For the operator-facing inbox where you reply to web conversations, see the main Documentation tab.
Two Audiences, One Widget
| You are… | Start here |
|---|---|
| An admin setting it up in the dashboard | Create a widget → Configure |
| A developer embedding it on a site | Quickstart → Install → Authentication |
Delivery Modes
The widget ships from one runtime, served from one CDN at https://cdn.wexio.io. The runtime is identical everywhere — only where it mounts changes.
| Mode | Host embeds with | Runs in | Pick it when |
|---|---|---|---|
| Script loader | <script src=".../loader.js"> | Iframe | One-line install, full sandbox. Non-technical operators. |
| Web Component | <wexio-widget> element | Shadow DOM | Any framework or vanilla, no build step. |
| Framework package | npm install + native component | Shadow DOM | Idiomatic props/events in your framework. |
The framework packages are thin wrappers around the Web Component — published for React, Vue 3, Angular, and Ember. Same widget underneath; idiomatic API on top.
See Install → comparison for a side-by-side decision guide, or jump to runnable examples.
How It Fits Together
- It is its own entity. A Web Messenger is a
WebIntegrationrecord — separate from your messaging channels (Telegram, WhatsApp, etc.). It has its ownpublicKey(embed identity, safe to expose) andsharedSecret(server-to-server auth, shown once). One widget per organisation in v1. - Plan-gated. Available from the Standard tier upward. Hiding the "Powered by Wexio" badge requires Pro+.
- Role-gated. Creating/deleting the integration and editing widget settings requires Admin/Owner. Editors can manage help articles and news but don't provision the widget. Agents are view-only on the web pages.
- Dashboard routes. Brand editor:
/{org}/web/brand. Help center:/{org}/web/help. News:/{org}/web/articles.
The public key (pk_live_…) is safe to put in client-side HTML. The shared secret is server-to-server only — never embed it in a page. See Authentication.
Explore
Quickstart
Create a widget and paste one script tag — live in 5 minutes
Create a widget
Provision the widget in the dashboard, plan & role requirements
Install
Script loader, Web Component, and React / Vue / Angular / Ember packages
Configure
Brand editor, theming, CSS variables, localization
Authentication
Identify visitors with JWT, HMAC, Google, or passkeys
Content
Help center, news, and RSS / webhook ingestion
Reference
WidgetConfig schema, full API, WebIntegration data model