Ask or search…
K
Links
Comment on page

Embedding a Connect Webview

When you embed a webview inside an iframe, you might want to know when it completes. You can listen to messages dispatched from the iframe to the hosting window for this purpose.

Embedding a Webview in an Iframe

You can use the HTML Iframe to display a connect webview url.
<iframe
style="border: none;min-height: 600px;height: 100%;width: 100%"
src="<your connect_webview.url>"
/>

Messages

When a webview is hosted in an iframe, it sends messages to the parent window hosting the iframe using window.parent.postMessage, a cross-origin communication mechanism available in browsers. You can listen for these messages by registering a listener for message events on the window.
window.addEventListener(
"message",
(event) => {
if (event.data?.event?.event_type === "webview.login_successful") {
// Do something
}
},
false
);

Message Body

Here is a sample message sent by the iframe:
{
"event": {
"event_type": "webview.login_successful",
"connect_webview_id": "123e4567-e89b-12d3-a456-426614174000"
}
}
Note that at the top level of the message is a single property: the event object. The properties on this object are described in the Event Properties section.

Event Properties

Property
Type
Description
event_type
webview.login_successful or webview.login_failed
Type of event - either a success or failure
connect_webview_id
string
ID of the webview
error_code
string
If the event is webview.login_failed, a code for the error that occurred
error_message
string
If the event is webview.login_failed, a human-readable message for the error that occurred