Bridging Bubble & JavaScript with Toolbox

The Key to Communication: The Toolbox Plugin

To achieve the "deep integration" you're aiming for, we need a way for the JavaScript inside the HTML element to talk to Bubble, and for Bubble to talk back. The most popular and versatile solution for this is a free plugin called Toolbox.

Toolbox is a "must-have" for many Bubble developers because it provides several utility elements and actions that extend Bubble's native capabilities, particularly when working with code. Let's start by getting it installed.

With the plugin installed, you'll find new elements and workflow actions available in your editor, which we'll explore now.

Receiving Data: The JavascriptToBubble Element

The first direction of communication we'll establish is from your embedded JavaScript to Bubble. Toolbox provides a special visual element for this purpose called JavascriptToBubble.

Think of this element as a listening post. You place it on your page, and it waits for a specific JavaScript function to be called. When that function is called, it can receive a value (like the result of a calculation) and trigger a Bubble workflow.

The following video from Jacob Gershkovich provides a fantastic walkthrough of this entire process. We'll watch it in segments to understand each step.

Configuring the Element

Once you've placed the JavascriptToBubble element on your page, you need to configure it. This involves giving its function a unique name and telling it what to do when it receives data.

Let's look at the key settings, which are also covered in the next part of the video:

1. bubble_fn_suffix: This is the unique part of the function name. If you type result, Toolbox creates a JavaScript function named bubble_fn_result().
2. Trigger event: This checkbox is crucial. When checked, it creates a new event in the Workflow tab that will fire every time the JavaScript function is called.
3. Publish value: This checkbox tells the element to capture the first piece of data (or "argument") passed into the JavaScript function and make it available in Bubble.
4. Value type: Here you specify the type of data you expect to receive, such as text, number, or date.

Now, let's continue the video to see this configuration in action and understand how to trigger the workflow.

To summarize the process in writing, the following article provides a clear, step-by-step guide that mirrors the video's content.

Practical Exercise: Connecting the Calculator

Now, let's apply this to the calculator you embedded in the previous lesson. Our goal is to add a button inside the calculator's HTML that sends the final calculated result back to Bubble, which will then display it in an alert.

1. Open Your Page: Navigate to the tool_test page (or whatever you named it) where your calculator is embedded.

2. Add the JavascriptToBubble Element:

   • Find JavascriptToBubble in the Visual Elements panel and drag it onto your page. It's an invisible element, so you can place it anywhere.
   • In its property editor, set the bubble_fn_suffix to calculatorResult.
   • Check the Publish value checkbox.
   • Set the Value type to number.
   • Check the Trigger event checkbox.

3. Modify Your HTML and JavaScript:

   • Select the HTML element containing your calculator code.
   • Find the HTML part of your code. You need to add a button that will trigger our function. A good place might be right after the display screen element. Let's assume the calculator's display has an id="result" or similar. You'll add a button like this:

     <button onclick="sendResultToBubble()">Send Result to Bubble</button>
     

   • Now, scroll down to the <script> section of your code. Add the new JavaScript function that this button calls:

     function sendResultToBubble() {
       // Find the calculator's display element. The original code uses a 'result' id.
       const display = document.getElementById('result');
       
       // Get the current value from the display.
       const value = display.value;
       
       // Call the bubble function, converting the text value to a number.
       bubble_fn_calculatorResult(parseFloat(value));
     }
     

   • Note: The exact id of the display element ('result') might vary based on the specific calculator code you used. Check the index.html file from the GitHub repository to confirm.

4. Create the Bubble Workflow:

   • Go to the Workflow tab.
   • Click "Click here to add an event..." and select Elements > A JavascriptToBubble event is triggered. Choose the JavascriptToBubble element you just added.
   • For the first action, select Element Actions > Show an alert.
   • In the "Message" box, type: The calculator result is: and then use the dynamic data inserter to select This JavascriptToBubble's value.

5. Test It: Preview the page. Perform a calculation with the embedded calculator. Now, click your new "Send Result to Bubble" button. You should see a Bubble alert pop up with the correct result!

Conclusion

You have now successfully built a bridge between the isolated world of an embedded JavaScript tool and your Bubble application's powerful workflow engine. This is a critical milestone for your project.

Here are the key takeaways from today's lesson:

• The Toolbox plugin is a free, essential tool for advanced Bubble development, enabling communication with custom code.
• The JavascriptToBubble element acts as a receiver, allowing JavaScript to send data to Bubble.
• The process involves three main steps: configuring the JavascriptToBubble element (defining a suffix and enabling events), calling the corresponding bubble_fn_...() function from your JavaScript, and creating a workflow in Bubble to catch the triggered event and use its value.

You've learned how to get data out of your custom tool. In our next lesson, we will complete the circle. We'll explore another feature of the Toolbox plugin—the Run javascript action—to send data from Bubble inputs into your embedded JavaScript tool. This will unlock the ability to create truly dynamic tools that are controlled by your Bubble UI.