How to embed a custom iFrame
1min read
Embed any iFrame-able resource (Canva designs, Figma boards, Loom videos, custom dashboards, third-party tools) directly inside a Brainfish article. The iFrame renders in your Help Center, the Managed CMS preview, and any widget that surfaces the article.
Steps
- Insert an iFrame block. Type
/iframeon a new line in the editor, or click the+icon and pick iFrame from the block menu. - Enter the iFrame URL. Paste the URL you want to embed. Most platforms provide a dedicated embed URL (often ending in
?embed=trueor similar) — use the embed URL, not the share URL. - Preview. Open the article in Preview draft to confirm the iFrame loads as expected. Some platforms block iFrame embedding via
X-Frame-Options— if the preview is blank, check the source platform's embed settings.
Example
A Canva embed URL:
https://www.canva.com/design/DAGcWrDSBlw/hg3-NKKh8s91eg2UN85Qpg/view?embed=&customIframe=true
When pasted into the iFrame block, it renders the design inline in the article.
Tips
- Use HTTPS URLs only. Browsers block mixed-content (HTTPS page embedding HTTP iframe).
- Check responsive behaviour. iFrames on small viewports often need explicit width settings — most platforms (Canva, Figma) handle this automatically when you use their embed URL.
- Heavy iframes slow the page. Don't embed more than 2–3 iframes in a single article.
Related
- Using the Managed CMS Editor
- List of Editor Integrations — alternatives for common platforms (Loom, Figma, YouTube, etc.) that have dedicated embed blocks instead of generic iFrame.