# Copy to Clipboard

The "Copy to Clipboard" action allows users to copy text, URLs, field values, or formatted data to their clipboard with a single click. This is perfect for sharing information, copying IDs, URLs, or any text-based data that users need to paste elsewhere.

## When to Use Copy to Clipboard

Use the Copy to Clipboard action when you want to:

* **Copy record identifiers**: Order numbers, tracking IDs, reference codes
* **Share links**: Deep links to records, external URLs, shareable links
* **Copy contact information**: Email addresses, phone numbers, addresses
* **Export formatted data**: JSON, CSV lines, code snippets
* **Share text content**: Descriptions, notes, formatted messages
* **Quick data transfer**: Copy data for pasting into external tools

## Setting Up Copy to Clipboard Action

### Step 1: Create the Action Button

1. In build mode, navigate to the record page where you want the button
2. Click the "+" button in the Action Buttons section
3. Click the edit icon to configure the button

### Step 2: Configure Button Appearance

* **Button Text**: Clear action label (e.g., "Copy Link", "Copy Email", "Copy ID")
* **Appearance**: Usually Default or Information (blue)
* **Icon**: Copy icon, clipboard icon, or link icon
* **Button Tooltip**: Explain what will be copied
* **Type**: "One click" (copies immediately without confirmation)

### Step 3: Configure What to Copy

**What Should Happen**: Select **Copy to clipboard**

**Text to Copy**: Enter the text or use dynamic field values

### Dynamic Text Options

You can copy:

* **Static text**: `"Contact us at support@company.com"`
* **Field values**: `{{record.order_number}}`
* **Formatted text**: Combine text and fields
* **Multiple fields**: `{{record.first_name}} {{record.last_name}}`
* **URLs**: `https://app.company.com/records/{{record.id}}`
* **Complex templates**: Multi-line formatted text

### Step 4: Configure Success Notification

* **Notification**: Turn **On** (recommended)
* **Notification Type**: **Success** (green) or **Information** (blue)
* **Notification Text**: Confirm what was copied (e.g., "Link copied!", "Email copied to clipboard")

## Common Use Cases

### 1. Copy Record ID or Reference Number

**Scenario**: Copy order number for customer support

**Button Configuration:**

* Button Text: "Copy Order #"
* Icon: Copy icon
* Type: One click

**Copy Configuration:**

* Text to Copy: `{{record.order_number}}`
* Notification: "Order number copied!"

***

### 2. Copy Email Address

**Scenario**: Copy customer email to paste into email client

**Button Configuration:**

* Button Text: "Copy Email"
* Icon: Clipboard icon

**Copy Configuration:**

* Text to Copy: `{{record.email}}`
* Notification: "Email address copied to clipboard"

***

### 3. Copy Phone Number

**Scenario**: Copy formatted phone number

**Button Configuration:**

* Button Text: "Copy Phone"
* Icon: Phone icon

**Copy Configuration:**

* Text to Copy: `{{record.phone_number}}`
* Notification: "Phone number copied!"

***

### 4. Copy Deep Link to Record

**Scenario**: Share a direct link to the record

**Button Configuration:**

* Button Text: "Copy Link to Record"
* Icon: Link icon

**Copy Configuration:**

* Text to Copy: `https://app.company.com/orders/{{record.id}}`
* Notification: "Record link copied to clipboard"

**Use Case**: Users can paste this link in emails, chat, or documentation to reference specific records.

***

### 5. Copy Formatted Address

**Scenario**: Copy full mailing address

**Button Configuration:**

* Button Text: "Copy Address"
* Icon: Map pin icon

**Copy Configuration:**

* Text to Copy:

```
{{record.street_address}}
{{record.city}}, {{record.state}} {{record.zip_code}}
{{record.country}}
```

* Notification: "Address copied to clipboard"

***

### 6. Copy API Key or Token

**Scenario**: Copy authentication credentials

**Button Configuration:**

* Button Text: "Copy API Key"
* Icon: Key icon
* Appearance: Warning

**Copy Configuration:**

* Text to Copy: `{{record.api_key}}`
* Notification: "API key copied! Keep this secure."

**Security Note**: Use visibility rules to restrict access to sensitive credentials.

***

### 7. Copy Tracking Link

**Scenario**: Copy shipping tracking URL

**Button Configuration:**

* Button Text: "Copy Tracking Link"
* Icon: Package icon

**Copy Configuration:**

* Text to Copy: `https://tracking.courier.com?tracking={{record.tracking_number}}`
* Notification: "Tracking link copied!"

***

### 8. Copy Formatted Message Template

**Scenario**: Copy pre-written customer message

**Button Configuration:**

* Button Text: "Copy Customer Message"
* Icon: Message icon

**Copy Configuration:**

* Text to Copy:

