📣 Please note that this article is not intended for our general customer base, but rather for our third-party developer partners. The information here aims to guide you in building an embed that will optimize the use of your tool in Coda.

Embeds in Coda allow users to integrate external content into their Coda docs, providing a unified workspace for teams to collaborate without switching between tools. With these embeds, users can bring their favorite tools and data sources—like Google Sheets, Miro boards, Figma designs, or dashboards from analytics platforms—directly into the context of their Coda doc. Rich embeds take things to the next step, allowing users to view, interact, edit, and update external content in real time. This simplifies information sharing and keeps teams aligned without the friction of navigating across multiple platforms. To build an optimal rich embed of your tool for Coda, check out the information below.

Available embed methods

When building an embed for Coda, it may be helpful to consider how customers are embedding third-party content in their docs. There are two ways customers can access embeds within Coda’s platform.

Full-page embed: Turn a page in a doc into a partner embed.
Canvas embed: Pasting a URL directly into a Coda doc and selecting Embed as the display option, or using the backslash ( / ) command in the document to bring up a flyout and select the tool to embed.

Technical considerations

Coda uses the 3rd party service Iframely to handle embeds. Many popular apps and websites are already supported, and you can use their site to check if a URL already supports embedding. There’s also an in-product compatibility mode that bypasses Iframely and directly shows the embed.

Sandbox restrictions

The iframe containing the embed is sandboxed by default and has limited permissions. These restrictions default to:

Prevent access to cookies and local storage.
Disable form submissions.
Block script execution.
Restrict popup windows.
Prevent navigation of the top-level browsing context.

If you need access to additional iframe sandbox permissions, please contact support.

Sizing

Your embed should implement responsive sizing to ensure optimal display across different screen sizes. We recommend using percentage-based widths and setting an appropriate fixed height or aspect ratio.

URL

The URL must be secure (i.e. begin with https://) and must not prevent being loaded in an iframe via the X-Frame-Options or Content-Security-Policy headers.

Editable embeds

Editable embeds allow users to interact with and make changes to content directly within a Coda doc. Partners like Zoom and Miro enable edit functionality so users can stay in their workflow, eliminating the need to switch between platforms. This creates a unified experience and maximizes the value of the embed. Consider making your embed editable for optimal customer experience, and check out a few examples from other partners below for inspiration.

ℹ️ Further considerations:

For details about the <iframe> HTML element, read here.
For info on how embeds work with Packs, read here.
To learn more about how customers work with embeds in Coda, read here.

Embed examples

The following are some examples of highly successful partner embeds. To see the embeds in action, we recommend adding them to a Coda doc and playing around first-hand.

Miro

Brainstorming sessions become more interactive with editable Miro boards embedded in Coda, allowing participants to add notes, shapes, or comments directly in Coda.

Zoom Whiteboard

Teams can collaborate on a Zoom Whiteboard embedded in Coda, adding sticky notes, annotations, or sketches during a planning session, with all updates syncing back to Zoom.

For any questions about building embeds or Packs with Coda, reach out to partners@coda.io.