Support Whimsical embeds in your app with EmbedKit

Whimsical boards can be embedded in other apps to improve efficiency and enhance communication.

If you're a user of Whimsical looking to embed a board in another app you use, check out this article: Embedding whimsical files

If you're a developer looking to support Whimsical embeds in your own app, read on. 😉

oEmbed (For developers)Link to this section

If you want to give your users a way to embed Whimsical in your product, supporting the oEmbed protocol makes things simple. Whimsical is a provider in the oEmbed directory as well as in tools like iFramely and Embedly.

In this scenario, your users paste a Whimsical board URL into your app. Your app requests embed information from Whimsical, and we return the relevant code.

An added benefit to this approach: by supporting oEmbed, you can embed links from many other tools – not just Whimsical!

Custom iframe (For developers)Link to this section

If you don’t want to use oEmbed, you can detect and transform links on your own. First, you’ll need to detect valid Whimsical file URLs. This regex may be helpful:

(https:\/\/)?whimsical.com\/(?:[a-zA-Z0-9\-]+\-)?([a-km-zA-HJ-NP-Z1-9]{16,22})(@[a-km-zA-HJ-NP-Z1-9]+)?

Next, you’ll want to grab the unique id from the URL. It’s the string of characters at the end.

https://whimsical.com/embedkit-example-9VL5WuygDRCgPvxMSBN3mj

You'll then insert that id into an iframe element, like so.

<iframe style="border:none" src="https://whimsical.com/embed/:id" width="800" height="450"></iframe>

That's it. You’re welcome to adjust the style, width, and height parameters to match the context and styling of your app.

Common QuestionsLink to this section

Can private boards be embedded?Link to this section

Yes, though they can only be previewed if you are currently logged into Whimsical in the same browser. If you’d like anyone to view the board, you will need to set it to public.

Can Docs be embedded?Link to this section

Currently, only Boards can be embedded. We’re planning support for Docs though. Stay tuned.

Written by:

  • Jack Jenkins

    Jack Jenkins