How to embed an iframe in Bubble

Steps

1. 1

   Step 1: Open the page in the Design tab

   Open the page that must show the frame.

2. 2

   Step 2: Add an HTML element

   Drag the HTML element onto the page.

3. 3

   Step 3: Paste the iframe code in the HTML field

   Select the element to open its settings. Paste the code from the site into the HTML field.

4. 4

   Step 4: Leave Display as an iFrame off

   This option runs the code as an independent web page. Turn it on only when the code provider tells you to.

5. 5

   Step 5: Test the page in run mode

   Script tags run only in run mode, not in the editor. Check the frame in run mode before you publish.

Limits

• Script tags in the HTML run only in run mode, not in the editor.

• Stretch to fit content works only when Display as an iFrame is off.

• The setting "Do not set cookies on new visitors by default" stops iframes in HTML elements from using cookies.

• The Free plan has a development version only. A live website needs a paid plan.

Troubleshooting

The frame is blank

The page sends X-Frame-Options or a CSP frame-ancestors rule. Test the URL to see which header blocks it.

Blank iframe, no error →

The framed site stops working before cookie consent

The setting "Do not set cookies on new visitors by default" blocks cookies in iframes. Visitors must give consent, or you turn the setting off.

Cookies in iframes →

Your Bubble app will not load in another site

The option "Allow to render the app in an frame/iframe (X-Frame-Options)" in General settings is set to DENY. Set it to Allow all iframes only when the app must load in frames.

The X-Frame-Options deny error →

Related