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!

10 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:

11 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>

Hi guys, I am having trouble displaying the repeating group data in the bubble page I am trying to embed. The rest of the elements show. Any suggestions?

Thanks @harrisonalley this worked beautifully for me! Pricing Page | DWAM Websites

NOTE: For others trying to do this, I was having issue with the iFrame not “collapsing elements when hidden” like i have them setup to do in my Bubble app. After the user toggled to show a bunch of hidden elements and then toggled them to hide again I would end up with big white space. I changed the heightCalculationMethod: from ‘grow’ to ‘min’ to get my div to collapse after expanding it.

2 Likes

Thank you harrisonalley, you saved my day. Exactly what I was looking for.

However, scrolling to action not functioning properly. I have a 3 step form, when clicked on the button on each step, scrolls to the next step. when I preview the page in bubble it works fine but I embed this to my website (wordpress) using your method, scrolling doesn’t work. Any help or advice much appreciated.

https://express-taxi.nl/bookingbubble/

I tried your app and it seemed to work for me. I was able to lookup vehicles to rent and when i selected a vehicle it hid that group and transitioned to the information input section.

Hi
Thank you for sharing

Im looking to embedding the iframe in external website other than wordpress , Do i have to set the “linking type…etc”

Thank you

hey @harrisonalley It looks like this doesn’t work anymore…

I was able to get this working a few months back with your help, and I just tried to do it again for another project using your process and I get the same error that you’re getting on your Lyric Learner. Just wanted to give you a heads up

UPDATE: so interestingly the iframe embed appears to work if the URL is a live version of the application and not a version-test.

Thanks for the heads up! I’ll see if updating it to a live link works.

Hi Harrison,

I trust you are well.

Hey, is your Bubble page and content embedded on this page?

Sorry, which content is it, the table of contents?

I am trying to do something similar for a more ‘native’ integration of an app display and function on my app to WordPress sites and also other CMS sites like Squarespace.

Thanks.

1 Like