42:null 43:["$","title",null,{"children":"Embedding | Matthew Mitchell | Observable"}] 49:[{"id":"99cac5f683558bf75ba0330e22e51fe23dfb761a00bf83c157f637b1c097942768039a883e3227538be635162e87c502bc00d26af8818d210cec0f8d524a62ee","href":"https://static.observableusercontent.com/files/99cac5f683558bf75ba0330e22e51fe23dfb761a00bf83c157f637b1c097942768039a883e3227538be635162e87c502bc00d26af8818d210cec0f8d524a62ee","name":"embed_and_embed_cells_v2.png","type":"image/png","lastModified":1679417505966.229,"size":277686},{"id":"f41b30243a8dd83e4e28038d1231b7f07919194c85c4f902fd2a5f31ec9be96bacefd7ac00e31706727d04c46ec23ffd2281638ce107c5e71e44bb0d2f3649ee","href":"https://static.observableusercontent.com/files/f41b30243a8dd83e4e28038d1231b7f07919194c85c4f902fd2a5f31ec9be96bacefd7ac00e31706727d04c46ec23ffd2281638ce107c5e71e44bb0d2f3649ee","name":"embed_with_preview_bar_chart.png","type":"image/png","lastModified":1679417505966.229,"size":298991}] 47:{"id":"86179b6fccaa6dfc","slug":null,"title":"Embedding","thumbnail":"9615809a4f69101dc33e617a1a1c93439be4765c835c324f86f7089e4a594be7","access_level":"public","create_time":"$D2023-03-21T16:51:45.966Z","update_time":"$D2023-03-21T16:51:45.966Z","view_time":null,"first_public_time":"$D2023-03-21T16:51:45.966Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"de620ed2e65ddd70","login":"matthew-mitchell","name":"Matthew Mitchell","avatar_url":"https://avatars-next.observableusercontent.com/d0e5a8dfa16a01ab9c12bb4f7aedb9c70b1ea3463f9ac5e4149d998db74ea552","tier":"starter_2024","bio":"Technologist with a knack for data, maps and visualization","following":false},"version":1073,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"136b36d98938d6b2","login":"matthew-mitchell","name":"Matthew Mitchell","avatar_url":"https://avatars-next.observableusercontent.com/d0e5a8dfa16a01ab9c12bb4f7aedb9c70b1ea3463f9ac5e4149d998db74ea552","tier":null,"bio":"Technologist with a knack for data, maps and visualization","following":false}],"members":[{"type":"individual","id":"136b36d98938d6b2","login":"matthew-mitchell","name":"Matthew Mitchell","avatar_url":"https://avatars-next.observableusercontent.com/d0e5a8dfa16a01ab9c12bb4f7aedb9c70b1ea3463f9ac5e4149d998db74ea552","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Embedding","cells":[{"id":0,"value":"# Embedding\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"

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

Cell menu on left; notebook menu on right.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":939,"value":"

Advanced techniques
Troubleshooting

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"links","database":"$undefined"},{"id":246,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":670,"value":"import {mac, buttons} from \"@observablehq/keys\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 48:"$47:body"