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?
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
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?
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…
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>
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…
Hello. I’m having a lot of trouble embedding into WordPress pages. I’m using code exactly like that described here, but I’m specifying a specific div with the class “chart” as the destination:
new Runtime().module(notebook, name => {
if (name === "chart") {
return new Inspector(document.querySelector(".chart"));
}
});
I’m not getting any output in WordPress, but my code works fine served outside WordPress.
I’m using the Code Embed plugin to embed the script and generate a shortcode that I put in my actual WordPress post. This may be a WordPress theme issue, but I wonder if anybody has any tips for getting embeds to work inside WordPress.
Thanks.
Do you see any errors in your dev console when you navigate to that page?
Do you mind sharing a link to an example WordPress page exhibiting the issue?
Actually, yes I do: “unexpected token” referring to the appearance of “<” in my code.
When I look through the page source, I see that my JavaScript is getting HTML inserted directly into it:
<p><!-- Code Embed v2.3.2 --><br />
<script type="module"></p>
<p>import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";</p>
<p>import notebook from "https://api.observablehq.com/@ralphlombreglia/zoomable-sunburst@343.js?v=3";</p>
<p>new Runtime().module(notebook, name => {
if (name === "chart") {
return new Inspector(document.querySelector(".chart"));
}
});</p>
<p></script><br />
<!-- End of Code Embed output --></p>
<p class="title">Zoomable Sunburst</p>
<div class="chart"></div>
You can see at the end my two pure HTML lines for embedding the Viz in a div with the class “.chart”.
So it looks like this is a WordPress theme issue. I know it’s not an Observable issue, but if anybody here happens to have wisdom, I’d gladly accept it.
Thanks.
Looks like WPBakery Visual Composer is the problem plugin. With all plugins off (except Code Embed) it works fine inside WordPress. With only Visual Composer turned on in addition, I get the unwanted HTML already noted.
Problem is, we have way too many pages authored in Visual Composer to re-do
This is WAY out of scope for this forum, I realize, but if anybody has any ideas, fire away.
For anyone’s reference who might be interested, I finally solved this with another WordPress plugin that lets you inject JS into the header of specific pages (if that’s what you want to do).