HomeGuidesAPI ReferenceChangelog
Log In
Guides

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 NameWhen Raised
onStartThe user opened Connect.
onCredentialsSubmittedThe user entered credentials and is either seeing a progress spinner or a success or failure page.
onEndThe 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);
  }
});