CopyClip

Set any element to copy a string value to the clipboard when clicking on it

Overview

The CopyClip attribute allows you to add copy-to-clipboard functionality to any element on your page. When users click the element, it copies specified text to their clipboard and optionally displays a success message.

Attribute Syntax

Elements

fs-copyclip-element · string · required

Defines the type of element in the copy workflow:

• click - The trigger element that users click to copy
• copy-this - The target element whose content will be copied
• copy-sibling - A sibling element whose content will be copied

Settings

fs-copyclip-text · string

Defines the exact text that will be copied to the clipboard. If not set, the attribute will copy content from the target element.

fs-copyclip-message · string

Defines the success message displayed in the trigger element after copying. The message appears temporarily and then reverts to the original text.

fs-copyclip-duration · number · default: "1000"

Defines how long (in milliseconds) the success state persists before reverting to the original state.

fs-copyclip-activeclass · string · default: "is-copyclip-active"

Defines the CSS class added to the trigger element during the success state. Use this to style the active state.

Usage Examples

Basic Copy Button

<!-- Copy text from a code block -->
<div>
  <code fs-copyclip-element="copy-this">npm install finsweet</code>
  <button fs-copyclip-element="click">Copy</button>
</div>

Common Use Cases

Code Snippet Copy

Add one-click copying for code examples, making it easy for users to copy commands, API keys, or code snippets without manual selection.

Contact Information

Provide quick copying of email addresses, phone numbers, or other contact details with visual feedback.

Share Links

Enable users to copy shareable URLs, referral codes, or social media handles with a single click.

Form Data

Allow users to copy generated values like confirmation codes, transaction IDs, or temporary passwords.

Styling the Active State

Use the active class to provide visual feedback:

.copy-success {
  background-color: #10b981;
  color: white;
  transition: all 0.3s ease;
}

The attribute uses the Clipboard.js library internally to ensure cross-browser compatibility.