fbpx

How to embed Bubble in WordPress using an iframe

Follow me:

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

    custom js

    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.

Support the site and keep it free ❤️

I love tech startups and the Bubble community, and have made it my mission to try and create content that’s valuable, easy to follow and entertaining.

Creating content next to full-time consulting work is time-consuming; if you’d like to support it and keep the site free for everyone, please consider buying me a coffee or becoming a supporting member.

Buy Me A Coffee

Follow me:
Bubble.io books

Learn Bubble the right way

Our professional Bubble books teach you how to plan, structure and build your applications right from the start.

5-star review stars

More Posts

Leave A Reply

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

*

Email icon

Useful articles and tips

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

We don't share your email address with anyone, and you can unsubscribe at any time.

You have successfully subscribed