Component Events

Everee Embed Components use events to communicate with the host application. You should listen for these events as they include important information and helpful errors.

These events carry data payloads with the following shape:

  eventType: string, see below
  error: boolean
  errorCode: string [optional]
  errorMessage: string [optional]
  eventHandlerName: string 

The Components can broadcast the following kinds of events:

Message Port Successfully RegisteredMESSAGE_PORT_REGISTEREDA message port has been successfully registered with the Component, and the Component is now able to broadcast events to the host.
Worker Onboarding CompleteWORKER_ONBOARDING_COMPLETEThe worker onboarding process has been successfully completed. A corresponding webhook event will be transmitted shortly after this event is broadcast.
Dismiss Container ViewDISMISSThe Component is requesting the host to dismiss or remove its container view. This could be because the Component's workflow has been successfully completed, or that the user pressed a button wanting to return to the host UX.

React Native using React Native Webview

In React Native using the react-native-webview library, pass the string ”ReactNativeWebView” as the value of the eventHandlerName parameter when creating an embedded session. Then pass an onMessage prop to your WebView to receive events published by the embedded UX:

    onMessage={(event) => {

When your callback receives an event, its property will be a JSON string representing the event shape defined above.

For reference, you can look at this sample Expo Snack showing how to register an event handler and receive events.

Native iOS

Add a custom WKScriptMessageHandler to the WKWebView’s WKUserContentController. Use the created session’s eventHandlerName as the name parameter of the WKScriptMessageHandler when adding it to the WKUserContentController. When your handler receives a WKScriptMessage, its body property will be an NSDictionary with the event shape defined above.

Native Android

Create a pair of WebMessagePorts with WebView#createMessageChannel(). Set a WebMessageCallback on the first WebMessagePort, which will receive events from the embedded UX. Wrap the second WebMessagePort in an array, then wrap that in a WebMessage to send the port to the embedded UX:

WebMessagePort[] channel = webView.createMessageChannel();
WebMessage webMessage = new WebMessage("", Array.of(channel[1]));
webView.postWebMessage(webMessage, embeddedSessionUrl);

When your callback receives a WebMessage, its getData() method will return a JSON string representing the event shape defined above.

The web in an <iframe>

Use the MessageChannel API to create a new channel. You’ll use the two ports connected to the channel to communicate between your application and the Embed Component inside the iframe.

const channel = new MessageChannel();

Send port2 into the iframe embedding the Component using the onLoad callback of the <iframe> element:

iframe.addEventHandler(“load”, (event) => {"", "*", [channel.port2]);

Now that the Component has received port2, listen to events from the iframe on port1, the port you retained earlier:

channel.port1.onmessage = (event) => {
    // check and,
    // and handle messages sent from the Everee embedded UX

The event's data property will be a JavaScript object with the event shape defined above.

Successful registration

Once an event handler has been successfully registered with the Embed Component, your handler will receive an initial event with eventType: "MESSAGE_PORT_REGISTERED". This event will be delivered strictly before any other events are published from the Component, and confirms that the Component is able to communicate with your host application.

Error codes

You may see errors during development or production. Use these error codes below to identify and resolve issues.

EMB-101Session creation token expiredTokens generated from a session creation request are one-time use and only valid for a short period of time.

Each time you need to present an embedded experience, create a new session immediately prior to displaying it. Don’t create a session before you need it.
EMB-102No event handler registeredNo event handler has been registered with the embedded experience.

Make sure the appropriate eventHandlerName has been specified (see the docs for platform-specific instructions).
EMB-201Onboarding already completeThe ONBOARDING experience is only available for workers whose onboarding has not yet been completed.

Create a new worker record to start a new onboarding sequence instead.
EMB-202Onboarding not yet completeOnly the ONBOARDING experience is available until workers have completed onboarding.

Complete the onboarding sequence in order to present other experiences.