Ember Integration

To add the widget to an Ember app, install @wexio/messenger-widget-ember. Glimmer renders the <wexio-widget> custom element natively, so there is no Ember component wrapper. The package adds a small service helper.

Install

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

Ember 4+ is supported. The package has no required peer dependencies. ember-source is listed as an optional peer for clarity.

Basic Usage

To register the custom element, load the widget runtime once with a module script in app/index.html. Then use <wexio-widget> in any template.

app/index.html

<script type="module" src="https://cdn.wexio.io/widget/widget.js"></script>

app/templates/application.hbs

<wexio-widget public-key="pk_live_..."></wexio-widget>

Glimmer renders the unknown tag as a native DOM element. The custom-element runtime then mounts a Shadow-DOM-isolated messenger.

Importing the package alone does not register the element. The runtime loads from the script tag above, or when you create a WexioWidgetService (see below).

Events

<wexio-widget> dispatches standard CustomEvents. Bind handlers with Ember's built-in {{on}} modifier.

<wexio-widget
  public-key="pk_live_..."
  {{on "wexio:resize" this.onResize}}
  {{on "wexio:close"  this.onClose}}
></wexio-widget>

app/components/foo.js

import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class FooComponent extends Component {
  @action onResize(event) {
    const { width, height } = event.detail;
    console.log(width, height);
  }

  @action onClose() {
    console.log("visitor closed the panel");
  }
}

Identifying a Visitor

You set identity on the DOM element. To identify a visitor, get the element and call identify() with one proof: a host-signed jwt (recommended), a Google FedCM googleIdToken, or the legacy userId + userHash pair.

app/routes/application.js

import Route from "@ember/routing/route";
import { inject as service } from "@ember/service";

export default class ApplicationRoute extends Route {
  @service session; // your own session service

  async afterModel() {
    if (this.session.isAuthenticated) {
      const el = document.querySelector("wexio-widget");
      el?.identify({
        jwt: this.session.jwt, // host-signed identity token
        name: this.session.user.name,
        email: this.session.user.email,
      });
    }
  }
}

Service Helper

The package exports a WexioWidgetService class. Extend it to register an Ember service, then inject the service anywhere.

app/services/wexio-widget.js

import { WexioWidgetService } from "@wexio/messenger-widget-ember";
export default class extends WexioWidgetService {}

app/components/login.js

import Component from "@glimmer/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";

export default class LoginComponent extends Component {
  @service wexioWidget;

  @action onLogin(token, user) {
    this.wexioWidget.identify({ jwt: token, name: user.name, email: user.email });
  }

  @action onLogout() {
    this.wexioWidget.shutdown();
  }
}

Method	Effect
`identify(user \| null)`	Log a known user in / out (`null` logs out). Calls the element's `identify()`.
`open()` / `close()`	Open or close the panel.
`navigate({ tab, article? })`	Go to a tab, help article or news post, and open the panel.
`prefill({ name, email, phone })`	Update unverified prechat prefill. Needs the script loader.
`show()` / `hide()`	Show or hide the widget. Needs the script loader.
`shutdown()`	Clear identity (log out). Needs the script loader.

prefill(), show(), hide() and shutdown() call window.Wexio(), which only the script loader defines. With the Web Component alone they do nothing. To log out there, call identify(null).

On the element you can also set default-open="true", and open="true" or open="false" as strings. A boolean false removes the attribute and leaves the widget uncontrolled. The element dispatches wexio:open as well as wexio:resize and wexio:close.

See Authentication for how to produce a proof.

Try It Live

The examples repo has a runnable Ember example (side-effect import that registers the element, {{on}} modifiers for wexio:resize / wexio:close). You can also configure the widget live in the Playground.

Authentication - produce a VisitorIdentity proof.
Web Component - the element this package registers, and its full attribute/event surface.
Configure - theming, content, and behaviour.
Examples - runnable apps for every framework.