Easier Embedding and Sharing with Observable

[Cassandra]

What’s New?

We are excited to announce a new tool for embedding on Observable! Now, you can share your full interactive notebook on you blog, on platforms like Notion or Wordpress and many more through copy paste using HTML.

We appreciate the feedback you all gave us on our previous embed functionality and are releasing this new, UI-based tool to make it easier for a multitude of users to share their work done on Observable across various platforms and channels. Check out our announcement on the new embed tool for an overview of this release.

Please feel free to leave us a comment here and give us your feedback, we are actively making adjustments and improvements to this tool.

View our documentation for more details:

• Introducing the Embed Tool
• Advanced Embedding and Downloading
• Troubleshooting Embedding

We look forward to your input!

[mcmcclur]

This is great - thanks! Now that you’re supporting oEmbed, you might consider whitelisting Observable so that we can post dynamic content into this forum:

Rich link previews with Onebox

[thomasballinger]

I’ll look in to this! We’ve already whitelisted Observable for iframes on this forum, but we must have something left to do for oEmbed.

<iframe width="100%" height="680" frameborder="0" src="https://observablehq.com/embed/@ccnlog/admetrics-hexbin-map?cell=hex_opacity&cell=map"></iframe>
produces

[mcmcclur]

Ahh… I hadn’t tried an iFrame. I think OneBox is really just a short cut; You might want to just stick with the behavior you’ve got.

Thanks!

[aaronkyle]

Thanks Observable Team!

Having the embed cell generator accessible from the notebook menu is super convenient. I really appreciate it.

One UI tweak that I feel would be really helpful is if, upon clicking first ‘entire notebook’, one could then start clicking off specific cells–like being able to ‘opt out’ rather than just ‘opt in’.

I request this because I tend to have notebooks with a lot of named cells, and usually I wish to embed most of them without embedding the entire notebook. And toggling on each independently is a pain.

It would be very nice if clicking ‘embed notebook’ would toggle on all, and from there I just de-select what I don’t want to show (like where I require D3, or where I have an isNumeric function that I don’t wish to expose).

Oh, and while I was writing this, I also see that the notebook credits are generated by default.

Jeremy’s Handy Embed Code Generator had this as a click-on / click-off option as a final step (“Add a link back to the notebook” ). Since I’m requesting UI tweaks, I’d also suggest bringing this feature into the UI – especially for iFrame embeds (I realize I can just edit it out when selecting JS + runtime embed).

For context on this second request from my own use cases: I am often embedding my link-shared notebooks into HTML papers that I pass around the office, and I neither want this accreditation to be repeated a dozen times for a dozen different charts on one page, nor do I always want to expose my notebooks so easily (sometimes it just raises too many questions).

Thanks for this awesome feature!

[j-f1]

It looks like the https://github.com/observablehq/examples is private, so we can’t see the example embeds.

[anjana]

Thanks for the feedback @aaronkyle! I’ve passed your suggestion re unchecking cells to the team.

As for the attribution at the bottom of iFrame embeds, we are not planning to make that optional at this point. As you noted, you can still use the JS option if you want to delete the credits, but please only remove it if the notebook is yours (which it sounds like is your use case) - we include this by default to make sure authors receive due credit for their awesome work wherever it is embedded around the web!

Thanks again for the suggestions and for trying out the new UI!

[anjana]

Thanks for flagging @j-f1! This has been fixed - example links should now be working.

[tophtucker]

Thanks for all the feedback Aaron! Re: selecting all cells — you can use our keyboard shortcuts for selecting cells (sometimes known as “Visual Mode”) to select which cells to embed, which means you can press Shift-A to select all cells. When you open the modal it will have every named cell checked, and you can individually de-select any you don’t need.

I agree this is confusing, but the reason “Entire notebook” works the way it does right now is that it’s actually slightly different from “Select all”. If you embed the entire notebook, it will also include any unnamed cells, as well as any cells published after you create the embed. “Entire notebook” is an unconditional embed, whereas any combination of individual checkboxes creates the conditionals depending on name that you see in the “Runtime with JavaScript” code.

I suppose it would be possible to make subtractive selections of cells using the Runtime, like “all except this name”, by writing a line like if (name !== testChart) return Inspector.into(document.body) or whatever, but that feels kinda confusing too. I would rather leave the complex selections to the existing and very powerful Visual Mode!

[tophtucker]

As for the notebook credits — we know there are a lot of cases where this doesn’t work (e.g., a behind-the-scenes notebook generating many embeds where the title has nothing to do with the content being shown), and want to explore more options; for now the Iframe’s priority is just to be a zero-configuration default.