Embed published web notebooks into another web page

You can add just about any chart, table, or Aha! view to a notebook. Notebooks can be securely shared with users who do not have access to your Aha! account. This is a perfect way to make sure everyone is in sync with your strategy, roadmaps, and product plans. You can share notebooks via PDF or a secure URL.

If you want to fully customize how your notebook is presented, there are several ways to embed a published notebook into another web page:

  1. Include a link to your published notebook. Make sure to use the URL from the Open web page button. It will look something like the following example:


  2. Include your notebook in an iframe like the example below:

    <iframe src="https://your-domain.aha.io/published/fd554ce954c03d2fa032a233f" style="width: 100%; height: 550px;" frameborder="0" scrolling="auto" seamless="seamless"></iframe>

  3. Embed only a single notebook page to another web page. This option does not include any branding. First, select the Update web page button to ensure everything is updated. Next, click the Open web page button. From the notebook web page, navigate to the slide you want to embed and inspect the live code. For example, in Chrome, this can be accomplished by right-clicking anywhere on the slide web page and choosing Inspect. In Firefox, it is called Inspect Element. When inspecting the code, look for the correct iframe element. There will be more than one iframe, so make sure you locate the correct one like the example below:

    <iframe data-url="https://your-domain.aha.io/published/fd554ce954c03d2fa032a233f/snapshot/6119135030950" frameborder="0" scrolling="auto" seamless=""></iframe>

You need to replace data-url with src. The end result should look like this:

<iframe src="https://your-domain.aha.io/published/fd554ce954c03d2fa032a233f/snapshot/6119135030950" frameborder="0" scrolling="auto" seamless=""></iframe> You can also change the other attributes to properly fit the slide into your own web page.

Keep in mind that frames are dynamically rendered onto the page, so you must use your browser's element inspector rather than viewing the full-page source. Secure URLs are unique and live with the notebook. This means that you can update the content of your notebook by clicking the Update web page button and the URL will not change. When updating, you do not need to modify the page hosting your notebook.

Notes for specific uses

Enterprise+ customers should be mindful that if IP based access control is configured, external users may be blocked when attempting to access the notebook from outside of the specified IP addresses.

If you have enabled Enhanced notebook security, which requires that users log in to Aha! before accessing a notebook, then embedding a notebook in an iframe will not work. If users are not already logged into Aha!, they will see a blank page when attempting to view the iframe. For security reasons, Aha! does not allow the login page to appear inside an iframe.

To allow the browser control that enables fullscreen to be used from within the iframe, the iframe tag needs another attribute like the following example:

<iframe src="https://your-domain.aha.io/published/fd554ce954c03d2fa032a233f/snapshot/6119135030950" style="width: 100%; height: 550px;" frameborder="0" scrolling="auto" seamless="seamless" allowfullscreen="true"></iframe>

Was this article helpful?
4 out of 5 found this helpful