Welcome to @wexio/messenger-widget-angular 👋

Native Angular standalone component for the Wexio web messenger. Thin wrapper around the underlying <wexio-widget> custom element — same WidgetShell runtime as the script-injected iframe and the React component. Same chat, same visitor identity, same backend; the only difference is where the Angular tree mounts.

🏠 Website 📚 Developer Docs 🎮 Playground

Features

The messenger is a full two-way support surface, not just a contact form:

• Conversations & threads — real-time chat with history, read receipts and delivery states, plus multi-topic threads so a visitor can keep several questions side by side.
• Rich messages — images and galleries (with a lightbox), GIFs, inline video, voice notes, and file / PDF attachments; AI replies cite their sources.
• Composer — rich-text editing, emoji and GIF pickers, file attachments, and an in-widget voice recorder.
• Home, Help & News — a configurable Home tab (team status, quick actions, help search, news), a searchable help center, and a news feed — all driven by the operator's dashboard.
• Identity — anonymous by default, or log a known visitor in with a Google, JWT, or HMAC proof.
• Resilient & offline-aware — an offline outbox queues sends, reactions, read-acks and profile changes and converges on reconnect; a dropped connection is shown in-thread.
• Themed & localized — follows the operator's brand theme (light / dark) and ships 33 UI locales; visitors can switch language in-widget.
• Demo mode — omit the public key to render a self-contained preview with bundled mock content (great for landing pages and Storybook).

📂 Description

• Features
• Installation
• Quick start
• Identifying users
• Inputs
• Outputs
• Types
• SSR (Angular Universal)
• Browser support
• Author
• License

Installation

yarn add @wexio/messenger-widget-angular

or

npm install @wexio/messenger-widget-angular

Peer dependencies: @angular/core >= 16, @angular/common >= 16. The widget uses the host's Angular runtime.

Quick start

// app.component.ts
import { Component } from "@angular/core";
import { WexioWidgetComponent } from "@wexio/messenger-widget-angular";

@Component({
  standalone: true,
  imports: [WexioWidgetComponent],
  selector: "app-root",
  template: `
    <main>
      <!-- your app -->
      <wexio-widget-ng publicKey="pk_live_..." />
    </main>
  `,
})
export class AppComponent {}

That's it — the widget mounts a floating launcher, handles its own theme/locale/state, and the operator dashboard sees the visitor immediately.

Selector — the component selector is wexio-widget-ng (suffixed to avoid clashing with the underlying <wexio-widget> custom element it renders).

Identifying users

Pass a verified user input to log a known visitor in. Provide ONE proof — a Google FedCM id_token, a host-signed jwt, or the legacy userId + userHash HMAC pair:

import { Component } from "@angular/core";
import {
  VisitorIdentity,
  WexioWidgetComponent,
} from "@wexio/messenger-widget-angular";

@Component({
  standalone: true,
  imports: [WexioWidgetComponent],
  selector: "app-root",
  template: `<wexio-widget-ng publicKey="pk_live_..." [user]="user" />`,
})
export class AppComponent {
  user: VisitorIdentity = {
    jwt: serverSignedJwt, // host-signed identity token (recommended)
    name: "Ada Lovelace",
    email: "[email protected]",
  };
}

Reactive identity — assign a new object (or null) to user to re-fire the handshake / log out. The component's ngOnChanges watches it.

Inputs

| Input | Type | Description | | -------------- | ----------------------------- | --------------------------------------------------------------------------------- | | publicKey | string | Wexio integration public key (pk_live_...). Omit for demo mode. | | locale | string | UI locale (BCP-47). Overrides the operator's localeStrategy. | | prefillName | string | Unverified prechat prefill. | | prefillEmail | string | Unverified prechat prefill. | | prefillPhone | string | Unverified prechat prefill. | | user | VisitorIdentity \| null | Known-user identity proof. Pass null to log out. | | defaultOpen | boolean | Open the panel on mount (uncontrolled afterwards). | | open | boolean | Controlled open state; keep it in sync from (opened) / (close). Leave unset for uncontrolled. | | previewTab | PreviewTabSignal | Navigate to a tab ({ tab, nonce, article? }) without a remount; opens the panel. A new nonce re-issues the request. |

Outputs

| Output | Payload | When | | --------- | -------------------------------------- | --------------------------------------------------- | | resize | { width: number; height: number } | Panel dimensions changed (open ↔ closed). | | opened | void | The panel opened. | | close | void | Visitor closed the panel. |

template: `
  <wexio-widget-ng
    publicKey="pk_live_..."
    (resize)="onResize($event)"
    (close)="onClose()"
  />
`;

// ...
onResize(size: { width: number; height: number }) {
  console.log(size.width, size.height);
}
onClose() {
  console.log("visitor closed the panel");
}

Types

VisitorIdentity

interface VisitorIdentity {
  googleIdToken?: string;  // Google FedCM id_token (preferred)
  jwt?: string;            // Host-signed JWT
  userId?: string;         // Legacy HMAC pair…
  userHash?: string;       // …(HMAC-SHA256(userId, integrationSecret))
  name?: string;
  email?: string;
  phone?: string;
  attributes?: Record<string, unknown>;
}

SSR (Angular Universal)

The wrapper renders an empty <wexio-widget> element on the server. The actual widget initialises on first client-side mount (ngAfterViewInit). No special handling is needed for Angular Universal — the custom element runs only in the browser.

Browser support

Modern evergreen browsers — anything that supports Shadow DOM and ES2020. Internet Explorer is not supported.

Use with other frameworks

The underlying widget runtime is a Web Component, so it works in any modern framework:

• @wexio/messenger-widget-react — React
• @wexio/messenger-widget-vue — Vue 3
• @wexio/messenger-widget-ember — Ember

Author

👤 Wexio (https://wexio.io)

Show your support

Give a ⭐️ if this package helped you!

Changelog

See the Releases page for the full changelog.

📝 License

This project is MIT licensed.

Created with ❤️ by Wexio