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 developer looking to support Whimsical embeds in your own app, read on. 😉

oEmbed (For developers)

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)

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.