Как сделать копирование промокода по клику в Tilda

Посетитель увидел промокод, выделил его вместе с лишним пробелом и вставил в корзину. Код не применился, хотя акция работает. Небольшая кнопка копирования убирает этот лишний шаг.

Мод «Копирование по клику» берёт текст из элемента внутри контейнера Zero Block и показывает подтверждение после копирования. Подойдёт не только для промокода, но и для реквизитов или короткой строки. Покажем настройку на понятном примере.

Выберите одну законченную строку: например, WELCOME10. Условия акции напишите отдельно: что даёт код, до какого срока действует и где его вводить. Копирование не создаёт скидку в магазине и не проверяет право на её получение.

Не смешивайте код с пояснением «Ваш промокод:». Лучше скопировать только нужное значение. Если рядом есть несколько предложений, оформите каждое отдельной плашкой, чтобы человек не получил сразу все коды одной длинной строкой.

Создайте контейнер для нажатия, затем разместите текстовый элемент внутри него. Вложенность здесь важна: текст, который визуально лежит поверх фигуры, но остаётся соседним элементом, не становится её содержимым.

У контейнера задайте CSS Class Name copy-wrapper, у вложенного текста — copy-class. Имена вводятся без точки. Если меняете их в конструкторе, повторите те же имена в Zero. Не назначайте класс случайным текстам по всей странице.

В конструкторе настройте сообщение, цвета и время возврата исходного текста. Простого «Скопировано» достаточно. Не пишите «Скидка применена»: человек пока только получил строку в буфер обмена.

Проверьте длину обеих надписей. Короткий код легко помещается в узкой плашке, а слово подтверждения может раздвинуть её или перенестись. На телефоне вся область нажатия должна оставаться заметной, а текст — читаться без увеличения страницы.

1. Проверьте вложенность контейнера и текста в Zero Block.
2. Укажите совпадающие классы в конструкторе.
3. Настройте подтверждение и скопируйте код в T123 после Zero Block.
4. Опубликуйте страницу и откройте её по обычному HTTPS-адресу.
5. Нажмите на плашку и вставьте буфер в пустую заметку.

Для нескольких промокодов повторите структуру контейнера со своим вложенным текстом. Каждая плашка должна копировать собственное значение. Не размножайте один и тот же код подключения без необходимости.

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

Проверьте повторное нажатие после возврата исходного текста. Если работаете с реквизитами, особенно внимательно сравните цифры. При проверке самого промокода отдельно убедитесь, что он существует и настроен в вашем магазине: это другой этап, который кнопка копирования не выполняет.

Сначала сверьте классы и вложенность. Затем проверьте, опубликована ли страница, доступна ли она по HTTPS и не перекрывает ли плашку другой элемент. Ограничения браузера на работу с буфером тоже могут влиять на результат.

Не обещайте успешное копирование только по факту клика. У этого мода сообщение связано с успешным результатом. Если проблема остаётся, сохраните адрес страницы, название браузера и точный текст, который ожидали получить. Так проще проверить нужный сценарий.

Читайте также: Как поделиться корзиной в Tilda: товары одной ссылкой · Иконка корзины в Zero Block: счётчик и сумма заказа.