EmojiSup виджет

Хотите такую же полосу реакций у себя на сайте?

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

Установка

В раздел HEAD вашего сайта добавьте:

<script src="https://api.emojisup.org/widget.js?4"></script>

В раздел BODY, туда, где должна появиться полоса, добавьте:

<div data-emojisup></div>

На этом установка закончена. После загрузки скрипт подключит свои стили, пройдёт по странице, найдёт элементы с атрибутом data-emojisup и нарисует в каждом полосу реакций.

Идентификаторы виджетов

Идентификатор виджета собирается из адреса страницы, поэтому на одной странице можно поставить несколько виджетов, и у каждой страницы свои счётчики. Метки вроде utm_source или fbclid не учитываются, так что посетитель, пришедший по рекламе, видит те же счётчики, что и все остальные.

Идентификатор можно задать и вручную:

<div data-emojisup id="my-article-42"></div>

Если идентификатор изменится, виджет начнёт с нуля, а счётчики обнулятся.

Настройки

Все настройки — атрибуты того же элемента, и любую можно не указывать.

data-emojisup-set — показывает только перечисленные реакции, через запятую:

<div data-emojisup data-emojisup-set="👍,❤️,🔥,🤣"></div>

data-emojisup-theme — выбирает цвета: light по умолчанию, dark для тёмного фона, auto — следовать системной настройке посетителя.

data-emojisup-size — задаёт размер: s, m по умолчанию или l.

data-emojisup-align — прижимает полосу: left, center или right. Без этого атрибута реакции растягиваются на всю ширину блока.

<div data-emojisup data-emojisup-theme="dark" data-emojisup-size="l" data-emojisup-align="center"></div>

А вот тот же виджет с тёмной темой, четырьмя реакциями и по центру:

Содержимое, которое подгружается позже

Если виджет находится в содержимом, которое приходит после загрузки страницы, вызовите после его появления:

<script>
    emojiSup.update();
</script>

Метод заново обходит страницу и запускает новые виджеты. Чтобы виджет перестал обновлять счётчики, вызовите emojiSup.destroy().

Что виджет хранит

Виджет ставит одну куку — ev_user_id, на год. В ней случайный идентификатор и больше ничего: он нужен, чтобы виджет помнил, какую реакцию выбрал этот посетитель, и выбор не пропадал после перезагрузки. С каждым запросом виджет отправляет адрес страницы, на которой стоит полоса, — так счётчики и разделяются по страницам. Ни имён, ни почты, ни данных из форм.

Счётчики обновляются, пока вкладка открыта и видна. В фоновой вкладке виджет перестаёт обращаться к серверу, а через пару минут без нажатий сам снижает частоту.

Вопросы

Это правда бесплатно? Да, и никакой учётной записи заводить не нужно.

Сколько виджетов можно поставить на страницу? Сколько угодно. Каждому задайте свой id.

Может ли посетитель поменять реакцию? Да. На виджет от посетителя засчитывается одна реакция: нажатие на другую переносит голос, повторное нажатие снимает его.

Переживут ли счётчики переделку сайта? Да, если адрес страницы или заданный вручную id не изменится.

Нужен ли jQuery? Нет. У скрипта нет зависимостей, он весит около 45 КБ.