embed notebook with params

Community Help
1

I want to create multiple versions of a plot by using params. This is my notebook: Temperatur regional / RND / Observable

Is there a way to embed it with a given param? (I use this notebook for embedding: Handy Embed Code Generator / Jeremy Ashkenas / Observable)

2

You can get query parameters in embedded notebooks this way:

new URLSearchParams(document.location.search).get("cell")

or

new URL(document.location.href).searchParams.get("cell")
1 Like
3

thank you, I added a cell with this code. But I don´t know how I to set a param in the embed code. This ist my embed code (first cell): Temperatur regional / RND / Observable

4

I think it’s pretty fully documented here:

5

When I add a param in the url it works fine: Temperatur regional / RND / Observable

But when I embed parts of the notebook the param gets lost: https://observablehq.com/embed/@rnd/temperatur-regional?cells=title%2Cviewof+plz_input%2Canswer%2Clegend%2Cchart%2CmyStyles

6

@jchrist “cell” was just an example for a parameter name. You need to replace it with your own, e.g. “ort”, as the names “cell” and “cells” are already reserved for the selection of cells that are shown in an embedded notebook. Sorry that I didn’t make this clear.

7

sorry, I am not familiar enough with these things, still need your help. I changed the name of the param to “ort” but don´t know how to integrate “?ort=Stuttgart” in the embed code (see first cell, my favorite method) or the standard embed code: https://observablehq.com/embed/@rnd/temperatur-regional?cells=title%2Cviewof+plz_input%2Canswer%2Clegend%2Cchart

8

@jchrist Append it to your embed URL as &ort=Stuttgart. The “?” is used to mark the beginning of the query string, while individual parameters are delimited by “&”.

1 Like
9

thank you, that works great! Is there a way for this embedding method, too? Handy Embed Code Generator / Jeremy Ashkenas / Observable

I guess this would mean to append it somewhere here: https://api.observablehq.com/@rnd/temperatur-regional.js?v=3

10

No, this is just the module URL. How you fetch the query depends on how and where your embed code is integrated. Since custom embeds are a pretty advanced feature I would recommend to stick with iframe embeds instead.

11

since embedding by iframe is not allowed on our website, is it possible to embed with the method “Runtime with Javascript” and add a param there?

12

No, not unless you plan to add them to the parent document’s URL.

Instead you’ll have to redefine the values. Modify the embed snippet code as follows:

// Assign the returned module to a variable
const module = new Runtime().module(define, (name) => {
  // ... usual observer snippet ...
});
// Overriding the value for a cell called "myParam":
module.redefine("myParam", "new value");
// or, for dynamic values, a function:
module.redefine("myParam", () => "new value");
13

this will save me a lot of time, thanks a lot