How to embed Bubble in WordPress using an iframe

Sometimes you’ll want to embed Bubble in an iframe in WordPress or another type of website. There can be a few different challenges, especially related to responsive width and height.

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

    The Simple Custom CSS and JS WordPress 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. You can also install it by searching for it in the admin panel of your WordPress site.

  2. Create the CSS file

    Adding custom CSS code to WordPress

    After installing the plugin, you’ll find the Custom CSS and JS option in the left-hand side of the WordPress admin panel. Click this, and then click the Add CSS code button at the top of the screen. You can give it a name that you’ll remember what is, but the name doesn’t affect the functionality and is not visible to users.
    In the code textbox, add the following code:

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

    You can ignore the commented text already in the box (if any), and you can safely delete it. Make sure that you set the right-side Options as following:

    Linking type: internal
    Where on page: Footer
    Where in site: Frontend

  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.

    Again, set the right-side Options as following:

    Linking type: internal
    Where on page: Footer
    Where in site: Frontend

  4. Add an HTML element on your Bubble page

    Bubble HTML element with Javascript to resize iFrame element

    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

    Adding a custom HTML element to a 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.

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.

If you’re curious to see how an embedded iframe Bubble app looks live, check out our Work with Us page and Contact page – they’re both built on Bubble and embedded using this method.

Share:

More Posts

Understanding Bubble Groups

Bubble has five different group types. While they’re all used as containers, their use differs greatly. This article explains the difference between them in detail.

Bubble’s new expressions: SPLIT BY and ARBITRARY TEXT explained

Bubble quietly launched two new features in July 2021 that are quite useful: split by and arbitrary text. They’re both expressions that solve tiny problems that otherwise would require cumbersome workarounds, and are absolutely worth checking out. You’re not gonna

Combining icons and text in Bubble

Placing icons inside of your text elements by using BBCode is a quick way to reduce the total number of elements on your page and make sure your app runs smoothly. Read on for how to do it.

Leave A Reply

Your email address will not be published. Required fields are marked *

*