25:["$","title",null,{"children":"Embedding | Observable | Observable"}] 2a:T528,We could add a loading screen to the iframe embed; we discussed heuristics for assessing when an embed is done loading during our check-in this morning. Mike, anything you could suggest here with your knowledge of the runtime for assessing when the runtime has run enough for showing it to be useful would be helpful. We can't add this resizing code until we add a script tag embed method (which is something we have working, but isn't slated for the initial release). I'll post a PR this weekend so it's an option, but our product decision was not to include the script tag yet. For this example, we could hardcode heights that are likely to look good instead, but it will make the page less responsive. I agree it's unfortunate that the first example on the page is anything more complicated than html`","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$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"},{"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"},{"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. If you have an Enterprise account, you can \n\nThen 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"},{"id":1077,"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"},{"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"},{"id":1081,"value":"### Iframe embeds without the Observable attribution banner\n${enterprise()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1080,"value":"If you have an Enterprise account, you have the option to remove the Observable brand attribution banner by checking the box next to **Remove attribution banner**:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"

\n \n

By checking the box next to Remove attribution banner, Enterprise users can remove the Observable attribution banner.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"## Embedding Private Notebooks\n\nPrivate notebooks are not embeddable by default. To embed a private notebook, you can use a notebook key or API key with the embed code.\n\nSee [API and Notebook Keys](https://observablehq.com/@observablehq/api-keys) for more details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1075,"value":"## Embed Environment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":939,"value":"

Advanced techniques
Troubleshooting

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":246,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":670,"value":"import {mac, buttons} from \"@observablehq/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1078,"value":"import {free, pro, enterprise} from \"@observablehq/pro-tag\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2b","stdlib":"1","titling":"auto"}} 29:"$28:body" 24:E{"digest":"NEXT_REDIRECT;replace;/@observablehq/embeds;307;"}