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.
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>"
/>
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
);
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.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 |
Last modified 22d ago