Как подключить скрипт newUX к сайту за 5 минут

newUX подключается одним JavaScript-файлом, который добавляет на сайт превью ссылок, оглавление, время чтения и анимации. Никаких плагинов и правок в шаблон: достаточно вставить одну строку кода.

Что даёт скрипт

Превью ссылок показывают карточку с заголовком, описанием и картинкой при наведении на внутреннюю ссылку. Оглавление собирает навигацию по заголовкам страницы. Плашка времени чтения подсказывает, сколько займёт материал. Анимации отвечают за появление элементов при загрузке.

О том, зачем это малому бизнесу, есть отдельная статья: "Как улучшить сайт малого бизнеса".

Шаг 1. Зарегистрируйтесь и добавьте сайт

Создайте аккаунт и добавьте свой сайт в панели управления. Для каждого сайта генерируется свой токен, по которому система понимает, какие настройки применять.

Шаг 2. Скопируйте код вставки

В панели управления откройте сайт и скопируйте код вида:

<script src="https://newux.ru/embed/ВАШ_ТОКЕН/script.js"></script>

Шаг 3. Вставьте код на сайт

WordPress

Установите плагин для вставки кода в <head> (например, "Insert Headers and Footers") и добавьте строку туда. Либо добавьте её в подвал темы.

Tilda и конструкторы

Найдите блок "HTML-код" (T123) и вставьте скрипт в него один раз, в футер сайта.

Обычный HTML

Вставьте строку перед закрывающим тегом </body> в общем шаблоне.

Шаг 4. Включите нужные функции

В настройках сайта включите функции чекбоксами и при необходимости задайте параметры.

Для оглавления добавьте на страницу пустой контейнер <div id="toc-ВАШ_ТОКЕН"></div> в том месте, где должно быть оглавление. Для времени чтения подойдёт контейнер <div id="reading-time-ВАШ_ТОКЕН"></div>. Для превью ссылок при необходимости укажите контейнер, внутри которого показывать превью. Для анимаций задайте CSS-селектор элемента и тип эффекта.

Шаг 5. Проверьте результат

Обновите страницу сайта и проверьте:

• наведите курсор на внутреннюю ссылку, появилась карточка превью;
• на длинной странице виден блок оглавления;
• рядом с заголовком отображается время чтения;
• элементы появляются с анимацией.

Частые вопросы

Нужен ли доступ к коду сайта? Нет, достаточно вставить один тег на страницу или в общий шаблон.

Скрипт замедлит сайт? Он небольшой и подключается асинхронно. Тяжёлые картинки превью загружаются только при наведении.

Можно ли включить только часть функций? Да, каждая функция включается отдельно в панели управления.

Итог

Подключение занимает несколько минут и не требует разработчика. После установки скрипта начните с превью ссылок и оглавления: они быстрее всего заметны посетителям.