🏠 back to Observable

Generating key to embed notebook


#1

Very new to this… but was under the impression from reading the post on embedding that if I were to save a notebook I would then be able to download for embedding in either of two formats. However, that is supposed to include a key that is appended to the URL.

I forked from a notebook, saved but when I tried to download/get the link with the key it doesn’t generate… what am I missing here?


#2

You didn’t miss a thing!

Since the initial launch of the embedded and downloadable notebooks — we later loosened the restriction that allowed only the author of the notebook to download the ES Module version, and removed the access key requirement.

This didn’t change much in practice, as previously, if the notebook was published, you could always have forked it and then downloaded the code immediately afterwards in any case.

I’ve gone and updated Downloading and Embedding Notebook to remove the references to the no-longer-used access keys.

Cheers,
Jeremy


#4

Awesome, thanks! I got the notebook to embed. I just had one weird effect (which may be out of scope here but…) for some reason, it embedded the notebook under the footer in the wordpress blog.

I’m running a Divi theme, and put the code into the main body, but it shows after the footer… can’t quite understand why it would do that, but maybe a question for the Theme people?


#5

I bet it’s doing a document.body.append() … which would put it at the bottom of the page. Feel free to paste your embed code here, and we can take a look…


#6

Very kind, thank you!

It looks like it doesn’t state .append, but not very familiar with the syntax of this:

<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://unpkg.com/@observablehq/notebook-runtime?module";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@mhgit10/federal-budget-in-a-bottle.js";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
Runtime.load(notebook, Inspector.into(document.body));

</script>

#7

Yep, the Inspector.into(document.body), is telling the embed to insert the contents of the notebook at the bottom of the document.body, which is to say, at the bottom of the page.

Just replace document.body with a reference to the DOM element where you’d like to have the notebook cells inserted.

If you aren’t sure how to do that, look at getElementById or querySelector