Малые интерактивы

1. Шеры

Иногда необходимо добавить возможность поделиться страницей в соцсетях. Чаще всего это решается попапом со ссылками на соцсети и возможностью скопировать текст ссылки.

<div class="section-layer__share share modal hidden" style="display: flex;">
    <div class="modal__wrapper share__wrapper">
        <div class="modal__title share__title">Поделиться результатом</div>
        <div class="share__icons">
            <a href="" class="share__icon share__icon_vk js-gtm-event" target="_blank" data-event="share-vk" data-section="section-game-score">
                <img src="https://chestno.tele2.ru/vk.e43f24d3.svg" alt="">
            </a>
            <a href="" class="share__icon share__icon_ok js-gtm-event" target="_blank" data-event="share-ok" data-section="section-game-score">
                <img src="https://chestno.tele2.ru/ok.432f22f0.svg" alt="">
            </a>
            <a href="" class="share__icon share__icon_tg js-gtm-event" target="_blank" data-event="share-tg" data-section="section-game-score">
                <img src="https://chestno.tele2.ru/tg.505c3fd8.svg" alt="">
            </a>
        </div>
        <span class="share__copy-link js-gtm-event" data-event="share-link" data-section="section-game-score">Скопировать ссылку</span>
        <div class="share__close-icon modal__close-icon">
            <span class="modal__close share__close"></span>
        </div>
    </div>
</div>

2. Шкала оценки

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

<section class="feedback section-feedback">
    <div class="feedback__block">
        <div class="feedback__rating rating">
            <p class="feedback__text rating__text"> Как оцениваете нашу идею сажать деревья? </p>
            <div class="rating__line">
                <input type="radio" id="star-5" name="rating" value="5" class="js-gtm-event rating__input" data-event="tree5">
                <label for="star-5" title="Оценка «5»">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23 37" fill="#D2E0BD">
                        <use xlink:href="#tree"></use>
                    </svg>
                </label>
                <input type="radio" id="star-4" name="rating" value="4" class="js-gtm-event rating__input" data-event="tree4">
                <label for="star-4" title="Оценка «4»">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23 37" fill="#D2E0BD">
                        <use xlink:href="#tree"></use>
                    </svg>
                </label>
                <input type="radio" id="star-3" name="rating" value="3" class="js-gtm-event rating__input" data-event="tree3">
                <label for="star-3" title="Оценка «3»">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23 37" fill="#D2E0BD">
                        <use xlink:href="#tree"></use>
                    </svg>
                </label>
                <input type="radio" id="star-2" name="rating" value="2" class="js-gtm-event rating__input" data-event="tree2">
                <label for="star-2" title="Оценка «2»">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23 37" fill="#D2E0BD">
                        <use xlink:href="#tree"></use>
                    </svg>
                </label>
                <input type="radio" id="star-1" name="rating" value="1" class="js-gtm-event rating__input" data-event="tree1">
                <label for="star-1" title="Оценка «1»">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23 37" fill="#D2E0BD">
                        <use xlink:href="#tree"></use>
                    </svg>
                </label>
            </div>
        </div>
        <div class="feedback__share share">
            <p class="feedback__text share__text"> Ваши друзья тоже могут внести вклад в&nbsp;сохранение леса </p>
            <ul class="links share__links">
                <li class="copy-icon js-gtm-event links__item share__copy-link" data-event="share_copy"> <img src="copy.8ff1103e.svg" alt="">
                    <div class="copy-tooltip">Ссылка скопирована</div>
                </li>
                <li class="links__item">
                    <a href="" class="js-gtm-event share__icon_vk" target="_blank" data-event="share_vk"> <img src="vk-icon.fe83b65c.svg" alt=""> </a>
                </li>
                <li class="links__item">
                    <a href="" class="js-gtm-event share__icon_ok" target="_blank" data-event="share_ok"> <img src="ok-icon.e41595ae.svg" alt=""> </a>
                </li>
                <li class="links__item">
                    <a href="" class="js-gtm-event share__icon_tg" target="_blank" data-event="share_tg"> <img src="tg.3b0bb5b9.svg" alt=""> </a>
                </li>
            </ul>
        </div>
    </div>
</section>

3. Реакции

Работают на ту же цель, что и шкала оценки, привлекают внимание

<div class="reactions">
    <button class="btn js-gtm-event js-reaction" data-event="reaction_help" data-section="section-about"> <span class="txt">Помогите</span> <span class="icon"><img src="smile01.53ed9d2b.svg" alt="" class="pic"></span> </button>
    <button class="btn js-gtm-event js-reaction" data-event="reaction_horror" data-section="section-about"> <span class="txt">Ужас</span> <span class="icon"><img src="smile02.aec37b12.svg" alt="" class="pic"></span> </button>
    <button class="btn js-gtm-event js-reaction" data-event="reaction_nopanic" data-section="section-about"> <span class="txt">Без паники</span> <span class="icon"><img src="smile03.420624c5.svg" alt="" class="pic"></span> </button>
</div>