Juicebox reports can be embedded via HTML in any website where you have access. Embedding takes three simple steps:
Create a HTML snippet that includes the Juicebox report URL
Paste the HTML snippet into your website
Making your report available to be seen without requiring a log-in
1. Create the HTML snippet
Here's some sample code for embedding that includes HTML/CSS to display the report and helps preserve the aspect ratio:
<style>.jb-app {position: relative;overflow: hidden;width: 100%;padding-top: 177.78%;}.jb-app iframe {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}</style><div class="jb-app"><iframe src=APP_URL_GOES_HERE /></div>
For APP_URL_GOES-HERE make sure to include the URL for the published report, not the draft version. For example:
Use the published URL: https://explore.myjuicebox.io/a/movie_trends2/
Don't use the draft/editing URL: https://explore.myjuicebox.io/a/movie_trends2:draft/movie_trends
You will also want to exclude the "hash", which will look something like this #aEp6SI4Dl5f and shows up at the end of the URL. The hash is a unique value that saves the most recent set of selections in your report.
2. Pasting the HTML snippet into your website
In your webpage, you'll want to paste the HTML snippet created in step 1. How you add this HTML will be different across website building solutions:
In Squarespace you'll want to add a code block.
Wordpress lets you embed media from other sites as explained in this article.
Guidance for embedding on Wix is here.
3. Making your report public
Before you embed the Juicebox report in your website, you will want to make it so viewers don't need to log in. Juicebox report need to be set to public access mode. A public report does not require log-in credentials so anyone with the URL to your report will be able to see it.
To make this change, you'll need publish your report as a public report first. You can find out how to do that here.