Кнопка <Copy to clipboard> для копіювання у буфер обміну

Use Case

До найпростіших кейсів використання даного сніпету коду належать:

• можливість для користувача швидко скопіювати певну частку інформації на сторінці (наприклад: скопіювати у буфер обміну реквізити для оплати рахунку);
• можливість скопіювати посилання та поділитися ним в месенджерах чи соцмережах (наприклад, така функція буде корисна при роботі над блогом);

‍

Додавання сніпету коду

По-перше, додай цей код перед тегом </body> в налаштуваннях свого проекту у Webflow:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js">
</script>

<script>
new Clipboard('.copy-button');
</script>

‍

Налаштування класу

Зміни значення <new Clipboard> на будь-яку назву класу, яку ти використовуєш для своєї кнопки, або просто додай клас "copy-button" до кнопок, які ти хочеш використовувати для копіювання в буфер обміну.

‍

‍

Налаштування атрибуту <a>

Для цього обери кнопку на канвасі та перейди до панелі налаштувань елементу, або скористайся шорткатом <D>.

Далі додай до цієї ж кнопки користувацький атрибут <a>. Ім'я має бути таким: "data-clipboard-text", а значенням буде будь-яке значення, яке ти хочеш, щоб користувач скопіював в буфер обміну.

‍

‍

Після цього ти вже можеш публікувати сайт та переконатись, що сніпет коду відпрацьовує і кнопка копіює необхідне тобі значення чи текст.

‍

Налаштування підказки

Ти помітиш, що при натисканні немає нотіфікейшена "Скопійовано!", однак, код все одно відпрацює і значення зберегітаиметься у твоєму буфері. Переконайся в цьому скопіювавши вміст буферу через Cmd+V чи Ctrl+V.

Залишилося додати цю підказку. Це можна зробити двома способами:

1. Додати тултип, скориставшись кастомним сніпетом коду.
2. Додати підказку через панель інтерекшенів. Після того, як ти налаштуєш зовнішній вигляд підказки, просто сховай її та додай взаємодію, щоб вона відображалася, коли користувачі натискають на кнопку з класом <copy-button>.

Це все, сподіваюсь цей сніпет був корисним для твого проєкту!