Как подключить превью ссылок на Tilda
Tilda хороша тем, что не требует кода для вёрстки, и превью ссылок здесь подключается так же просто. Достаточно одного блока HTML-код и чекбокса в панели управления.
Зачем это нужно
На сайте услуг и лендинге клиент редко кликает по ссылкам вслепую. Карточка с заголовком, описанием и картинкой показывает, что ждёт за ссылкой, и повышает переходы внутри сайта. Подробнее о пользе в статье "Превью ссылок: как удержать клиента".
Как это работает
Скрипт следит за ссылками внутри вашего домена и при наведении подгружает данные страницы. Данные кэшируются, поэтому повторный показ происходит сразу. Внешние ссылки по умолчанию не обрабатываются.
Шаг 1. Вставьте скрипт через блок HTML-код
Откройте страницу в редакторе Tilda и добавьте блок T123 "HTML-код". Вставьте в него строку скрипта:
<script src="https://newux.ru/embed/ВАШ_ТОКЕН/script.js"></script>
Блок удобно разместить в самом низу страницы, чтобы он не мешал вёрстке. Если у вас несколько страниц, вставьте скрипт в каждую или в общий футер.
Шаг 2. Включите превью ссылок
В панели управления сайтом отметьте функцию "Превью ссылок". Отдельный плагин для этого не нужен.
Шаг 3. Настройте область показа (необязательно)
Если карточки должны появляться не везде, укажите селектор контейнера, например для основного блока страницы. Тогда превью работает только для ссылок внутри него, а служебные ссылки меню и футера не затрагиваются. Пошагово в статье "Как добавить превью ссылок без плагинов".
Шаг 4. Проверьте результат
Опубликуйте страницу и наведите курсор на внутреннюю ссылку. Через короткую задержку должна появиться карточка. Уведите курсор: карточка исчезает.
Частые ошибки
- Скрипт не подключён. Проверьте, что блок HTML-код сохранён и опубликован.
- Ссылка ведёт на другой домен. Превью работает только внутри вашего домена.
- Карточка не появляется. Обновите страницу с очисткой кэша браузера и проверьте, что функция включена в панели.
Итог
На Tilda превью ссылок подключается блоком HTML-код и одним чекбоксом. Если скрипт ещё не установлен, начните с инструкции "Как подключить скрипт newUX".