Copy to Clipboard

Instructions

Overview

Add a copy to clipboard functionality to your website.

Getting Started

Quick Start

1. Click the Copy Component button on the top of the page.
2. Paste the component into your Webstudio site.

Manual Start

1. Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Copy%20to%20Clipboard/copy-to-clipboard-v1.0.js"></script>[/code-block]

2. Add the Required Elements: Set up your copy functionality with these elements:

Required Elements

• Trigger: Add dv-clipboard-trigger="groupID" to the button or element that initiates the copy
• Target: Add dv-clipboard-target="groupID" to the element containing the text to be copied
• Success Feedback (optional): Add dv-clipboard-success="groupID" to show on successful copy
• Error Feedback (optional): Add dv-clipboard-error="groupID" to show on failed copy

Advanced Options

• By default, feedback elements are shown alongside the trigger and target elements
• Add "replace-" modifiers to feedback elements for special behavior:
  • dv-clipboard-success="groupID replace-trigger" - Replaces trigger with success message
  • dv-clipboard-success="groupID replace-target" - Replaces target with success message
  • dv-clipboard-error="groupID replace-trigger" - Replaces trigger with error message
  • dv-clipboard-error="groupID replace-target" - Replaces target with error message

Styling Tips

• Feedback elements display for 2 seconds by default
• Style your trigger and feedback elements according to your design needs

Notes

• Use unique groupIDs when implementing multiple clipboard instances on the same page
• groupIDs can be any string containing letters, numbers, or dashes.
• The clipboard component works with modern browsers that support the Clipboard API