Wexio Widget — Examples

Click-to-run integration examples for the Wexio web messenger across every supported framework — React, Vue 3, Angular, Ember — plus the framework-free script-injection loader and the bare web component.

Each example is a self-contained minimal app. Click ▶ Open in CodeSandbox below to fork, edit, and try it live. All examples auto-pull the latest published widget version on npm install; pinned versions get refreshed by the release sync workflow whenever a new widget version is published.

Examples

Framework / mode	Open in CodeSandbox	Files
React (Vite)	▶ StackBlitz · ▶ CodeSandbox	react/
Vue 3 (Vite)	▶ StackBlitz · ▶ CodeSandbox	vue/
Angular (standalone)	▶ StackBlitz · ▶ CodeSandbox	angular/
Ember	▶ StackBlitz · ▶ CodeSandbox	ember/
Script loader (zero build)	▶ CodeSandbox · ▶ StackBlitz	cdn-loader/
Web Component (zero build)	▶ CodeSandbox · ▶ StackBlitz	web-component/

Two sandbox providers for redundancy — CodeSandbox uses cloud microVMs, StackBlitz uses in-browser WebContainers. Different infrastructure means when one has trouble, the other usually keeps working. Recommended primary provider differs per example:

• Framework examples (React / Vue / Angular / Ember) → StackBlitz first. WebContainers boot the Node dev server reliably; CodeSandbox's Pitcher microVM has been intermittently flaky.
• Static examples (cdn-loader / web-component) → CodeSandbox first. Both work, but CodeSandbox's static template skips microVM allocation entirely and boots in <2s. StackBlitz's WebContainer sandbox also blocks cross-origin iframes to cdn.wexio.io, so the loader-script-injection example specifically only works on CodeSandbox.

Demo mode by default — every example boots with publicKey="pk_demo", a documentation sentinel the widget recognises and short-circuits to bundled mock content. Swap in your own pk_live_... key in the entry file to wire to your integration (each example points you to the right spot in a comment at the top).

What each example shows

Example	Demonstrates
react/	<WexioWidget> mount, memoised user identity, onResize / onOpen / onClose callbacks.
vue/	Vue 3 wrapper with reactive user ref, @resize / @close event listeners, isCustomElement Vite config for wexio-widget.
angular/	Standalone WexioWidgetComponent, @Input / @Output plumbing, CUSTOM_ELEMENTS_SCHEMA.
ember/	Side-effect import that registers <wexio-widget> globally, {{on}} modifier for wexio:resize / wexio:close.
cdn-loader/	One-line <script> install + window.wexioSettings.user pre-boot identity.
web-component/	<script type="module"> runtime load + <wexio-widget> element with addEventListener.

Local development

Each example is a normal npm project. To run locally:

# React / Vue
cd react && npm install && npm run dev

# Angular
cd angular && npm install && npm start

# Ember
cd ember && npm install && npm start

# Static HTML (cdn-loader / web-component)
cd cdn-loader && npx serve .

How this stays up to date

The release flow:

new widget version → npm publish (web-widget repo)
                  ↓
            repository_dispatch event
                  ↓
    sync-on-release workflow (this repo)
                  ↓
   bump every package.json + refresh lockfile + commit
                  ↓
        next CodeSandbox click pulls latest

• npm install-time freshness: every example uses caret ranges ("@wexio/messenger-widget-react": "^1.0.22"), so CodeSandbox's fresh npm install on every open already picks up the latest published version automatically.
• Pinned-version refresh: the sync-on-release.yml workflow listens for the widget-released repository_dispatch event fired by wexiohub/web-widget at the end of its publish run. It bumps every example's package.json to the new exact version, refreshes lockfiles, and commits to main — so the version badge above stays accurate and the lockfiles match what npm actually resolved.

No manual maintenance per release.

Bug reports / requests

This repo holds examples only. For widget bugs or feature requests, file in the main repo at https://github.com/wexiohub/web-widget/issues.

License

MIT — see LICENSE.