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!

Support the site and keep it free ❤️

I love tech startups and the Bubble community, and have made it my mission to try and create content that’s valuable, easy to follow and entertaining.

Creating content next to full-time consulting work is time-consuming; if you’d like to support it and keep the site free for everyone, please consider buying me a coffee or becoming a supporting member.

Buy Me A Coffee

Share:

More Posts

What is a Data Concept?

The Data Concept is a framework on how to think about the data in your app in order to set up an efficient database structure.

Satellite Data Types in Bubble

In our last Bubble.io article, we looked at how we can use the Data Weight analogy to visualize how the structure of our Data Types can affect performance. But what do we do with the information? What is a Satellite

What is Data Weight?

Data Weight is a way to think about your database structure when you build for performance.

Leave A Reply

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

*