How to run Javascript in Bubble

In this tutorial, we’ll explore how to run JavaScript within Bubble, a powerful no-code platform that allows you to build applications without writing traditional code. Although Bubble handles most functionality visually, there are times when custom JavaScript can enhance your app’s capabilities. This tutorial will walk you through the step-by-step process of incorporating JavaScript into your Bubble.io projects, enabling you to unlock more advanced features and interactions with ease.

1. Introduction

In this tutorial, we run a script that adds the numbers in 2 inputs and displays the result with an alert. From installing plugins to running scripts and previewing changes, follow the steps to streamline this process effectively.

2. Open the Plugins tab

3. Click "Add plugins"

4. Install the Toolbox plugin

Toolbox plugin makes it possible to run our scripts in Bubble.io

Type "toolbox" in the search bar and install the plugin

5. Open the Design tab

6. Add input element to page

7. Set the input content format to integer

Choose the "Integer" option

8. Add one more input

Set the format of this input to "integer"

9. Add button element to page

10. Click "Add workflow"

Add workflow for button

11. Add "Run javascript" action

Select the "Run javascript" action

12. Type your code

We type the code we want to run here.

; // First number let number2 = ; // Second number // Calculate the sum of the two numbers let sum = number1 + number2; // Display the sum using an alert alert("The sum is: " + sum);

13. Assign input values ​​to variables

Set <your_input_value> sections in the code as input values ​​with "insert dynamic data"

14. Preview the changes made

15. Enter values ​​into inputs

16. Time to view result

Click the button to view the result and run the script we added.

By following the example of adding two numbers and displaying the result via an alert, you've seen how easy it is to integrate JavaScript into your Bubble.io projects. With just a few steps, you can expand the functionality of your application and handle more dynamic interactions. Now that you know how to run JavaScript in Bubble.io, you can continue experimenting and enhancing your app's user experience with custom code!

The Tool Builders

Ready to collaborate, learn, and create alongside passionate tool builders? Join today and be part of a community dedicated to excellence.

Join the community