Use a script offline in Confluence from Atlassian

Community Help
2

Rather than edit code from a notebook to try to render a particular cell into your div, I think it may be easier to use the runtime itself to place the cell of interest into that div. (It is often possible (particularly for simple, single-cell visualization notebooks) to rewrite code from Observable into standalone JS scripts (see e.g. these two posts), but this is generally a lot more work).

I don’t know anything about Confluence, but from my very brief googling it seems like including the following example code from the runtime docs in a “HTML macro” might work:

<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js"; 
// replace the following URL with the v3 URL for the notebook you want to embed (see below)
import define from "https://api.observablehq.com/@tmcw/hello-world.js?v=3";
const runtime = new Runtime(); 
const main = runtime.module(define, name => { 
  // replace "hello" with the name of the cell you want to display
  if (name === "hello") {
    // replace "#main" with an appropriate selector for your div
    return new Inspector(document.querySelector("#main"));
  } 
}); 
</script>

I’ve added a few comments there to mark the places where you will likely have to make edits.

To get the v3 URL for a notebook, click on the three dots at the top right and open the menu. Click “Download code”, and take the URL of the resulting JS file and add ?v=3 to the end. (Note that the Download code link will only appear for shared and public notebooks.)

If the cell in the notebook you’re trying to embed isn’t already named (e.g. its code starts with { and not someName = ), then you’ll have to give it a name before you can use the above.

For general testing purposes, I’d actually suggest you start with this code snippet from the runtime docs which renders an entire notebook into an HTML element using Inspector.into:

<script type="module">

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
// replace the following URL with the v3 URL for the notebook you want to embed
import define from "https://api.observablehq.com/@tmcw/hello-world.js?v=3";

const runtime = new Runtime();
const main = runtime.module(define, 
  // replace "#main" with an appropriate selector for your div
  Inspector.into(document.querySelector("#main"))); 

</script>

If you can get this to work in your Confluence setup then getting the more specific embed code to work shouldn’t be too bad.

Good luck and feel free to ask if you get stuck!

P.S.:

Is there a typo here? I think id attributes should not contain spaces.