Skip to main content

Embedding through an iFrame

Updated over a month ago

Sometimes, the content your team needs lives outside of Whale — and that’s where embedding comes in. Whether it’s a Google Maps view of your office location, a Wistia-hosted company update, or an interactive dashboard, the iFrame feature in Whale lets you seamlessly pull in external content right into your cards.

This helps centralize everything your team needs without disrupting their workflow — keeping documentation interactive and connected.


💡 Why Use iFrame Embeds?

iFrames are ideal when you want to include:

  • 🗺️ A Google Map showing office locations or event venues

  • 📽️ A Wistia video of a recorded company meeting

  • 📊 A KPI dashboard or form hosted in a third-party app

  • 📅 A shared calendar or booking link

  • 📦 Any other embeddable content not natively supported in Whale


How to Embed Content Using iFrame

Step 1: Open or Create a Card

Navigate to the card where you want to embed the content.

Step 2: Find the iFrame Option

In the card editor:

  • Click on “Whaley” in the editor toolbar

  • Select “iFrame” from the dropdown

  • A pop-up will appear with a text field to paste your embed code

Step 3: Paste Valid iFrame Code

Copy the <iframe>...</iframe> code from your third-party app and paste it into the field.

⚠️ Important: Only paste the <iframe> tag — no additional scripts, styles, or HTML allowed.


✅ Correct Example (Wistia Embed)

<iframe src="https://example.wistia.com/medias/abc123" title="Monthly Update Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" width="640" height="360"></iframe>

❌ Incorrect Example (With Extra Script)

<iframe src="https://example.wistia.com/medias/abc123"...></iframe> <script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>

This will not work — only the iFrame code is allowed.


Where Do I Find the iFrame Code?

Most third-party tools offer an “Embed” or “Share” option. Once you select it, look for the code that begins with <iframe...> — that’s the one to copy.

If you’re unsure where to find it, consult the help docs for that specific tool (e.g., Google Maps, Wistia, Calendly).

Did this answer your question?