> For the complete documentation index, see [llms.txt](https://docs.buildnatively.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildnatively.com/guides/integration/clipboard.md).
# Clipboard
## 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.
{% hint style="warning" %}
Only plain text is supported. Copying images or other media is not available.
{% endhint %}
## Prerequisites
{% hint style="success" %}
This feature is available in all plans. [See all plans](https://docs.buildnatively.com/getting-started/subscription-plans)
{% endhint %}
## 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
{% tabs %}
{% tab title="Bubble.io Plugin" %}
**Check Plugin**
Before starting, verify if the Natively plugin is already installed in your Bubble project.
1. Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
2. **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.
{% endtab %}
{% tab title="JavaScript SDK" %}
**Check SDK**
Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.
1. Open your project's main HTML file (or header settings) and look for the Natively script tag inside the `` section.
2. Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., `@2.20.0`).
```javascript
```
{% endtab %}
{% tab title="AI Agents" %}
**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 of index.html. If missing or outdated, add it: For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started
```
{% endtab %}
{% endtabs %}
### Setup logic
{% tabs %}
{% tab title="Bubble.io Plugin" %}
### \[Element] Natively - Clipboard
#### Events:
* Clipboard value received
#### States:
* **Latest clipboard value** - text
#### Actions:
* Copy text to clipboard
* Get text from the clipboard
{% endtab %}
{% tab title="JavaScript SDK" %}
```javascript
// ============================================================================
// 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 ---
```
{% endtab %}
{% tab title="AI Agents" %}
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
{% hint style="warning" %}
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".
{% endhint %}
{% endtab %}
{% endtabs %}
### 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](/guides/integration/toast-banner.md) 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](/natively-platform/features/deep-links.md) 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.
[^1]: Replace this placeholder
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.buildnatively.com/guides/integration/clipboard.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
