Skip to main content

How do I embed a Klip into an HTML page?

Updated

You can share a Klip inside and outside your organization by embedding the Klip into an external website or host application.

You can display multiple Klips by embedding multiple control instances within a host application or you can restrict embedding of a Klip to a specific domain.

Notes:

  • To embed a Klip, your role must include the following permissions: "embed Klips" and "access Klips". Learn more about roles and permissions here.
  • Embedded Klips automatically refresh every three hours (when a user is logged into the account). Published links can be used if you need your data sources to refresh when you're not logged in. Learn more about published links here.
  • Embedded Klips are not interactive. They are images of Klips that get updated on refresh.

This article includes:

Embedding a Klip

To embed a Klip, you choose display options, generate the embed code, and then copy the code into the body of an HTML page.

To embed a Klip:

  1. On your dashboard, locate the Klip you want to activate for embedding.
  2. At the top right of the Klip, click the 3-dot menu menu.
  3. Click Share > Embed Klip.
  4. Set options in the Embed this Klip on a Web Page window as follows:
    • Name: The default is the Klip name but you can optionally enter a unique name.
    • Description: Optionally, enter descriptive information (that will be seen by the viewer of the Klip).
    • Width: Enter the preferred width (measured in pixels).
    • Theme: Select from Light or Dark.
    • Border styles: Choose from none, rounded, or square corners. Choose a border color.
    • Domain (optional): When specified, the Klip can only be viewed in this domain.

Embed Klip

Note: You can use the Preview window to see how a Klip looks and adjust the width, border style, and color appropriately.

  1. Click Next.
  2. Copy and paste the embed code into an external web page.

Tip: Open and close the drop-down arrow, located at the bottom left of the embedded Klip, to see additional information. For example, the Klip title, description, and the date and time it was last modified.

Managing embedded Klips

You can view the code, delete the embed, or generate new embed code for a Klip on the About this Klip page.

To view, delete, or create new embed code for an embedded Klip:

  1. In the left navigation sidebar, click the 3-dot menu beside Klips and select Klip Library.
  2. Click the Klip for which you want to manage embeds.
  3. On the About this Klip page, click Embeds to access its embed details.
  4. Click Set up a New Embed, View Code or Delete.

Troubleshooting embedded Klips

This section contains information about the following:

Embedded visualization error

If the error message Embedded visualization not available displays when embedding a Klip:

  • It could be that the embedded access code is being accessed from your local computer, instead of from a web server. For example, C:\mycomputer\embed.html. Ensure your embedded access code is coming from the web.
  • If the domain URL includes "http://",remove the http:// portion from it.

Refresh rate for embedded Klips

Each time an embedded Klip is viewed on a web page, Klipfolio checks to see if the Klip has been rendered within the last three hours. If the Klip rendered within the last three hours, the viewer will see the cached Klip data. If the Klip has not been rendered within three hours, it will be rendered using the current cached data from your dashboard. You must log in to your dashboard in order for the data source cache to refresh.

Related articles

Related articles