embed notebook with params

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")
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 ā€œ&ā€.

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