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;
}
.tc-copylink {
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const buttons = document.querySelectorAll('.tc-copylink .tn-atom');
const notification = document.getElementById('TCDcopyNotification');
buttons.forEach(button => {
button.addEventListener('click', async function (e) {
e.preventDefault();
const url = window.location.href;
try {
await navigator.clipboard.writeText(url);
} catch {
const tempInput = document.createElement('input');
tempInput.style.position = 'absolute';
tempInput.style.left = '-9999px';
tempInput.value = url;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
}
const originalText = button.textContent;
button.textContent = 'Скопировано';
setTimeout(() => button.textContent = originalText, 2000);
notification.classList.add('show');
setTimeout(() => notification.classList.remove('show'), 2000);
});
});
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block кнопку и указываем ей класс tc-copylink
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
В зеро блоке вместо кнопки можно использовать текст, шейп или изображение , но тогда поле "Текст кнопки при клике" в генераторе оставляем пустым.
2. При необходимости указываем дополнительные настройки в генераторе:
Текст кнопки при клике - можно указать текст который будет появляться на кнопке при клике;
Сообщение о копировании - если включить, то справа в углу будет появляется сообщение что адрес скопирован;
Цвет фона плашки - указываем цвет фона плашки сообщения;
Текст сообщения - указываем текст сообщения;
Цвет текста - указываем цвет текста;
Размер текста - указываем размер текста в сообщении;
Цвет обводки - указываем цвет обводки окна;
Толщина обводки - указываем толщину обводки;
Радиус скругления углов - указываем радиус скругления углов;
Направление анимации - выбираем направление анимации для окна.
Копировать только домен - если включено, то будет копировать только сам домен без адреса внутренней страницы. Например, если разместили скрипт на странице htpps://mysite.com/about, то при копирование в буфер запишет только https://mysite.com.
3. Копируем готовый код и вставляем в HTML блок Т123.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
В зеро блоке вместо кнопки можно использовать текст, шейп или изображение , но тогда поле "Текст кнопки при клике" в генераторе оставляем пустым.
2. При необходимости указываем дополнительные настройки в генераторе:
Текст кнопки при клике - можно указать текст который будет появляться на кнопке при клике;
Сообщение о копировании - если включить, то справа в углу будет появляется сообщение что адрес скопирован;
Цвет фона плашки - указываем цвет фона плашки сообщения;
Текст сообщения - указываем текст сообщения;
Цвет текста - указываем цвет текста;
Размер текста - указываем размер текста в сообщении;
Цвет обводки - указываем цвет обводки окна;
Толщина обводки - указываем толщину обводки;
Радиус скругления углов - указываем радиус скругления углов;
Направление анимации - выбираем направление анимации для окна.
Копировать только домен - если включено, то будет копировать только сам домен без адреса внутренней страницы. Например, если разместили скрипт на странице htpps://mysite.com/about, то при копирование в буфер запишет только https://mysite.com.
3. Копируем готовый код и вставляем в HTML блок Т123.
