How to copy text to the clipboard in Bubble

It’s sometimes useful to copy some string of text to the clipboard. Bubble at the time of writing doesn’t have that feature built in, but it’s pretty easy to set up. For this, we’re going to use the Toolbox plugin and a short snippet of Javascript that you can copy/paste. The plugin will allow us to actually run Javascript from a Bubble action, and the script will let us copy the text to the clipboard.

Total Time: 3 minutes

Install the plugin

First, go to the Bubble plugin store and install the Toolbox plugin. This excellent plugin includes a several different elements and actions that I recommend you explore if you’re unfamiliar with them. For this one, we’ll only need the workflow action Run Javascript.
The Toolbox plugin in the Bubble plugin store

Place an action element on the page

We need something to trigger the copy action, so place a button or icon on the page. Then click the Start/Edit workflow button to enter the workflow editor.

The Start/Edit workflow button in Bubble

Create the action and paste the code

Click to add an action in the workflow editor, and pick Run Javascript. You’ll find it under the Plugins category.
The Run Javascript action step in the Bubble workflow editor
Then, paste the following code, and replace the DYNAMIC DATA with whatever content you want to copy, including values from an input field or any other kind of text :

var myContent = "DYNAMIC DATA";
var my = $('<input>').val(myContent).appendTo('body').select()
document.execCommand('copy')

Thanks to Lantzgould from the Bubble forum for sharing the javascript snippet!

Share:

More Posts

Understanding Bubble Groups

Bubble has five different group types. While they’re all used as containers, their use differs greatly. This article explains the difference between them in detail.

Bubble’s new expressions: SPLIT BY and ARBITRARY TEXT explained

Bubble quietly launched two new features in July 2021 that are quite useful: split by and arbitrary text. They’re both expressions that solve tiny problems that otherwise would require cumbersome workarounds, and are absolutely worth checking out. You’re not gonna

Combining icons and text in Bubble

Placing icons inside of your text elements by using BBCode is a quick way to reduce the total number of elements on your page and make sure your app runs smoothly. Read on for how to do it.

Leave A Reply

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

*