Віджет 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 КБ.