Embedding HTML & JavaScript with Bubble's HTML Element

The HTML Element: Your Gateway to Custom Code

Before we start building, let's clarify what the HTML element is and why it's so important. Think of it as a special container or a "sandbox" on your Bubble page where you can place raw code. While Bubble provides many native elements like buttons and inputs, the HTML element allows you to go beyond those limits.

This is particularly relevant for your goal, as it allows for the integration of pre-built tools without having to recreate them from scratch using Bubble's logic.

Adding and Configuring the HTML Element

Now for the hands-on part. Adding the HTML element to your page is as straightforward as adding any other visual element in Bubble. You'll find it in the "Visual elements" section of the Design tab.

Once you drag it onto your page, you can configure it through the property editor. Its primary feature is a large text box where you'll paste your code.

The following video from Buildcamp offers a great visual walkthrough of this process. While the instructor is building something different (styled "chips"), the fundamental steps of adding the element and pasting in code are exactly what we need to focus on.

Practical Exercise: Embedding a JavaScript Calculator

Let's put this into practice by embedding a simple tool. In the last lesson, we looked at the "Vanilla JavaScript 20 Projects" repository on GitHub. We will now take the code for the calculator from that repository and embed it into a new Bubble page.

1. Prepare Your Bubble Page: Create a new page in your Bubble app named tool_test or similar.

2. Add an HTML Element: Drag an HTML element from the Visual Elements panel onto your page. Make it reasonably large (e.g., 400px wide by 600px high) to accommodate the calculator's interface.

3. Gather the Code:

   • Navigate back to the Vanilla JavaScript 20 Projects repository we reviewed previously.
   • Click into the 05-calculator folder.
   • You will find three key files: index.html, style.css, and script.js. Open each one in a separate browser tab. You'll need to click on the file and then click the "Raw" button to get the clean code.

4. Combine the Code:
   This is the key step. We need to combine the contents of these three files into a single block of code to paste into Bubble. The structure looks like this:

   <!-- 1. The HTML structure comes first -->
   <!-- Copy the content from INSIDE the <body> tag of index.html and paste it here -->
   
   <!-- 2. The CSS styling goes inside <style> tags -->
   <style>
   /* Copy the ENTIRE content of style.css and paste it here */
   </style>
   
   <!-- 3. The JavaScript logic goes inside <script> tags -->
   <script>
   /* Copy the ENTIRE content of script.js and paste it here */
   </script>
   

   Go through this process carefully: copy the HTML body content, then the full CSS file, and finally the full JavaScript file, placing each into the corresponding section of the template above.

5. Paste into Bubble: Copy your combined code block and paste it into the "Appearance" text box of the HTML element you added in Bubble.

Now, click "Preview" to see your page. You should see a fully functional calculator running inside your Bubble app!

An Alternative: Using <iframe>s

Pasting code directly is perfect for simple, self-contained tools where you have access to the source code. However, sometimes you'll want to embed a more complex application or a service that is hosted elsewhere. For this, you can use an <iframe>.

An <iframe> (Inline Frame) is an HTML tag that essentially embeds another web page within your page. Bubble's HTML element can be used to render an <iframe>.

The article below describes embedding a third-party photo editor. While the tool itself is different, the process demonstrates the <iframe> approach.

So, you have two main methods for embedding:

• Direct Code: For simple, open-source tools where you have the HTML, CSS, and JS files. This gives you more potential to modify the code.
• <iframe>: For embedding tools or sites that are already hosted online. It's simpler but treats the embedded content as a black box.

Limitations and Looking Ahead

You've successfully embedded an external tool, which is a massive step forward. However, you might notice that the tool is completely isolated. The calculator can perform calculations, but your Bubble app has no idea what the user is doing inside it. You can't read the result of a calculation or save it to your database.

This limitation is by design for security and stability.

This "deep integration" you're aiming for—passing data between the embedded tool and your Bubble app—requires an additional step. We need to build a bridge between the JavaScript running inside the HTML element and the Bubble environment.

Conclusion

In this lesson, you've acquired the practical skill of embedding external code into your Bubble application using the HTML element. This is a fundamental technique for building your multi-tool platform.

Here are the key takeaways:

• The HTML element is Bubble's native component for inserting raw HTML, CSS, and JavaScript.
• For self-contained tools from sources like GitHub, you can combine the code into a single block (<style>, HTML body, <script>) and paste it directly into the element.
• For embedding content hosted elsewhere, you can use an <iframe> tag within the HTML element.
• By default, embedded code is isolated and cannot directly communicate with Bubble's workflows or database.

This last point sets the stage perfectly for our next lesson. We will tackle this isolation head-on by introducing a powerful plugin called Toolbox. You'll learn how to use it to trigger Bubble workflows from your custom JavaScript and send data from Bubble into your embedded tool, finally achieving the deep integration you need for your platform.