Forum Academy Marketplace Showcase Pricing Features

Embedding a Bubble page as a responsive iframe

This is probably a long shot, but I’m hoping to be able to embed a Bubble page as an iframe on an external page, but have the iframe height scale responsively so that it shows the full page contents without a scroll bar. I know responsive iframes are tricky so just wondering if anyone has ever managed to successfully achieve this?

1 Like

Update: I tried various methods I found online and finally got one working by using the iframe-resizer javascript project. If anyone else is looking in to using this, I found the default height calculation method would not work with Bubble so I had to change the heightCalculationMethod to taggedElement and add a tagged element at the bottom of my Bubble page. All working well after that!

9 Likes

Hi, Do you have aan example of this?

Hi, would be also interested in an example. Thanks in advance!

As far as I’m aware, the Iframe will be responsive provided you have unchecked the “fixed width” on the bubble page you are embedding and you have enabled the iframe allow embed in the Apps settings.

@dan8 thanks for that. The issue is, however, height and width resizing of the iFrame to content size is not possible with bubble.

How did you implement the davidbradshaw iframe resizer?

@dambusmedia would love to know a nocode/low code solution to this problem! I’m trying to embed my app on my wordpress site and have the iframe’s height change dynamically based on the content within the iframe without a scrollbar.

2 Likes

Thanks to help from @tim12333, I now know how to do this!

Step 1: Download a plugin that allows you to use custom CSS and javascript on your WordPress site. (I use this one: Simple Custom CSS and JS – WordPress plugin | WordPress.org)

Step 2: Using your plugin, save a CSS file with the following:

  #myiframe {
        width: 1px;
        min-width: 100%;
      }

Step 3: Then save a javascript file with the following:

iFrameResize({
    log: true,
    checkOrigin: false,
    heightCalculationMethod: 'grow'
}, '#myIframe')

Make sure both your CSS and JS files have the following settings: Custom CSS and JS Settings

Step 4: In your bubble app, add an HTML element to the page you want to embed with the following:

<div data-iframe-height> &nbsp; </div> 
<script type="text/javascript" src = 'https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js' ></script>

Step 5: Finally, to embed that bubble page as a responsive iframe on your WordPress site, paste this code into the page replacing the src with the URL of your bubble app:

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><br><iframe id="myIframe" frameborder="0" scrolling="no" src="https://bubbleapps.io/" width="100%"></iframe>

You can see an example of a successful bubble app embed at the following link:

5 Likes

I added a group to the bottom of my page and added the “data-iframe-height” ID attribute to the element. However, when I go to load the page in an iframe with the iframe resizer, it says “No tagged elements (data-iframe-height) found on page”. Any idea why this is? I even tried to use a shape instead of a group. I can clearly see the element with the correct ID in the dev console.

This approach worked for me.

To remove the scroll bars & still have your iframe content scroll, if it has a list:

Create an overlapping div like so:

To match your site backgroud, change the color.

<div  class=container style="overflow:hidden; width:953px; background:#xxx">
<iframe src=https://xxx.bubbleapps.io/version-test/ allowtransparency="true" frameborder="0" width="960px" height="800px"></iframe>
</div>