Integrate Connect
Developer guidance on how to embed Connect into a website or email using HTML
iframe HTML
To embed the iframe onto a webpage or email, populate your organization's unique ID-based Connect URL from the Dashboard's Connect settings page into an iframe HTML element:
<iframe src="https://arc-connect.arcadia.com/{org.uniqueId}" width="800" height="800">
Sandbox
If you would like to embed the iframe on a webpage in the sandbox environment for the purposes of testing automation, the iframe src would simply include the?apiMode=sandbox
parameter:
<iframe src="https://arc-connect.arcadia.com/{org.uniqueId}?apiMode=sandbox" width="800" height="800">
iframe events
The Connect iframe now supports cross-window communication, which means the iframe emits events indicating where the user is in the process of linking a credential. To enable iframe events, the iframe origin field must be set as a query parameter on the iframe src
URL.
iframe origin
For example, if the page hosting the iframe is https://subdomain.example.com/campaign/1, the origin would be "https://subdomain.example.com" and the iframe src URL would be
<iframe src="https://arc-connect.arcadia.com/{org.uniqueId}?origin=https://subdomain.example.comx" width="800" height="800">
iframe event descriptions
Event Name | When Raised |
---|---|
onStart | The user opened Connect. |
onCredentialsSubmitted | The user entered credentials and is either seeing a progress spinner or a success or failure page. |
onEnd | The user reached the terminal state of Connect after submitting credentials. |
Receiving events
This is a basic example of how to listen to events emitted by the Connect iframe.
window.addEventListener('message', function(event) {
if (event.origin === 'https://arc-connect.arcadia.com') {
console.log('Message received from Connect iframe:', event.data);
}
});
Updated 9 days ago