```
Hello {{record.customer.first_name}},

Your order #{{record.order_number}} has been shipped!

Tracking number: {{record.tracking_number}}
Estimated delivery: {{record.estimated_delivery_date}}

Thank you for your business!
```

* Notification: "Message template copied!"

**Use Case**: Customer service reps can copy and paste into email clients with personalized data already filled in.

***

### 9. Copy JSON Data

**Scenario**: Copy record data in JSON format for developers

**Button Configuration:**

* Button Text: "Copy as JSON"
* Icon: Code icon

**Copy Configuration:**

* Text to Copy:

```json
{
  "id": "{{record.id}}",
  "order_number": "{{record.order_number}}",
  "customer": "{{record.customer.name}}",
  "total": {{record.total}},
  "status": "{{record.status}}"
}
```

* Notification: "JSON data copied"

***

### 10. Copy Share Text for Social Media

**Scenario**: Copy pre-formatted social media post

**Button Configuration:**

* Button Text: "Copy Share Text"
* Icon: Share icon

**Copy Configuration:**

* Text to Copy:

```
Check out {{record.product_name}}!
{{record.description}}

Learn more: {{record.product_url}}
#product #announcement
```

* Notification: "Share text copied! Ready to post."

***

### 11. Copy Meeting/Calendar Details

**Scenario**: Copy meeting information

**Button Configuration:**

* Button Text: "Copy Meeting Details"
* Icon: Calendar icon

**Copy Configuration:**

* Text to Copy:

```
Meeting: {{record.title}}
Date: {{record.meeting_date}}
Time: {{record.meeting_time}}
Location: {{record.location}}
Attendees: {{record.attendees}}

Join URL: {{record.meeting_url}}
```

* Notification: "Meeting details copied!"

***

### 12. Copy Discount Code

**Scenario**: Copy promotional code for customers

**Button Configuration:**

* Button Text: "Copy Discount Code"
* Icon: Tag icon
* Appearance: Success

**Copy Configuration:**

* Text to Copy: `{{record.discount_code}}`
* Notification: "Discount code copied: {{record.discount\_code}}"

***

## Advanced Use Cases

### Copy with Conditional Content

While you can't use conditional logic in the copy text directly, you can create multiple buttons with visibility rules:

**Button 1** (show when Status = "Shipped"):

* Text: "Copy Shipping Message"
* Copy: Message about shipped status

**Button 2** (show when Status = "Delivered"):

* Text: "Copy Delivery Message"
* Copy: Message about delivery

***

### Copy Multiple Formats

Provide different copy buttons for different formats:

**Button 1**: "Copy Plain Text"

* Copy: Simple text version

**Button 2**: "Copy Markdown"

* Copy: Markdown-formatted version

**Button 3**: "Copy HTML"

* Copy: HTML-formatted version

***

### Copy for Different Audiences

**Button 1**: "Copy Customer Message"

* Copy: Customer-friendly text

**Button 2**: "Copy Internal Notes"

* Copy: Internal reference information

Use visibility rules to show appropriate buttons to different user roles.

***

## Best Practices

### Button Labels

* ✅ Be specific about what's being copied ("Copy Email" not just "Copy")
* ✅ Use action-oriented text starting with "Copy"
* ✅ Keep labels concise
* ✅ Match icon to what's being copied

### Notification Messages

* ✅ Confirm what was copied
* ✅ Keep notifications brief
* ✅ Use Success (green) type for confirmation
* ✅ Include actual value if helpful: "Copied: order-12345"

### Copy Content

* ✅ Format text for paste destination
* ✅ Include line breaks where appropriate
* ✅ Use proper spacing and formatting
* ✅ Test by pasting into target applications
* ✅ Keep it concise when possible

### Security

* ✅ Use visibility rules for sensitive data
* ✅ Warn users when copying credentials
* ✅ Consider logging copy actions for audit
* ✅ Don't copy passwords in plain text if avoidable
* ✅ Restrict access to API keys and tokens

### User Experience

* ✅ Always use "One click" type (no confirmation needed)
* ✅ Show clear success notification
* ✅ Test on different devices and browsers
* ✅ Provide tooltip context
* ✅ Place copy buttons near relevant data

***

## Troubleshooting

### Copy Doesn't Work

**Issue**: Clicking button doesn't copy to clipboard

**Solutions**:

* **Browser permissions**: Some browsers require user permission for clipboard access
* **HTTPS required**: Clipboard API requires secure context (HTTPS)
* **User interaction**: Some browsers require direct user click (not programmatic)
* **Incognito mode**: Test in incognito to rule out extensions
* **Browser compatibility**: Ensure browser supports Clipboard API

***

### Dynamic Fields Don't Populate

**Issue**: {{record.field}} appears as literal text

**Solutions**:

* Verify field name is spelled correctly (case-sensitive)
* Check that field exists on the current record
* Ensure field has a value (not null/empty)
* For related fields use: {{record.relationship.field}}
* Test with a record that has all fields populated

