Embedding a Klip into an HTML page

Highlights

Overview Learn how to generate the code to embed a Klip into an HTML page.
Learn how to manage multiple control instances of a Klip.
Key Features Includes a security restriction to limit embedding to a specific domain.
Permissions You must have Embed Klip and Access Library permissions.

Overview

An embedded Klip is one that integrates into an external website or host application in such a way that it appears seamless to the end-user. It allows you to share Klips inside and outside your organisation.

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.

To embed a Klip, you must generate the embed code and copy the provided code into the body of an HTML page.

How to embed a Klip

  1. Locate the Klip you want to activate for embedding.
  2. On the top right of the Klip, select the Klip Menu icon.
  3. Select Share, Embed Klip.
  4. You can use the Embed this Klip on a Web Page window to set control options. The options are:
    • Name (defaults to the Klip name)
    • Width: measured in pixels. For example, 320 px.
    • Theme: Light or Dark.
    • Border Styles: rounded, square corners, or none.
    • Border Color.
    • Optional: Domain name. When specified, the Klip can only be viewed in this domain.
    • Description. Used to provide additional information to the user when viewing a Klip.
    Embed Klip

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

  5. Click the Next button.
  6. The embed code appears and can be copied for inclusion into an external web page.

    Important: This snapshot image of the Klip is automatically refreshed eight times a day, every three hours.

    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 date and time last modified.

How to manage embeds of a Klip

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

  1. Click on the Library link.
  2. Select the Klips tab.
  3. Locate and open the Klip you want to manage.
  4. Click the Embed link.

Learn more

Keywords:

embed

Dashboard management

  1. Beta: Free public links
  2. Publish links
  3. NEW: What’s the difference between viewing a dashboard in the app and viewing a published link to a dashboard?
  4. Use RiseVision to display your Klipfolio dashboard on big screen TVs or digital wallboards
  5. Updates to Klipfolio user permissions
  6. Generate a Klipfolio API Key
  7. Push API deprecation, October 30, 2015
  8. Klipfolio is rebranding
  9. NEW: Best Practices for Large Screen Dashboard Display
  10. Guide to displaying Klipfolio Dashboards on a Large Screen Display
  11. Dashboard design considerations
  12. NEW: Working with Company Properties
  13. Authenticating with Google
  14. Adding a custom role and users
  15. Adding new users
  16. Annotations
  17. Building dashboards
  18. Checklist for adding new users
  19. Creating groups and setting default dashboards
  20. NEW: Removing a Klip, dashboard or data source from the Library
  21. Displaying Klips in full screen mode
  22. Downloading a Klip to your computer
  23. Downloading a dashboard and all of its Klips to your computer
  24. Whitelist IP Addresses
  25. Emailing a Klip
  26. Emailing a dashboard and all of its Klips
  27. Sending Scheduled Email Reports of Klips with variables
  28. Embedding a Klip into an HTML page
  29. NEW: Best practices for generating PDF reports
  30. Options for launching Klipfolio
  31. Removing a user from a custom role
  32. Removing a custom role
  33. Setting up an IP address range in Klipfolio
  34. Sharing data sources
  35. Sharing Klips
  36. Sharing dashboards
  37. Dashboard permalinks
  38. User properties
  39. User roles and access permissions
  40. Viewing data source failures and refresh history for an account

Feedback and Knowledge Base