Embedding a Bubble page as a responsive iframe

Need help Responsiveness
9

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