These features are only available for customers on the Census Embedded Scale Plan. If you don’t see these options, please reach out to Customer Support.

Census offers drop-in UI components to help you build and maintain Census syncs on behalf of your customers. Allow your customers to add their syncs directly in your application, with almost no developer effort needed.

An embedded component is an iframe embedded in your application, pointing to a Census sync management link. To see a working example, check out our Embedded Demo application (source code).

This component allows end users to create and manage their Census syncs from your application.

1

Initial Setup

The origin URL is the domain of the application you embed the iframe in. For instance, https://my-site.com. Only approved URLs are allowed to embed these components. Before you get started, you’ll need to provide your Census account manager with your URL(s), or reach out to us at support@getcensus.com.

If you’re developing locally, please send us a unique, publicly accessible URL pointing to your local instance. You can use ngrok or other similar tools to generate this for your localhost.
2

Generate a Sync Management Link

You can create Sync Management Links via the Sync Management Link API.

3

Embed the Sync Management Link in an iframe

<iframe src="https://app.getcensus.com/embedded_sync_wizard?auth=<token>" allow="clipboard-read; clipboard-write" />

Note the use of a permissions policy that allows the iframe to read and write to clipboard. We recommend adding this so that the Census application can write content to your users’ clipboards.

4

Handle events from the iframe

The iframe emits events using the postMessage API. The following events are available to help you manage the iframe lifecycle, via the data property of the message:

Loaded

This event indicates the iframe is ready to be shown to the user.

{
  message: "LOADED"
}

Exited

This event indicates the user has quit the sync management flow. If a sync was succesfully created, the following payload will be returned:

{
  message: "EXITED_SYNC_FLOW",
  data: {
    status: "created",
    details: {
      id: 38
    }
  }
}

otherwise the payload will indicate a sync was not created:

{
  message: "EXITED_SYNC_FLOW",
  data: {
    "status": "not_created"
  }
}

Was this page helpful?

Sync Management LinksOverview