How to write custom logic with JavaScript in Bubble.io: Step-by-Step Guide

Go to the Plugins tab in your Bubble editor and click '+ Add plugins'. Search for 'Toolbox' — it is one of the most popular free plugins. Click Install. The Toolbox plugin adds several capabilities including 'Run javascript' workflow action, 'Javascript to Bubble' element, 'Expression' element, and 'Server Script' action. After installation, you will see these new options in your element palette and workflow actions.

Create a button on your page labeled 'Run Script'. Go to the Workflow tab and add a workflow: 'When Button Run Script is clicked'. Add an action from the Plugins section: 'Run javascript'. In the script field, you can write any JavaScript code. For a simple test, enter: alert('Hello from JavaScript!'); — this will show a browser alert. You can reference Bubble dynamic data inside the script by clicking 'Insert dynamic data' within the code editor. For example, to use an input value: var name = "dynamic:Input Name's value"; alert('Hello, ' + name + '!');

The Run JavaScript action can execute code but cannot directly return values to Bubble. To send data back, use the 'Javascript to Bubble' element. In the Design tab, drag a 'Javascript to Bubble' element from the plugin elements section onto your page. In its properties, give it a descriptive suffix (e.g., 'js_result'), set the type to 'text' (or number, date, etc. depending on what you are returning), and optionally check 'Publish value with a workflow event' if you want to trigger a workflow when a value is received. Now in your Run JavaScript action, call: bubble_fn_js_result('your return value here'); — this publishes the value to the element, which you can reference anywhere as 'JavascriptToBubble js_result's value'.

A common use case is copying text to the clipboard, which Bubble cannot do natively. Add a Multiline Input element and a Button labeled 'Copy to Clipboard'. Create a workflow on the button click. Add a Run JavaScript action with this script: var textToCopy = "dynamic:MultilineInput's value"; navigator.clipboard.writeText(textToCopy).then(function() { bubble_fn_js_result('Copied!'); }).catch(function(err) { bubble_fn_js_result('Failed: ' + err); }); — Then add a second action: 'Show notification' or update a Text element with the JavascriptToBubble element's value to confirm the copy.

1var textToCopy = "dynamic:MultilineInput's value";
2navigator.clipboard.writeText(textToCopy).then(function() {
3  bubble_fn_js_result('Copied!');
4}).catch(function(err) {
5  bubble_fn_js_result('Failed: ' + err);
6});

For more complex scenarios, you may need to pass structured data. Use JSON.stringify and JSON.parse to handle objects. In your Run JavaScript action, you can build a JSON object from multiple Bubble values: var data = { name: "dynamic:Input Name's value", email: "dynamic:Input Email's value", amount: parseFloat("dynamic:Input Amount's value") }; var result = JSON.stringify(data); bubble_fn_js_result(result); — On the Bubble side, you can parse this JSON string using the Toolbox plugin's Expression element or by passing it to an API Connector call.