✂️Clipboard

Copy text to and read text from the device clipboard within your app.

What is Clipboard?

The Clipboard feature lets your app interact with the device clipboard - copying text programmatically or reading whatever the user has previously copied. This is useful for one-tap copy actions like referral codes, wallet addresses, tracking numbers, or any text your users might want to share or reuse elsewhere.

Only plain text is supported. Copying images or other media is not available.

Prerequisites

This feature is available in all plans. See all plans

Implementation

Choose your integration method below: Bubble.io Plugin (No-Code), JavaScript SDK (Code), or AI Agents (for AI-powered editors like Lovable, Base44, and Replit).

Initialization

Check Plugin

Before starting, verify if the Natively plugin is already installed in your Bubble project.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
Check Installed Plugins: Look through your list of installed plugins for "Natively iOS & Android app builder".
- If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.

If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.

Check SDK

Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.

Open your project's main HTML file (or header settings) and look for the Natively script tag inside the <head> section.
Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., @2.26.0).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

Initialize the SDK

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.

Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.

Check if the following Natively SDK script is present in the <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup logic

[Element] Natively - Clipboard

Events:

Clipboard value received - fires when a text value is successfully retrieved from the clipboard.

States:

Latest clipboard value - the text currently stored in the device clipboard.

Actions:

Copy text to clipboard - copies the provided text to the device clipboard:
- text - the plain text string to copy.
Get text from the clipboard - reads the current text value from the device clipboard. Listen to the Clipboard value received event to access the result.

// ============================================================================
// NATIVELY CLIPBOARD - DOCUMENTATION & EXAMPLES
// ============================================================================

// Initialize
const clipboard = new NativelyClipboard();

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// clipboard.copy(text)
//   - Copies the provided text to the device clipboard.
//   - text: string — the text to copy. Only plain text is supported.
//
// clipboard.paste(callback)
//   - Reads the current text value from the device clipboard.
//   - Returns the text via callback.

// ============================================================================
// CALLBACK RESPONSE FIELDS
// ============================================================================
// resp.text  - The text currently stored in the device clipboard.

// --- Clipboard. Copy Example. Start ---

clipboard.copy("Your text here");

// --- Clipboard. Copy Example. End ---


// --- Clipboard. Paste Example. Start ---

const clipboard_callback = function(resp) {
    console.log(resp.text); // the text currently in the clipboard
};

clipboard.paste(clipboard_callback);

// --- Clipboard. Paste Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively JS SDK: const clipboard = new NativelyClipboard(); // clipboard.copy(text) — copies plain text string to device clipboard. text: string — the text to copy. No callback required. // clipboard.paste(callback) — reads current text from device clipboard. Returns resp.text in callback. // resp.text — the text currently stored in the device clipboard. // Example copy: clipboard.copy("Your text here"); // Example paste: const clipboard_callback = function(resp) { console.log(resp.text); }; clipboard.paste(clipboard_callback); For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://docs.buildnatively.com/guides/integration/clipboard

Replace the placeholder at the beginning with a description of what you want to build - for example: "Add a copy button next to the referral code that shows a confirmation message when tapped".

How to use

One-tap copy

The most common use case is a copy button next to a piece of text - a referral code, promo code, wallet address, or invite link. Trigger clipboard.copy() on button click and optionally show a Toast/Banner confirmation so the user knows the copy was successful.

Reading clipboard on app open

You can read the clipboard when a page loads to pre-fill a form field - for example, if a user copied a promo code from another app before opening yours. Use clipboard.paste() on page load, and populate the relevant input field with the result.

No permission required

Unlike some other device features, the Clipboard does not require any permission request on iOS or Android. It works silently in the background.

Troubleshooting

Paste method returns empty text

The clipboard may be empty, or the user hasn't copied anything yet. Always handle the case where resp.text is empty or null in your callback before using the value.

Copied text not appearing in another app

Verify that clipboard.copy() is being triggered correctly by logging the text value before passing it to the method. Ensure the text is a plain string - objects or arrays are not supported.

Clipboard not working in Preview

The Clipboard feature works in the Natively Preview app. If you experience issues, try triggering a full build and testing on a real device.

PreviousBrowser Info NextControl Style & Colors

Last updated 24 days ago