Embed Visualizations Using Iframes

An iframe is used to display a web content from one website inside another website. You can use iframes to embed your dashboards and Analytical Designer inside your web applications.

Embed Dashboards

To embed a dashboard into your web application, copy the following iframe snippet into your web app and subtitute your own values for <host_url>, <workspace_id> and <dashboard_id>:

<iframe
    title="My Embedded GoodData Dashboard"
    id="embedded-app-frame"
    src="<host_url>/dashboards/embedded/#/workspace/<workspace_id>/dashboard/<dashboard_id>"
    height="500px" 
    width="100%"
    frameborder="0"
></iframe>

For more details on how to embed, configure, authenticate and control embedded dashboards, see Embed Dashboards Using Iframes.

Generate an Iframe Snippet Automatically

You can also generate an iframe code snippet automatically from your dashboard’s web UI.

Steps:

  1. Open the dashboard you want to embed.

  2. Click the </> button in the top right corner.

    Embedding options button highlighted in the top-right corner of a dashboard, labeled with angle bracket symbols and used to generate iframe embedding code.

    The embedding dialog opens.

  3. Select Iframe.

    Embed dashboard dialog showing the iframe tab selected and an iframe code snippet displayed for copying. The toggles for including the Navigation panel, setting a Custom height, or Filter by tags are available on the left.

  4. Click Copy code to copy the iframe code snippet to your clipboard.

    You can now use the code snippet to embed the dashboard into your web application.

    Embedded dashboard displayed within an iframe, showing treemap and revenue trend visualizations inside an application window with a dark purple header labeled Overview.

Embed Analytical Designer

To eembed a Analytical Designer into your web application, copy the following iframe snippet into your web app and subtitute your own values for <host_url>, <workspace_id> and <visualization_id>:

<iframe
    title="My Embedded GoodData Analytical Designer"
    id="embedded-app-frame"
    src="<host_url>/analyze/embedded/#/<workspace_id>/<visualization_id>"
    height="500px" 
    width="100%" 
    frameborder="0"
></iframe>

For more details on how to embed, configure, authenticate and control embedded Analytical Designer, see Embed Analytical Designer Using Iframes.

Embed Dashboards