Виджет «Вам подарок» показывает посетителю окно с коробкой. Коробка открывается, и внутри оказывается промокод или кнопка со ссылкой на специальное предложение. Перед тем как открыть подарок, виджет может попросить email или телефон. В этой инструкции по шагам разобрано, как создать окно в личном кабинете, задать подарок и тексты, настроить показ, вставить код на сайт и читать статистику.
Перед началом
Решите, что дарить, и заведите промокод в своём магазине или CRM: виджет выдаёт ровно тот текст, который вы впишете, и сам скидку не применяет. Если подарок — страница акции, подготовьте её адрес. Подарок в окне один; если хочется разыгрывать несколько призов, используйте «Колесо Фортуны». Что предложить посетителю и когда показать окно, разобрано в статье блога «Всплывающее окно с промокодом».
Виджет доступен на всех тарифах, включая бесплатный. Сколько окон можно создать: на Free — 1, на Pro — до 3, на Business — до 10. Подарок, тексты, сбор контактов, условия показа, пять шаблонов оформления и кнопка на странице работают на любом тарифе. Цвета, шрифт, скругления и анимацию меняют на Pro и Business, а ссылку на сервис под окном убирают на Business. Цены — на странице «Тарифы».
Создание окна по шагам
- Войдите в личный кабинет по коду из письма. В меню «Виджеты» выберите «Вам подарок» (на главной странице кабинета это плитка среди виджетов).
- Нажмите «Новый виджет», в окне «Укажите ваше название для нового виджета» введите название, которое будет видно только вам, например «Подарок за первый заказ», и нажмите «Создать». Окно появится в списке: нажмите под ним «редактировать».
- В карточке «Подарок» выберите «Тип подарка»: «Промокод» или «Ссылка». Впишите промокод или адрес страницы и подпись к подарку.
- В карточке «Текст виджета» задайте «Заголовок» и «Подзаголовок» окна.
- В карточке «Получение подарка» выберите «Действие при получении подарка»: показать подарок сразу или сначала запросить email либо телефон.
- В карточке «Условия запуска» решите, когда открывать окно: по таймеру, при попытке уйти с сайта или по JavaScript-событию.
- В карточке «Дизайн» выберите шаблон и при желании включите «Кнопку на странице». Проверьте результат в «Предпросмотре»: кнопка «Открыть» открывает коробку прямо в редакторе.
- Нажмите «Сохранить». Затем нажмите «Код для вставки», скопируйте строку из поля «HTML-код виджета» и вставьте её на все страницы сайта.
- Откройте сайт в обычном и в приватном окне браузера и дождитесь, пока окно появится: так вы увидите его глазами нового посетителя.
Что уже есть в новом окне
Новое окно можно сразу поставить на сайт и посмотреть, как оно работает. В нём промокод GIFT2025 с подписью «Скидка 15% на первый заказ», заголовок «Вам подарок!» и подзаголовок «Специальное предложение для вас». Подарок показывается сразу, без сбора контакта, а окно открывается через 5 секунд после загрузки страницы. Перед запуском акции замените промокод на свой: иначе посетители получат код, которого нет в вашем магазине.
Настройки виджета
«Название виджета» видно только вам в списке виджетов. Переключатель «Отображать виджет на мобильных» включён по умолчанию: если его выключить, на телефонах окно не появится. «Временно отключить» прячет окно с сайта, не удаляя настройки, а в списке виджетов у него появится пометка «отключён».
Подарок: промокод или ссылка
«Тип подарка» определяет, что посетитель найдёт в коробке:
- «Промокод» — код из поля «Промокод» и кнопка «Скопировать». Под кодом стоит подпись из поля «Текст под промокодом», например «Скидка 15% на первый заказ»;
- «Ссылка» — кнопка, которая открывает адрес из поля «Ссылка (URL)». Надпись на ней задаётся полем «Текст кнопки» (по умолчанию «Забрать подарок»), а подпись под кнопкой — полем «Текст под кнопкой». Адрес должен начинаться с https:// или http://, иначе редактор не сохранит виджет.
Поле «Текст кнопки» появляется только у типа «Ссылка»: у промокода кнопка одна, «Скопировать».
Тексты окна
В карточке «Текст виджета» два поля: «Заголовок» — крупная надпись над подарком (в новом окне «Вам подарок!») и «Подзаголовок» — строка под ним. Подзаголовок можно оставить пустым, тогда его в окне не будет. Пишите коротко и по делу: «Скидка новым покупателям», «Подарок к первому заказу».
Получение подарка и контакты
Поле «Действие при получении подарка» в карточке «Получение подарка» задаёт, как посетитель получает подарок:
- «Показать подарок сразу (без действий)» — коробка открывается сама, и посетитель сразу видит промокод или кнопку-ссылку;
- «Запросить Email перед показом подарка» — в окне появится форма «Оставьте email, чтобы открыть подарок» и кнопка «Получить подарок». Промокод или ссылка откроются только после того, как посетитель оставит адрес;
- «Запросить телефон перед показом подарка» — то же с номером телефона.
Под формой есть кнопка «Нет, спасибо»: посетитель может отказаться и закрыть окно. Email и телефон проверяются ещё в окне, с опечаткой виджет попросит исправить адрес или номер. Значение подарка не попадает в код страницы, пока посетитель не оставил контакт, поэтому промокод нельзя подсмотреть в исходном коде сайта.
Собранные контакты видны на странице статистики виджета. Если включить «Уведомлять на почту о новых контактах», о каждом новом контакте придёт письмо на email вашего аккаунта.
Когда окно появляется
В карточке «Условия запуска» три способа показа, их можно включать вместе:
- «По таймеру» — через заданное число секунд после загрузки страницы (от 1 до 600, в новом окне 5);
- «При попытке уйти с сайта» — когда курсор поднимается вверх за пределы окна, к вкладкам и адресной строке. Это движение мыши, поэтому условие работает на компьютере; на телефоне окно откроют таймер, кнопка на странице или JavaScript-событие;
- «По JavaScript событию» — окно открывает ваш собственный код. Подробнее ниже, в разделе «Установка на сайт».
Таймер и уход со страницы показывают окно один раз за визит, пока у посетителя открыт сайт в этой вкладке. Если на странице уже открыто другое окно AllWidgets, например квиз или «Колесо Фортуны», подарок дождётся, пока его закроют. Переключатель «Не показывать при повторных визитах» запоминает посетителя в cookie на год: тому, кто уже видел окно, оно больше не показывается совсем — ни само, ни по кнопке на странице, ни по JavaScript-событию. Исключение одно: если посетитель уже оставил контакт, при перезагрузке страницы в той же вкладке окно откроется снова и покажет его подарок.
Как работает показ при уходе и как не раздражать посетителя, рассказано в статье блога «Всплывающее окно при уходе с сайта».
Дизайн
В карточке «Дизайн» пять шаблонов: «Минимал», «Неон», «Праздник», «Премиум» и «Пастель». Шаблон задаёт фон окна, цвет коробки и ленты с бантом, кнопку и шрифт. Окна, созданные до появления шаблонов, показываются в шаблоне «Праздник».
Переключатель «Кнопка на странице» добавляет на сайт постоянную кнопку, которой посетитель сам открывает подарок в любой момент. Для неё выбирают, «Где» она стоит («Справа внизу» или «Слева внизу»), «Форму» («Круглая иконка» или «Иконка и текст») и «Текст» до 24 символов. Кнопка — дополнительный способ показа: таймер и остальные условия работают как прежде.
Блок «Тонкая настройка» с пометкой Pro открывает акцент, фон окна и его градиент, цвета текста и кнопки, «Коробку», «Ленту и бант», «Затемнение страницы» и «Плотность затемнения», «Скругление углов», «Шрифт заголовков», «Анимацию появления» и «Размер окна». Кнопка «Вернуть цвета шаблона» сбрасывает правки. Если тариф закончится, окно будет показываться чистым шаблоном, а ваши цвета сохранятся и вернутся после оплаты.
«Предпросмотр» справа обновляется сразу, сохранять для этого не нужно. Переключатель «Компьютер / Телефон» показывает окно на разных экранах, кнопка «Открыть» открывает коробку, «Показать заново» возвращает окно в начало. На телефоне превью открывается кнопкой «Предпросмотр» внизу экрана. В превью ничего не записывается: ни контакты, ни статистика.
White Label
Под окном стоит небольшая ссылка «Сделано с помощью» на сервис. На тарифе Business в карточке «White Label» её можно убрать («Отключить ссылку на сервис») или заменить своим текстом со ссылкой («Свой HTML-код»). На Free и Pro карточка закрыта замком.
Установка на сайт
Нажмите «Код для вставки» под карточками. В окне «HTML-код виджета» скопируйте строку вида:
<script src="https://app.allwidgets.ru/s/gift/ваш-идентификатор/"></script>
Вставьте её на все страницы, где должно появляться окно: перед закрывающим тегом body или в любое место шаблона. Как это сделать на Tilda, WordPress и 1С-Битрикс, описано в статье «Как установить виджет на сайт». Код вставляется один раз: подарок, тексты и оформление меняются в кабинете и подхватываются сайтом без правки кода.
Чтобы открыть окно из своего кода, например по нажатию на баннер, включите «По JavaScript событию» и вызовите функцию allwidgets_gift() или отправьте событие allwidgets_gift:
<button onclick="allwidgets_gift()">Получить подарок</button>
Если на странице несколько таких окон, передайте в функцию идентификатор нужного: allwidgets_gift('ваш-идентификатор'). Без включённого переключателя вызов ничего не делает и ошибок на сайте не вызывает. Открыть подарок можно и из других виджетов: действием «Открыть виджет» в Мультикнопке или кнопкой сообщения в «Фокусе».
Если окно не появляется, проверьте, что не включено «Временно отключить», на телефоне включено «Отображать виджет на мобильных», вы не видели его раньше при включённом «Не показывать при повторных визитах» (откройте сайт в приватном окне) и тариф оплачен: окна сверх лимита тарифа на сайте не показываются.
Статистика
В списке виджетов у окна есть ссылка «статистика», а в редакторе — кнопка «Статистика». Вверху страницы три итога за всё время: «Показы» (сколько раз окно открылось), «Переходы по ссылке» (нажатия на кнопку подарка-ссылки) и «Скопировали промокод» (нажатия «Скопировать»). Ниже график «Статистика по дням».
Таблица «Контакты посетителей» показывает последние 100 контактов с датой, типом, выданным подарком и страницей, на которой его получили. Оттуда контакты можно перенести в свою CRM или сервис рассылок. Целей Яндекс Метрики у виджета нет: результат акции смотрите в статистике виджета и по применённым промокодам в своём магазине.