2c:null 2d:["$","title",null,{"children":"Introduction to Embedding | GfK Displayr Engineering | Observable"}] 32:T4b2,--- In the two years since Observable [open-sourced the Runtime API](https://twitter.com/jashkenas/status/998631653613289473) to let people download and embed notebooks, people have used it to break news, share art, and build sites for clients. Along the way, our documentation and support has grown haphazardly, through responses to forum posts, leaving behind a trail of examples and warnings you have to stumble upon and bookmark for later. Many of those problems remain unsolved, but we are either working to fix them or working to document the workarounds that have been floating around the community, and collect them in places you are more likely to see them. Jeremy’s [Handy Embed Code Generator](https://observablehq.com/@jashkenas/handy-embed-code-generator) became a kind of shibboleth in the community; forum posts would pass it along like, “Forget the UI, just use this one weird trick I found!” You all validated its usefulness, so we built it into the UI. In doing so, we hope to inspire the next generation of community experimentation. The work done by the community in notebooks guides the expansion of the interface, which expands what can be discovered and done in notebooks.33:[] 30:{"id":"e140e9a85d1e169b","slug":null,"title":"Introduction to Embedding","thumbnail":"c0c8309013ef55a4b56fe080c5f35b2d2e8f115bb20ef2581913c4bfa407790d","access_level":"public","create_time":"$D2022-08-23T09:34:12.139Z","update_time":"$D2022-08-23T09:34:12.139Z","view_time":null,"first_public_time":"$D2022-10-07T11:26:57.677Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024"},"version":1064,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null}],"members":[{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7c9db241ab46c6bd","slug":"we-innovate-2022-tutorials","title":"we.innovate 2022 / tutorials","owner":{"id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering"}},"type":"notebook","body":{"title":"Introduction to Embedding","cells":[{"id":0,"value":"# Introduction to Embedding\n \n

Notebooks can be embedded and customized anywhere on the web (or off it).

\n\n

Illustration: [ClipArt ETC](https://etc.usf.edu/clipart/72700/72757/72757_cyl_press.htm)

\n\nNo notebook is an island; it draws from others’ work, and it exists to say something to someone somewhere else. Sometimes, an image of a chart will not suffice; your notebook may be interactive, or it may pull live data. It’s dynamic, and the version you show elsewhere should be, too.\n\nEmbedding lets you put a working version of your notebooks inside another website. For example, the cell below embeds a bar chart of letter frequencies:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"It shows two cells in one: one to control the sort order, and one to show the chart. And this isn’t an [import](https://observablehq.com/@observablehq/introduction-to-imports) — it’s just HTML, which means it can go anywhere on the web. It’s made with the Embed tool, which you can find it in the cell menu (to the left of every cell) and in the notebook menu (in the top right of the page):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"

${await FileAttachment(\"embed_and_embed_cells.png\").image()}\n

Cell menu on left; notebook menu on right.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"embedMenus","database":"$undefined"},{"id":194,"value":"You can select any combination of named cells (those that start with `name = ...`) with the checkboxes. The preview shows how they will look and work when pulled out from the rest of the notebook, so you can fine-tune and fix any surprises. Then copy the **Iframe** code at the bottom and paste it into just about anywhere that lets you put your own HTML.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"

\n \n

Note that the Preview may not appear if the window is insufficiently wide.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"In many cases, you’re done! But if you want more control or a deeper integration, you can try the other embedding methods, **Runtime with JavaScript** or **Runtime with React**, which generate code that uses the [Runtime API](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) to render your cells. Since the code is running directly on your site, and the cells are inserted directly into your document, you can rearrange the cells and style them with CSS; they do not have our site styles. Since the appearance will depend on the site into which you’re embedding, our preview here is only a rough indication of how your embed will look.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1055,"value":"The Runtime-based embedding methods are limited to environments where you can run your own scripts. But since the Iframe isolates that in a different document, it can go in more controlled WordPress blogs, content management systems like Gatsby, and note-taking software like Notion or Roam. Closer to home, you can now embed cells in posts on the Observable forum. It even makes embedding easier on Observable itself, since the Iframe can go directly in an \\`html\\` template literal! (If you want to pass data in and out of the cells, you’re still better off using [imports](/@observablehq/imports).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1056,"value":"Some sites like Medium and Reddit that don’t allow arbitrary HTML still “unfurl” certain links you paste to interactive versions, using a standard called [oEmbed](https://oembed.com/). Under the Iframe code, click “Copy URL only” and paste it elsewhere; depending on the site, it will expand to the full interactive embed. If the site uses Embedly, the Iframe can automatically resize to match the height of your content.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1057,"value":"“Embed” means different things to different people, and this only covers a small fraction of the ways you can take the work you do here elsewhere. It doesn’t help you embed in Slack, Facebook, Twitter, or LinkedIn, which don’t support arbitrary interactive embeds; we still use the notebook thumbnail for those. To share your work in an email, presentation, or other document, you might try “Download PNG” in the cell menu for SVG or canvas cells. To capture something dynamic, you can use ${buttons(mac ? \"Cmd-Shift-5\" : \"Win-Alt-R\")} to record part of the screen. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":939,"value":"

Advanced techniques
Troubleshooting

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"links","database":"$undefined"},{"id":246,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":670,"value":"import {mac, buttons} from \"@observablehq/keys\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"