Embedding

Projects hosted on Compute Studio can be embedded as an iframe on any website. Once you’ve published your project, send me an email at hank@compute.studio. I’ll generate a special embed link for your project. 1

Next, embed the link on the target website with code like this. Take care to replace the example title and src values with your own:

<iframe
id="cs-iframe"
title="Test Iframe"
scrolling="no"
src="https://compute.studio/hdoupe/dash-demo/embed/app/"
></iframe>

Set up Iframe-resizer (optional)

Compute Studio uses the Iframe-resizer library to dynamically resize your embedded project so that it loads responsively for all screen sizes. This requires a few extra steps:

  1. Install the content script in your project’s static assets: iframeResizer.contentWindow.min.js

  2. Go to the “Configure” tab in your project’s settings on Compute studio and make sure Use Iframe Resizer is checked:

    Embed docs

  3. On your website, add the controller script from iframe-resizer: iframeResizer.min.js

    Then add this CSS:

    iframe.cs-iframe {
      min-width: 100%;
    }
    

    And, this Javascript:

    <script type="text/javascript" src="/assets/iframeResizer.min.js"></script>
    <script>
        iFrameResize({ log: false, heightCalculationMethod: 'lowestElement' }, '#cs-iframe');
    </script>
    

For more information about Iframe-resizer, checkout the docs.


1

This link is only good for one domain. This restriction prevents other people from using your data visualization on their website without your permission. If you need to embed it on multiple websites, then I’ll generate a link for each one.