URL скопирован в буфер обмена!

Как сделать кнопку "поделиться ссылкой"

С помощью этой модификации можно добавить свою кнопку "поделиться ссылкой" при клике на которую будет копировать адрес страницы в буфер обмена.

Модификация обновлена. Появилась возможность копировать только основной домен без адреса внутренней страницы.
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode

Генератор кода

Ссылка для кнопки
Текст кнопки при клике
Сообщение о копировании
Копировать только домен
Цвет фона плашки
Текст сообщения
Цвет текста
Размер текста
Цвет обводки
Толщина обводки
Радиус скругления углов
Направление анимации
Настройки плашки
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD075--><div id="TCDcopyNotification"><span>URL скопирован в буфер обмена!</span></div> <style> #TCDcopyNotification { visibility: hidden; position: fixed; bottom: 20px; border: px solid; right: 20px; border-radius: 10px; background-color: #F96855; padding: 10px; z-index: 999999; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.5s; transform: translateY(20px); opacity: 0; } #TCDcopyNotification span { font-size: 16px; color: #ffffff; font-family: Arial, sans-serif; font-weight: 500; } #TCDcopyNotification.show { visibility: visible; transform: translateY(0); opacity: 0; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var TiCodeCopyButtons = document.querySelectorAll('a[href="#tc-copylink"]'); var TiCodeNotification = document.getElementById('TCDcopyNotification'); TiCodeCopyButtons.forEach(function(TCDcopyButton) { TCDcopyButton.addEventListener('click', function(event) { event.preventDefault(); var TiUrl = window.location.href; var TCDtempInput = document.createElement('input'); TCDtempInput.style.position = 'absolute'; TCDtempInput.style.left = '-9999px'; TCDtempInput.value = TiUrl; document.body.appendChild(TCDtempInput); TCDtempInput.select(); document.execCommand('copy'); document.body.removeChild(TCDtempInput); var originalText = TCDcopyButton.textContent; TCDcopyButton.textContent = 'Скопировано'; setTimeout(function() { TCDcopyButton.textContent = originalText; }, 2000); TiCodeNotification.classList.add('show'); setTimeout(function() { TiCodeNotification.classList.remove('show'); }, 2000); }); }); }); </script>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block или стандартном блоке кнопку и указываем ей ссылку #tc-copylink
В зеро блоке вместо кнопки можно использовать текст, шейп или изображение , но тогда поле "Текст кнопки при клике" в генераторе лучше оставить пустым.


2. При необходимости указываем дополнительные настройки в генераторе:
Текст кнопки при клике - можно указать текст который будет появляться на кнопке при клике;
Сообщение о копировании - если включить, то справа в углу будет появляется сообщение что адрес скопирован;
Цвет фона плашки - указываем цвет фона плашки сообщения;
Текст сообщения - указываем текст сообщения;
Цвет текста - указываем цвет текста;
Размер текста - указываем размер текста в сообщении;
Цвет обводки - указываем цвет обводки окна;
Толщина обводки - указываем толщину обводки;
Радиус скругления углов - указываем радиус скругления углов;
Направление анимации - выбираем направление анимации для окна.
Копировать только домен - если включено, то будет копировать только сам домен без адреса внутренней страницы. Например, если разместили скрипт на странице htpps://mysite.com/about, то при копирование в буфер запишет только https://mysite.com.

3. Копируем готовый код и вставляем в HTML блок Т123.
Made on
Tilda