These features are only available for Census Embedded customers. 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 segments on behalf of your customers. Allow your customers to create and manage their segments directly in your application, with almost no developer effort needed.

An embedded component is an iframe embedded in your application, pointing to a Census segment 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 segments 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 Segment Management Link

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

3

Embed the Segment Management Link in an iframe

<iframe src="https://app.getcensus.com/embedded_segment_builder?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 segment management flow. If a segment was succesfully created or updated, the following payload will be returned:

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

otherwise the payload will indicate a segment was not created:

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