# Copy to clipboard

Users can set any element to copy a string value to the clipboard when clicking on it. The script can be set by adding attributes to individual elements or by setting global attributes to the `<script>` tag that will affect all elements.

```html
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/webflow-addons@2/dist/copy-clipboard.js"></script>
```

## Element attributes

| Attribute            | Required                                           | Accepted values                                                                                                                         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| -------------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fs-copy`            | Yes (If the global `fs-copy-selector` is not used) | A valid query selector (like IDs `#element-id` or CSS Classes `.element-class`)<br/><br/>A `self` value.<br/><br/>A random text string. | If the attribute is equal to `self`, the content of the element itself will be copied to the clipboard.<br/><br/>If the attribute is equal to a valid query selector, the content of that element (if found) will be copied.<br/><br/>If the attribute is equal to any other string value, that string will be copied to the clipboard.<br/><br/>Examples: `fs-copy = "self"` ; `fs-copy = "#target-element"` ; `fs-copy = "This is a random text!"` |
| `fs-copied-message`  | No                                                 | Any random text string.                                                                                                                 | If set, the text content of the element will be replaced for it when the copy action was successful. After a period of time (see `fs-copied-duration`, the text content will revert to the original one).<br/><br/>Example: `fs-copied-message = "Copied!"`                                                                                                                                                                                          |
| `fs-copied-duration` | No                                                 | A duration in miliseconds.<br/>Defaults to `1000`.                                                                                      | This attribute determines for how long will the `fs-copied-message` be displayed before reverting to the original text.                                                                                                                                                                                                                                                                                                                              |

## Global &lt;script> attributes

| Attribute            | Required | Accepted values                                                                                                                         | Description                                                                                                                                                                                                                                    |
| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fs-copy-selector`   | No       | A valid query selector (like IDs `#element-id` or CSS Classes `.element-class`)<br/><br/>A `self` value.<br/><br/>A random text string. | Accepts a query selector that will instantiate all the matched elements.<br/><br/>Example: `fs-copy-selector = ".copy-button"` will make all the `.copy-button` elements to act like if they had the `fs-copy = "self"` attribute set to them. |
| `fs-copied-message`  | No       | Any random text string.                                                                                                                 | Same as the Element specific attribute, affects all the elements.                                                                                                                                                                              |
| `fs-copied-duration` | No       | A duration in miliseconds.<br/>Defaults to `1000`.                                                                                      | Same as the Element specific attribute, affects all the elements.                                                                                                                                                                              |