How to copy text to the clipboard in Bubble

Time needed: 3 minutes.

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.

  1. 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

  2. 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

  3. 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

Custom states VS URL parameters for navigation in Bubble

A lot of Bubble tutorials and guides describing page navigation default to using custom states for hiding and showing Groups. While states will work just fine in many cases, it has its limitations and shouldn’t be used simply because it’s

How to add keyboard shortcuts to your Bubble App

Keyboard shortcuts have been a natural part of desktop applications since… well, forever. For web applications it’s really in the last few years that they’ve started to become commonplace enough for users to actually remember to use them. Not to

Bubble vs WordPress – what’s the difference?

When people first hear about Bubble, they often quickly draw the comparison to WordPress. It’s not that far-fetched – after all, they’re both platforms that allow non-coders to set up a website, create content and publish it for the world

How to do complex calculations in Bubble

The Bubble expression editor – you know… this one: … is pretty good! But if you’re trying to do more complex mathematical expressions, you’ll find that the built-in editor has its limits. You can easily set up basic arithmetic like

1 Comment


How to run Javascript from an action in Bubble - Amlie Solutions
April 26, 2021 at 22:11
Reply

[…] is a pretty easy programming language and can greatly extend Bubble’s features, like copying text to the clipboard. If you’re not fluent in computerese, make sure to visit the Bubble forum, where you’ll […]


Leave A Reply

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

*

Useful articles and tips

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

You have Successfully Subscribed!

Share This