Ember Integration
Register the widget custom element in Ember and drive it from a service
For Ember hosts, install @wexio/messenger-widget-ember. It registers the underlying <wexio-widget> custom element so Glimmer renders it natively — no Ember component wrapper required.
Install
npm install @wexio/messenger-widget-ember
# or
yarn add @wexio/messenger-widget-emberEmber 4+ is supported. The package has no required peer dependencies (ember-source is listed as an optional peer for clarity).
Basic usage
Import the package once at app boot to register the custom element, then use <wexio-widget> directly in any template.
import "@wexio/messenger-widget-ember";<wexio-widget public-key="pk_live_..."></wexio-widget>Glimmer renders the unknown tag as a native DOM element; the custom-element runtime mounts a Shadow-DOM-isolated messenger.
Event handling
<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>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
Identity is set imperatively on the DOM element. Grab the element and call identify() with one proof — a host-signed jwt (recommended), a Google FedCM googleIdToken, or the legacy userId + userHash pair.
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 you can extend to register a proper Ember service, then inject it anywhere.
import { WexioWidgetService } from "@wexio/messenger-widget-ember";
export default class extends WexioWidgetService {}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). |
prefill({ name, email, phone }) | Update unverified prechat prefill. |
show() | Show the widget panel. |
hide() | Hide the widget panel. |
shutdown() | Clear identity (log out). |
See Authentication for how to produce a proof.
Try it live
A runnable Ember example (side-effect import that registers the element, {{on}} modifiers for wexio:resize / wexio:close) is in the examples repo — open it on StackBlitz or CodeSandbox.
Related
- Authentication — produce a
VisitorIdentityproof. - Web Component — the element this package registers, and its full attribute/event surface.
- Examples — runnable apps for every framework.