Whimsical boards can be embedded in other apps to improve efficiency and enhance communication. Here’s a few ways to accomplish this.
If the app allows embeddable iframes, a simple way to display the board is to copy and paste the embed code. You can obtain this code from the Export menu within the titlebar.
Tools that support this method include: Coda, Notion, Jira and many more…
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!
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.
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.
Currently, only Boards can be embedded. We’re planning support for Docs though. Stay tuned.
Coming Soon
We’re building a platform to let developers integrate more deeply with Whimsical. If you’d like early access, let us know.