How To Copy Text and Links to Clipboard in Bubble.io (Complete Guide)

7th of October, 2025

Building your own copy-to-clipboard feature allows users to quickly copy text, links, and data from your Bubble application into your device’s clipboard. This feature is a massive help whenever users need to share links or copy important data such as phone numbers, security codes, and more!

In this guide, we’ll walk through how to install the necessary plugin, set up copy buttons, create success notifications, and implement various copy methods for different use cases.

1 – Install the Copy to Clipboard Plugin

Before building the copy functionality, you’ll need to install the Air Copy to Clipboard plugin from Bubble’s plugin marketplace.

Here’s how to install it:

1. Navigate to the Plugins tab in your Bubble editor (located in the left sidebar).
2. Click Add plugins.
3. Search for “Air Copy to Clipboard” in the plugin marketplace.
4. Click Install on the Air Copy to Clipboard plugin.

2 –  Enable HTML Element IDs

To copy content from specific elements on your page, you’ll need to enable HTML element IDs in your Bubble settings.

Here’s how:

1. Navigate to the Settings tab in your Bubble editor.
2. Select the General subtab.
3. Scroll to the bottom of the page and check the option Expose the option to add an ID attribute to HTML elements.

This setting allows you to assign unique IDs to elements, which the earlier plugin uses to identify which content to copy.

3 – Design the Basic Interface

For this guide, we’ll create a simple interface to test our clipboard functionality.

Add a Copy Button

First, add a button that users will click to trigger the copy action.

1. In the Design tab, navigate to Visual Elements and drag a Button onto your page.
2. Center the button horizontally on the page.
3. Add margin to the top for proper spacing.
4. Update the button label to Copy to clipboard.
5. Add padding (around 45px) to make the button more visually appealing.

Add a Text Element to Copy

For this example, we’ll add a simple text element that users can copy.

1. Drag a Text element onto the page below your button.
2. Center the text horizontally.
3. Add margin at the top for spacing.
4. Enter sample text such as “This is a test text element”.

Add a Multi-line Input for Testing

To verify that our copy functionality works correctly, let’s add a multi-line input element where users can paste the copied content.

1. Add a Multiline Input element to the page.
2. Center it horizontally and add top margin.
3. Adjust the width as needed for better visual presentation.

A multi-line input is particularly useful if you’re copying large blocks of text, such as blog posts or lengthy descriptions, as it can accommodate multiple rows of content.

4 – Create a Success Notification Popup

When users successfully copy content, it’s helpful to provide visual feedback through a popup notification.

Design the Popup

1. In the left sidebar, click Add element and search for Popup.
2. Add a popup to your page.
3. Set the popup height to approximately 150px.
4. Add a Text element to the popup with the message “Successfully copied to clipboard”.
5. Make the text bold and center it horizontally.
6. Add margin at the top (around 5px).

Add a Success Icon

1. Add an Icon element to the popup.
2. Navigate to the Feather icon set.
3. Search for and select the check icon.
4. Change the icon color to green to indicate success.
5. Add 5px of margin to the top.

5 – Build the Copy Workflow

Now you’ll create the workflow that handles the copy action when users click your button.

Assign an Element ID

Before setting up the workflow, assign an ID to the text element you want to copy:

1. Select the text element on your page.
2. In the Appearance tab, locate the ID Attribute field.
3. Enter a unique identifier such as “test1”.

Create the Copy Action

1. Select your Copy to clipboard button.
2. Click Start/Edit workflow to open the workflow editor.
3. Add a new action and select the Copy to clipboard from element action
4. In the Element ID field, enter “test1” (or whatever ID you assigned to your text element).

Add Success Feedback

To show our success pop-up after copying:

1. Add another action to the workflow: Show an element.
2. Select Popup A element (your success notification popup).
3. Set up an Add a Pause before next action step and set it to 1000 milliseconds (1 second).
4. Add a final action: Hide and select Popup A to dismiss the notification.

This workflow ensures users see a confirmation that their content was copied successfully, then automatically dismisses the notification after one second.

6 – Copy Page URLs and Dynamic Links

One powerful use case for the copy-to-clipboard feature is allowing users to copy and share page URLs, such as referral links or profile pages.

Copy the Current Page URL

To copy the current page URL:

1. In your copy workflow, update the Text to copy field.
2. Insert dynamic data and select Current page URL.

When users click the copy button, the entire URL of the current page will be copied to their clipboard.

Add Dynamic Parameters to URLs

For more advanced use cases, you can append dynamic data to URLs:

1. After selecting Current page URL, click the more… option.
2. Select :append from the list of operators.
3. Add the dynamic parameter you want to append, such as Current User’s Slug or any other unique identifier.

This approach is particularly useful for creating shareable referral links or user-specific profile URLs. For example, if your app is at “myapp.com/profile”, appending the current user’s slug would create a link like “myapp.com/profile/john-smith”.

Conclusion

You now have a fully functional copy-to-clipboard feature in your Bubble application. This functionality enables users to easily copy text elements, input field content, and dynamic URLs directly to their clipboard with visual feedback.

For more Bubble tutorials on setting up workflows,  check out our guide on building custom events in Bubble!

Get the Bubble Crash Course for FREE