Angular Component

Install the widget as a native Angular standalone component with inputs and outputs

For Angular hosts, install @wexio/messenger-widget-angular — a standalone component wrapping the underlying <wexio-widget> custom element. Same runtime as every other delivery mode; the only difference is where the Angular tree mounts.

Install

npm install @wexio/messenger-widget-angular
# or
yarn add @wexio/messenger-widget-angular

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

Basic usage

Import the standalone WexioWidgetComponent and use its selector in a template.

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 {}

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

Inputs

Input	Type	Description
`publicKey`	`string`	Your widget's 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-visitor identity proof. Pass `null` to log out.

Outputs

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

@Component({
  standalone: true,
  imports: [WexioWidgetComponent],
  selector: "app-root",
  template: `
    <wexio-widget-ng
      publicKey="pk_live_..."
      (resize)="onResize($event)"
      (close)="onClose()"
    />
  `,
})
export class AppComponent {
  onResize(size: { width: number; height: number }) {
    console.log(size.width, size.height);
  }
  onClose() {
    console.log("visitor closed the panel");
  }
}

Identifying a visitor

Pass a user input with one proof — a host-signed jwt (recommended), a Google FedCM googleIdToken, or the legacy userId + userHash pair. Assign a new object (or null) to re-fire the handshake / log out — the component's ngOnChanges watches it.

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: "ada@example.com",
  };
}

See Authentication for how to produce a proof.

SSR (Angular Universal)

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

Try it live

A runnable standalone-Angular example (@Input / @Output plumbing, CUSTOM_ELEMENTS_SCHEMA) is in the examples repo — open it on StackBlitz or CodeSandbox.

Authentication — produce a VisitorIdentity proof.
Configure — theming, content, and behaviour.
Examples — runnable apps for every framework.

Angular Component

On this page