Angular Component

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

To add the widget to an Angular app, install @wexio/messenger-widget-angular. It is a standalone component that wraps the <wexio-widget> custom element. The runtime is the same as in every other delivery mode. Only where the Angular tree mounts differs.

Install

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

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

Basic Usage

To render the widget, 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. The suffix avoids a clash with the <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.
`defaultOpen`	`boolean`	Opens the panel on mount.
`open`	`boolean`	Controlled open state. Keep it in sync from `(opened)` and `(close)`.
`previewTab`	`{ tab, nonce, article? }`	Go to a tab or article and open the panel. A new `nonce` repeats the request.

Outputs

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

@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

To identify 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 to re-fire the handshake, or null to log out. The component's ngOnChanges watches the input.

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.

Server-Side Rendering

The wrapper renders an empty <wexio-widget> element on the server. The widget initialises on first client mount (ngAfterViewInit). Angular Universal needs no special handling, because the custom element only runs in the browser.

Try It Live

The examples repo has a runnable standalone-Angular example (@Input / @Output plumbing, CUSTOM_ELEMENTS_SCHEMA). You can also configure the widget live in the Playground.

Authentication - produce a VisitorIdentity proof.
Configure - theming, content, and behaviour.
Web Component - the element this package wraps.
Examples - runnable apps for every framework.

Angular Component

On this page