Handling 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 above
  error: boolean
  errorCode: string [optional]
  errorMessage: string [optional]
  eventHandlerName: string 
}

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 data 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();
channel[0].setWebMessageCallback(webMessageCallback);
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.

React Native using React Native Webview

For this platform, 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:

<WebView
    ...
    onMessage={(event) => {
        handleEvent(event.nativeEvent.data);
    }}
    ...
 />

When your callback receives an event, its event.nativeEvent.data property will be 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 Everee UX inside the iframe.

const channel = new MessageChannel();

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

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

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

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

Error codes

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

CodeMessageDetails
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.