Sometimes you’ll want to embed your Bubble page or application in an iframe as part of another page, such as implementing a signup form on a website based on WordPress. There can be a few different challenges, especially related to responsive width and height. This great tip was shared by harrisonalley with help from tim12333 on the Bubble forum.

As always with iframes, you should test the implementation in different browsers, including mobile, to make sure that it works properly. Updates and restrictions in different browsers can sometimes mess with the functionality.

We’re gonna do a bit of coding, but don’t worry, it’s pretty easy to follow along:

  1. Download the plugin for WordPress

    First, you’ll need to add the plugin Simple Custom CSS and JS for WordPress. Here’s how to install a WordPress plugin if you haven’t done it before. Don’t forget to activate the plugin after you’ve installed it.

  2. Create the CSS file

    Using the plugin, we’ll create a CSS file containing the following:

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

  3. Create the JavaScript file

    Then, still using the WordPress plugin, create a Javascript that contains the following:

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

    Make sure that the #myiframe part matches the name you provided in the CSS file.

  4. Add an HTML element on your Bubble page

    Create an HTML element on the Bubble page that you want to embed, and paste the following code into it:

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

  5. Add the iframe to the WordPress page

    Finally, you can add the iframe to the WordPress page itself, using the code below:

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

    Replace the URL marked in blue with the URL to the page that you want to embed. Keep in mind that the URL needs to be updated for the live version, and if you plan to publish the app on a custom domain.

Useful articles and tips

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

You have Successfully Subscribed!

Share This