The Copy to Clipboard widget is designed to let visitors easily copy text content with a click.
General#
Copy Text From#
Choose the source of the text to copy:
- Text Field – You manually enter the text in the Copy Text box.
- CSS Selector – Dynamically grab the text from an element on the page by specifying its CSS selector.
Copy Text#
If Text Field is selected, you enter the text you want copied when the user clicks the button.
Add Prefix#
Specify optional text to prepend before the copied content.
Add Suffix#
Specify optional text to append after the copied content.
On Copy Actions#
You can enable interactive feedback when the copy action occurs:
- Shake Button: Toggle to make the button shake visually to confirm the copy action.
- Change Text: Toggle to change the button’s label text after copying (e.g., change "Copy" to "Copied!").
- Change Icon: Toggle to swap the button icon after copying (helpful for visual confirmation).
Button#
- Text: Provide a button text (e.g., "Copy").
- Size: Choose the button size (Extra Small, Small, Medium, Large, Extra Large)
- Icon: Set an icon for the button, either from Elementor's icon library or upload SVG.
- Icon Position: Set icon position before the text or after the text.
- Icon Spacing: Set spacing between icon and text.
Use Case Examples#
- Letting users copy coupon codes.
- Copying reference text snippets.
- Sharing preformatted messages or links.