Creating an Embed Layer

White Label Data allows you to embed external dashboards and other visualizations from data platforms such as Looker, Chartio, Periscope, Metabase, and Kibana. Each of these platforms provide a way to securely embed an iFrame into your code. White Label Data allows you to link to these external platforms without having to write any code. The generation and signing of the iFrame URLs happens automatically and integrates with other White Label Data features such as authentication, user personas, and navigation. You can create a data application in just a matter of hours that pulls together a number of external dashboards under one branded application.

An embedded iFrame is considered a type of visualization in White Label Data. To embed an iFrame in your application, you need to configure a layer with a simple configuration that specifies the external dashboard you want to embed. By adding this information as a layer, you are able to include an iFrame anywhere in your HTML page using a tag. See Add Visualizations Using Tags.

The steps for embedding an iFrame are as follows:

  1. Ensure that you have created a connection in appconfig.json to the platform you wish to embed from.
  2. Create a layer with a config for the iFrame.
  3. Add the tag to your HTML page to include the embed visualization.

Adding Embed Settings to a Layer File

To create a layer with configuration for an embed, you create a layer with a <config> section as follows:

<config>
{
    "type" : ...,
    "embed_settings" : {
        ...
    }
}
</config>

Note: The pipeline, query, and mapping sections are not needed for embeds because the rendering happens remotely.

Option Description
type One of:
-looker-embed
-chartio-embed
-periscope-embed
-metabase-embed
-kibana-embed
embed_settings A dictionary of type-specific attributes for the embed. See documentation on the specific embed type for the specific attributes.

Embedding Specifics

To embed an iFrame for one of the specific data platforms that are supported by White Label Data, read more about setting up your connection and creating an embed:

Type Setting Up the Connection Embedding
Looker Create a Looker Embed Connection Embed a Looker iFrame
Chartio Create a Chartio Embed Connection Embed a Chartio iFrame
Periscope Create a Periscope Embed Connection Embed a Periscope iFrame
Metabase Create a Metabase Embed Connection Embed a Metabase iFrame
Kibana Create a Kibana Embed Connection Embed a Kibana iFrame