***

### Formatted Text Loses Formatting

**Issue**: Line breaks or spacing don't copy correctly

**Solutions**:

* Use explicit line breaks in copy text
* Test pasting into different applications
* Some apps strip formatting when pasting
* Consider using Markdown or HTML if target supports it
* Provide "Copy Plain Text" alternative

***

### Nothing Shows in Clipboard

**Issue**: Paste shows nothing or shows wrong content

**Solutions**:

* Check notification confirms copy succeeded
* Try pasting immediately after copying
* Test in simple text editor first (like Notepad)
* Clear clipboard before testing
* Check for browser extensions interfering

***

### Copy Works on Desktop, Not Mobile

**Issue**: Copy action fails on mobile devices

**Solutions**:

* Some mobile browsers have limited clipboard support
* Ensure HTTPS is used
* Test on different mobile browsers
* Mobile browsers may show paste prompt
* Provide fallback: show text in modal to manually copy

***

### Security/Permissions Error

**Issue**: Browser blocks clipboard access

**Solutions**:

* User must grant clipboard permission
* Ensure site is HTTPS
* Check browser clipboard permissions settings
* Some corporate policies block clipboard access
* Test in different browser

***

## Browser Compatibility

### Modern Browsers (Full Support)

* ✅ Chrome/Edge 66+
* ✅ Firefox 63+
* ✅ Safari 13.1+
* ✅ Opera 53+

### Mobile Browsers

* ✅ iOS Safari 13.4+
* ✅ Chrome Android 84+
* ⚠️ Some limitations on older mobile browsers

### Fallback Strategies

If clipboard API isn't supported:

* Show text in a modal for manual copying
* Use older execCommand method (deprecated but wider support)
* Provide "Copy" instructions to users

***

## Security Considerations

### Sensitive Data

* ⚠️ Be cautious copying passwords, API keys, tokens
* ⚠️ Use visibility rules to restrict access
* ⚠️ Consider encryption for very sensitive data
* ⚠️ Warn users about security when copying credentials
* ⚠️ Log copy actions for audit trails when needed

### Clipboard History

* ⚠️ Users' clipboard managers may store copied data
* ⚠️ Don't copy sensitive data users don't expect
* ⚠️ Warn if data will be in clipboard history
* ⚠️ Consider time-limited tokens instead of permanent keys

### User Privacy

* ⚠️ Don't copy more data than necessary
* ⚠️ Respect user expectations about what's being copied
* ⚠️ Clear notification messages about what was copied
* ⚠️ Give users control over what they copy

***

## Accessibility

### Keyboard Access

* ✅ Button should be keyboard-accessible
* ✅ Enter/Space should trigger copy action
* ✅ Focus indication should be clear
* ✅ Success notification should be announced to screen readers

### Screen Readers

* ✅ Use descriptive button text
* ✅ Success notification should be audible
* ✅ ARIA labels if needed
* ✅ Indicate copy action in button name

***

## Mobile Considerations

### Mobile-Specific Behaviors

* Mobile browsers may show "Copied!" toast notification
* Some mobile OS show paste suggestion after copy
* Touch targets should be large enough (44x44px minimum)
* Test on actual mobile devices

### Mobile UX Best Practices

* Make buttons touch-friendly
* Provide clear visual feedback
* Test with mobile keyboards open
* Consider modal fallback for problematic browsers

***

## Combining with Other Actions

### Copy Then Navigate

**Step 1 - Copy to Clipboard:**

* Copy: Tracking URL

**Step 2 - Navigate To:**

* Navigate to: Customer page

**Use Case**: Copy information, then go to next step in workflow.

***

### Show Message Then Copy

**Step 1 - Show Message:**

* Display instructions or context

**Step 2 - Copy to Clipboard:**

* Copy: Relevant data

**Use Case**: Explain what they're copying and why.

***

### Update Then Copy

**Step 1 - Update Record:**

* Generate new API key

**Step 2 - Copy to Clipboard:**

* Copy: New API key

**Use Case**: Create new credential then immediately copy it.

***

## Testing Copy Actions

### Testing Checklist

* [ ] Copy action works on first click
* [ ] Success notification appears
* [ ] Copied text is correct (no extra spaces, formatting issues)
* [ ] Dynamic fields populate correctly
* [ ] Test with empty/null fields
* [ ] Test in different browsers
* [ ] Test on mobile devices
* [ ] Test with keyboard only
* [ ] Test with screen reader
* [ ] Test pasting into various applications

### Common Paste Destinations

* Text editors (Notepad, TextEdit)
* Email clients (Gmail, Outlook)
* Chat applications (Slack, Teams)
* Code editors (VS Code)
* Spreadsheets (Excel, Google Sheets)
* Web forms


---

# Agent Instructions: 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://guides.noloco.io/actions/action-buttons/copy-to-clipboard.md?ask=<question>
```

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.