Обычный сайт
Откройте страницу, где нужна игра, найдите в самом низу закрывающий </body> и вставьте строку со скриптом прямо перед ним. Одна страница — одна строка.
Установка на сайт
Виджет — один тег перед закрывающим </body>. Стили и логика подтягиваются с нашего домена, на вашем сайте ничего не собирается и не ломается.
Шаг 1. Вставьте тег
Автопоказ через 9 секунд, повторно тому же посетителю окно не покажется, пока он сам не сбросит отказ.
обычный вариант
<script src="https://s571.gdesite.ru/assets/widget.js" data-auto="1" data-delay="9"></script>
только по кнопке
<script src="https://s571.gdesite.ru/assets/widget.js" data-auto="0"></script>
<button type="button" onclick="PodpisPulemet.open()">Подписать договор</button>Куда вставлять эти строки
Строка со скриптом идёт в самый низ страницы — она ставит окно с игрой. Строка с кнопкой нужна только во втором варианте и ставится туда, где кнопка должна быть видна.
Тильда и другие конструкторы
В настройках сайта есть поле «Код перед </body>» — вставьте туда. Если такого поля нет, добавьте в самый низ страницы блок «HTML-код» (в Тильде это блок T123) и положите строку в него.
WordPress
Подойдёт любой плагин для вставки кода в подвал сайта: вставляете строку один раз — она появляется на всех страницах. Второй способ — поле «Код в подвале» в настройках темы.
Куда кнопку
Строку с кнопкой ставьте рядом с текстом договора или в тот блок, где человек должен подписать, — например, под абзацем «Ознакомлен с условиями». Надпись на кнопке можно свою.
Как проверить, что всё встало
Откройте свой сайт в браузере и обновите страницу с зажатой клавишей Shift. В правом нижнем углу должна появиться тёмная кнопка «Подписать пулемётом» — значит, код на месте.
- Кнопки нет — проверьте, что в строке стоит адрес этого сайта, а не слово из примера.
- Кнопка есть, а окно не открывается — напишите нам, посмотрим вместе.
- Окно вылезает не вовремя — поставьте
data-auto="0"и открывайте только по кнопке.
Шаг 2. Настройте поведение
Атрибуты ставятся на тот же тег. Значения по умолчанию подходят большинству сайтов.
| Атрибут | Значение | Что делает |
|---|---|---|
data-auto | 1 / 0 | Открывать окно самому через задержку или ждать нажатия кнопки. |
data-delay | секунды, по умолчанию 9 | Через сколько секунд после загрузки показать окно. |
data-once | 1 / 0 | Показывать ли окно одному и тому же браузеру повторно. |
data-freq | дни, по умолчанию 30 | Сколько дней не тревожить того, кто нажал «Больше не показывать». |
data-trigger | CSS-селектор | Открывать окно по клику на вашу кнопку, например .js-sign. |
data-fab | 1 / 0 | Плавающая кнопка в правом нижнем углу сайта. |
data-api | адрес | Домен сервиса, если скрипт отдаётся с другого хоста или CDN. |
Шаг 3. Свои тексты и договор
Заголовок, подпись под ним и надпись на кнопке хранятся на нашей стороне — вы меняете их без выпуска нового скрипта.
Два варианта приглашения
Посетителям по очереди выдаётся вариант A и вариант B. В журнале видно, какой чаще доводит до нажатия «Готово», — оставляете победивший, второй отключаете.
Шаблон первой страницы
Номер, название, стороны, предмет и условия — поля одного шаблона. Подпись, дата и способ подписания подставляются автоматически. Можно держать несколько версий и включить одну.
Цвет акцента
Кнопка и прицел берут ваш фирменный цвет — задаётся в настройках, по умолчанию терракота.
Согласие на данные
Ссылка на политику обработки данных стоит в самом окне рядом с кнопкой — до того, как человек начнёт играть.
Печать без сюрпризов
Кнопка «Скачать PDF» открывает версию листа под А4: поля, шрифты и кириллица сохраняются.
Перед запуском
Четыре пункта, которые занимают полчаса и снимают почти все вопросы.
- Показать текст первой страницы договора юристу — особенно пункт про статус простой электронной подписи.
- Проверить окно на телефоне: поле, кнопки и закрытие должны попадать под палец.
- Убрать автопоказ со страниц оплаты и оформления заказа, если окно там мешает.
- Договориться, кто читает журнал подписей: у каждой подписи есть дата, источник и ссылка на документ.