Блог про виджеты и лидогенерацию — советы маркетологам, кейсы и гайды | Тачми
Статьи и рекомендации по виджетам, web-push уведомлениям, расширению воронки продаж и сбору лидов. Полезный блог для маркетологов и владельцев сайтов, которые хотят повысить конверсию и эффективность трафика.
Формы обратной связи на сайте в 2025 году: какие бывают, как выполнить 152-ФЗ и почему удобнее использовать готовый виджет
Разбираем, какие формы обратной связи работают в 2025 году, как соблюдать 152-ФЗ и почему бизнесу проще использовать готовый виджет для заявок. Если у бизнеса есть сайт, рано или поздно он сталкивается с простой задачей: «Как сделать так, чтобы человек мог быстро написать или оставить заявку?» На первый взгляд кажется, что форма обратной связи — это «поставил поле e-mail и кнопку», но на практике всё куда шире. И требования закона о персональных данных, и UX, и дизайн, и способ появления формы влияют на то, будет она работать или просто занимать место на странице. Ниже разберёмся, какие формы бывают, что требует законодательство, почему дизайн форм — это не мелочь, а фактор продаж, и как это всё свести к удобному готовому решению вроде виджета ЛидХантер . Какие виды форм используются сегодня 1. Классическая форма на странице Самый распространённый вариант: несколько полей — имя, телефон, комментарий — и кнопка «Отправить». Плюсы: простота, быстро внедряется. Минусы: если форма неудачно вписана в макет, пользователь её просто не замечает. 2. Pop-up форма Это окно, которое появляется поверх сайта. Главное — не путать pop-up с агрессивной рекламой 2010-х. Триггеры появления бывают разные: пользователь провёл на странице N секунд; скролл до 50–70%; намерение закрыть вкладку (exit-intent); повторный визит на сайт. Такая форма работает лучше, чем статическая, потому что появляется в момент заинтересованности. 3. Плавающая форма (floating button) Кнопка висит в правом нижнем углу, не мешает, но всегда на виду. При клике открывается компактное окно для заявки. Популярный вариант для лендингов, услуг и e-commerce. Такая возможность присутствует в нашем виджете. Как соблюсти 152-ФЗ: без этого форму запускать нельзя Любая форма собирает минимум ФИО или телефон — а это уже персональные данные. По требованиям 152-ФЗ нужно: 1. Получить согласие на обработку ПДн Причём не «где-то в подвале сайта», а прямо рядом с кнопкой отправки. Чекбокс или фраза «Нажимая кнопку, вы соглашаетесь…» — оба варианты допустимы. 2. Указать ссылку на политику конфиденциальности Пользователь должен иметь возможность ознакомиться, чем вы собираете данные, кому передаёте и зачем. 3. Обеспечить защиту данных Шифрование (HTTPS), защищённое хранение, хранение в соответствии с законом. Многие компании забывают, что хранение «в Google Sheets» — формально незаконно. 4. Чётко определять цель сбора Нельзя писать «для любых целей». Только конкретная формулировка: «Для обработки заявки», «Для консультации менеджера» и т.п. 5. Не собирать лишнего Если форма для консультации — не нужно собирать дату рождения, адрес проживания и т.п. Почему дизайн формы влияет на продажи Это, пожалуй, самый недооценённый пункт. Сайт может быть дорогим, маркетинг настроен идеально, но форма выглядит сырой — и всё: заявки улетают конкурентам. Важные нюансы дизайна: Контрастная кнопка — должна быть заметной, но не кричащей. Короткие поля — чем меньше, тем лучше. Чёткая типографика — шрифт не должен рассыпаться или выглядеть «инопланетно» на мобильном. Адаптивность — половина заявок идёт со смартфонов, а там мелкие поля — просто боль. Доверие — форма должна выглядеть аккуратно, современно и «как в нормальном продукте», иначе человек не оставит номер телефона. Дизайн формы — это не эстетика, это конверсия. Почему важно показывать форму по триггерам Если форма появляется не вовремя — раздражает. Если слишком поздно — пользователь уже ушёл. Хорошие триггеры: после 15–25 секунд на странице (значит, человек что-то изучает); после прокрутки 40–60%; когда пользователь движется к закрытию вкладки; при повторном посещении; после добавления товаров в корзину. Триггер — это тонкая настройка внимания посетителя. Он помогает поймать момент, когда человек уже готов к диалогу. Зачем всё это, если можно просто поставить виджет? Можно собрать форму вручную, вёрстка, разработка, логика, сервер, интеграции, логирование, 152-ФЗ — всё это время, деньги и ещё нужно тестировать. Но большинство компаний сейчас используют готовые решения , потому что это быстрее, дешевле и безопаснее. Почему удобнее использовать виджет ЛидХантер Если брать конкретный пример — виджет ЛидХантер , он закрывает сразу весь набор задач, которые обычно приходится решать вручную. Преимущества: 1. Настройка без разработчика Поля, дизайн, логика — всё делается через веб-интерфейс, а не через код. 2. Соответствие требованиям 152-ФЗ Есть возможность добавить чекбокс, ссылку на политику и корректно оформить согласие — без ручных правок. 3. Гибкие триггеры появления — по времени, — на определенной странице или всем сайте, — по активности посетителя. Это повышает шансы поймать заявку именно в нужный момент. 4. Современный аккуратный дизайн Виджеты выглядят как часть сайта, не выпадают из стиля и не раздражают пользователей. 5. Интеграции и передача заявок Заявки могут сразу уходить в Telegram, CRM или на почту. Никаких «потерянных пользователей». 6. Статистика и аналитика Можно смотреть, как часто форма показывается, сколько было кликов, сколько заявок — удобно для оптимизации конверсии. 7. Быстрый запуск — 5 минут Вставил один скрипт в header — и всё работает.
Важность Cookie-согласия в России: закон, ответственность и лучшие практики
Узнайте, почему Cookie-согласие стало обязательной практикой в России. Разбираем законы, ответственность, требования Роскомнадзора и лучшие способы настроить уведомления на сайте. Если коротко, тема cookie в России в последние годы стала уже почти обязательным пунктом в списке того, что должен сделать любой владелец сайта. Это раньше они воспринимались как какая-то “внутренняя кухня”, которую обычные пользователи даже не замечают. Сейчас всё иначе: законы ужесточились, люди стали внимательнее относиться к своим данным, да и разбирательств по персоналке стало больше. Поэтому баннер с уведомлением о cookie — это уже не дань моде, а нормальный элемент защиты бизнеса. Кстати, чтобы не городить всё вручную, многие ставят виджет Cookie-согласия Touch_me — он просто экономит время, но об этом ближе к концу. Почему cookie вообще трогают законы Если честно, когда читаешь определения в законе 152-ФЗ, сразу не очевидно, что обычные cookie тоже туда попадают. Но практика за последние годы показывает: если файл помогает связать действия человека с конкретным устройством — это уже данные. А значит, возникает история с согласием, хранением, отказом и всем прочим, что требует закон. Особенно это касается аналитики и маркетинговых cookie. Технические — вроде тех, что отвечают за корзину или логин — проблем обычно не вызывают. Но всё, что связано с поведением пользователя, уже требует отдельного отношения. Что изменилось с точки зрения законов Если совсем по-простому: Роскомнадзор стал больше внимания уделять тому, что компании делают с техническими идентификаторами. Поправки последних лет только усилили этот тренд. В судах cookie всё чаще рассматриваются как персональные данные, особенно если сайт собирает аналитику, retargeting-метки или что-то такое. То есть если сайт запускает сторонние скрипты до того, как пользователь разрешил это — формально это нарушение. И да, это уже не “теоретическая угроза”: реальные проверки идут регулярно. Что будет, если ничего не делать По опыту, чаще всего владельцы сайтов либо не заморачиваются, либо думают, что “оно само пройдёт”. Но надо быть честным — отсутствие cookie-баннера может обернуться тремя неприятностями: Юридические риски. Не получите согласие → нарушили закон → получили претензию. Иногда штраф, иногда предписание, иногда просто неприятная переписка. Недомолвка с пользователями. Люди стали внимательнее читать такие вещи. И если на сайте что-то собирается без их ведома — это вызывает раздражение. Репутационные проблемы. Один скрин в Телеграм — и вы «сайт, который собирает всё подряд». Сейчас это разлетается очень быстро. Зачем вообще нужен cookie-баннер Если отбросить юридическую сторону, то баннер — это в первую очередь прозрачность. Пользователь должен понимать, что именно вы собираете и зачем. Хороший cookie-баннер помогает: дать человеку выбор, а не ставить перед фактом; зафиксировать согласие, чтобы были доказательства. С точки зрения сайта это минимальные усилия, но хороший плюс к безопасности. Подробнее о Виджете Cookie Как сделать всё по уму Чтобы не путаться, есть несколько простых правил: Не включать сторонние трекеры до согласия. Это главное. Писать человеческим языком, что вы собираете. Без “технического тумана”. Особо не усложнять. Людям нужно понятно и быстро. Поэтому большинство нормальных компаний не делают это с нуля — проще использовать уже готовое решение, например тот самый виджет Cookie-согласия Touch_me , который автоматически блокирует лишние скрипты до получения согласия. Итоги Cookie-согласие в России — это про честность, безопасность и элементарное уважение к пользователю. Законодательство стало строже, и игнорировать это сейчас уже нельзя. Баннер на сайте — небольшая деталь, но она снимает половину потенциальных проблем. А если использовать готовый инструмент, то и времени это занимает буквально 2–3 минуты.
Виджет “Уведомления (мобильный телефон)”
Здесь очень похож функционал с уведомлениями на десктопе, поэтому все скриншоты можно посмотреть в уведомлениях для десктопа . Шаг 1 - Дизайн. В открывшейся странице открылось поле с виджетом и меню для дизайна (см. скриншот). То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте (оно всегда серых цветов), а стрелкой показан сам виджет. Меню дизайна: Цвет фона - цвет самого модального окна (на примере бирюзовый цвет); Цвет заголовков - цвет текста темы виджета (на примере красный цвет); Цвет текста - цвет внутреннего текста-описания, раскрывающего заголовок (на примере фиолетовый цвет). Закругления : поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. Тень : чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. Шрифт : поле для правки шрифта в виджете (см. скриншот 10). Размер заголовков : поле для правки размера темы виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Размер текста : поле для правки размера описания виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Меню Расположения: z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. Чек-бокс “Показывать только на первом экране” - возможность показа виджета только на первом экране, не затрагивая другие страницы. Отступы : поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже (см. скриншот 11). При завершении этого шага можно перейти на следующий шаг при помощи кнопки “Следующий шаг” в правом нижнем углу или при перечислении шагов чуть выше поля создания виджета (см. скриншот 14). Шаг 2 - Содержание. В открывшейся странице открылось поле с виджетом (как в шаге 1) и меню для содержания ссылки: Заголовок - поле для ввода темы виджета, здесь просто требуется ввести текст; Описание - поле для ввода текста-описания виджета, здесь просто требуется ввести текст; Ссылка - поле, куда нужно вставить ссылку, куда ведет виджет; Пунктирное поле - поле для загрузки файла изображения. Изображение должно быть в формате png или jpeg. В отличие от десктопных уведомлений, в виджет для мобильного телефона можно добавить только одну ссылку! Шаг 3 - Размещение. В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: Название виджета - поле для названия виджета во внутренней системе touch_me; Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список; Начинать показ - здесь выбираете время для показа; Как долго показывать - здесь выбираете время показа; Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: На всех страницах указанного сайта; На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER); Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER); URL-адреса соответствующие Сначала при помощи кнопок выбираете как будет отображаться, а потом заполняете поля с ссылками. Цель в Яндекс Метрике - поле для ввода кода для интеграции (получать в Яндекс Метрике). Полностью заполненные поля можно посмотреть на скриншотах 22 и 23. На примере выбрано, что виджет будет показан через 10 секунд после попадания на указанный сайт и находиться в течение всего времени нахождения пользователя на сайте на всех страницах, кроме указанных страниц. Когда виджет полностью создан, то нужно нажать на кнопку “Сохранить изменения” слева в самом низу страницы.
Как создать виджет ЛидХантер — форму обратной связи для сайта
Подробно рассказываем, как создать виджет ЛидХантер : умную форму обратной связи, которая собирает лиды, повышает конверсию и помогает не терять заявки с сайта. Для создания виджета есть 3 шага: Настройка кнопки - дизайн и контент для кнопки “Оставить заявку”. Если такая кнопка не нужна, то переключатель должен быть неактивен (черного цвета) и поля для редактирования не будут доступны для правок, а настроенное далее модальное окно появится через время (которое задается в шаге 3); Настройка модального окна - расположение, дизайн и контент для большого модального окна; Размещение - название виджета в списке виджетов в touch_me, на каких страницах будет показан/не показан виджет, код для подключения к Яндекс Метрике. Шаг 1 - Настройки кнопки. В открывшейся странице открылось поле с виджетом и меню для настройки кнопки (см. скриншот 30). То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте (оно всегда серых цветов), красной стрелкой показана кнопка, желтой стрелкой - кнопка переключения с десктопной версии на мобильную, а синей - кнопка-переключатель наличия кнопки. Меню настройки кнопки: Кнопка для вызова формы - кнопка-переключатель. По умолчанию она активна, то есть на странице будет кнопка “Оставить заявку”. Если такая кнопка не нужна, то переключатель перемещаем влево и кнопка становится черного цвета и тогда переходим к созданию модального окна (шаг 2). Дизайн Цвет - цвет текста названия кнопки; Закругления - поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. Цвет фона - цвет самого модального окна; Шрифт : поле для правки шрифта в виджете (см. скриншот 10). Размер текста : поле для правки размера шрифта в виджете. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Иконка справа : чек-бокс для перемещения иконки в кнопке вправо (иконки выбираются в следующем разделе). Тень : чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. Контент - тут поле для добавления названия кнопки. По умолчанию стоит “Оставить заявку”, но можно вписать любой текст, а также можно добавить иконку. Для этого необходимо нажать на кнопку Выбрать иконку (см. скриншот 31) и в открывшимся модальном окне выбрать нужную (см. скриншот 26 в тап-баре). После выбора иконки меняются поля в меню: появляется поле с названием иконки (если требуется удалить иконку, то нажимаем на крестик внутри поля) и рядом с кнопкой появляется выбранная иконка (см. скриншот 32). Р асположение : здесь выбираем 1 из 3х вариантов расположения виджета на странице: слева, по центру или справа.. z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. Ч ек-бокс “Показывать только на первом экране” - возможность показа виджета только на первом экране, не затрагивая другие страницы. Отступы : поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже (см. скриншот 11). Шаг 2 - Настройки модального окна. В открывшейся странице открылось поле с модальным окном. Меню в настройках модального окна: Расположение Здесь поле z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. Дизайн Цвет фона - цвет самого модального окна (на примере белый цвет); Закругления - поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. Шрифт : поле для правки шрифта в виджете (см. скриншот 10). Изображение Кнопка-переключатель - кнопка для добавления/удаления изображения рядом с полями формы. По умолчанию кнопка активна и изображение предполагается. Если изображение не нужно, то переключатель перемещаем влево и кнопка становится черного цвета (см. скриншот 33). Пунктирное поле - Чтобы загрузить изображение нужно нажать на пунктирное поле и найти нужное изображение в вашем компьютере. Изображение должно быть в формате png или jpeg, весить не более 200 KB, пропорции 1 к 1 (см. скриншот 34). Когда изображение загрузится, оно отобразится в мод окне и в пунктирном поле, и появится кнопка с крестиком для удаления (на скриншоте красными стрелками показаны изображения, а синяя стрелка - кнопка удаления изображения). В мобильной версии изображение не показывается. Изображение справа : чек-бокс для перемещения изображения вправо, а слева сделать поля за заполнения). Заголовок Поле для названия заголовка - поле для ввода названия заголовка модального окна; Размер заголовка - поле для правки размера шрифта заголовка. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Цвет заголовка - выбор цвета текста в заголовке; Стиль текста - 2 кнопки для выбора стиля текста “В” - жирный, “I” - курсивный. Можно выбрать по отдельности или вместе. Выравнивание текста - по левому краю, по центру или по правому краю. Подзаголовок Поле для названия подзаголовка - поле для ввода текста подзаголовка модального окна; Размер подзаголовка - поле для правки размера шрифта подзаголовка. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Цвет подзаголовка - выбор цвета текста в подзаголовке; Стиль текста - 2 кнопки для выбора стиля текста “В” - жирный, “I” - курсивный. Можно выбрать по отдельности или вместе. Выравнивание текста - по левому краю, по центру или по правому краю. Текст в полях ввода - блок для редактирования самих полей внутри модального окна (см. скриншот 35). Размер текста - поле для правки размера шрифта в полях. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Цвет текста - выбор цвета текста в полях для заполнения внутри модального окна, когда пользователь заполняет форму; Цвет заглушки - выбор цвета текста в подсказках внутри полей; Цвет обводки - выбор цвета обводки полей в модальном окне. Чекбокс Размер текста - выбор размера шрифта текста в модальном окне; Цвет текста - выбор цвета текста чек-бокса в модальном окне. Кнопка Поле для названия кнопки - поле для ввода названия кнопки в модальном окне; Размер текста - выбор размера шрифта текста в кнопке; Цвет текста - выбор цвета текста в кнопке; Цвет фона - выбор цвета фона в кнопке; Закругления : поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. Расположение - место кнопки в форме слева, по центру или справа. Поля ввода - в этом блоке можно выбрать как уже предусмотренные поля (Почта, Номер телефона, Имя), так и создавать самим. Если какое-то предусмотренное поле не требуется, то ползунок в кнопке перемещаем влево (см. желтую стрелку на скриншоте 36). Если нужно переставить местами эти поля, то можно воспользоваться кнопками вверх/вниз справа от ползунка (см. красную стрелку на скриншоте 36). Чтобы создать новое поле, нужно нажать на кнопку “Добавить еще поле ввода” (см. синюю стрелку на скриншоте 36). После нажатия кнопка трансформируется в поле где нужно ввести название (см. красную стрелку на скриншоте 37), а рядом иконка удаления этого поля (см. синюю стрелку на скриншоте 37). Политика конфиденциальности - поле для ввода ссылки на политику конфиденциальности, которая размещена на вашем сайте. Шаг 3 - Размещение. В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: Название виджета - поле для названия виджета во внутренней системе touch_me; Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список; Начинать показ - здесь выбираете время для показа; Как долго показывать - здесь выбираете время показа; Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: На всех страницах указанного сайта; На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER); Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER); URL-адреса соответствующие Сначала при помощи кнопок выбираете как будет отображаться, а потом заполняете поля с ссылками. Цель в Яндекс Метрике - поле для ввода кода для интеграции (получать в Яндекс Метрике). Полностью заполненные поля можно посмотреть на скриншотах 18 и 19 в создании виджета Уведомления. На примере выбрано, что виджет будет показываться сразу на выбранном сайте на конкретных страницах в течение 6 секунд. Когда виджет полностью создан, то нужно нажать на кнопку “Сохранить изменения” слева в самом низу страницы.
Виджет Мультикнопка
Для создания виджета есть 3 шага: Кнопка - дизайн и расположение кнопки соц сети; Ссылки - дизайн и расположение и контент для открытой кнопки; Размещение - название виджета в списке виджетов в touch_me, на каких страницах будет показан/не показан виджет, код для подключения к Яндекс Метрике. Шаг 1 - Кнопка. В открывшейся странице открылось поле с виджетом и меню для настройки кнопки (см. скриншот 38). То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте (оно всегда серых цветов), красной стрелкой показан сам виджет. Меню в разделе: Дизайн : здесь одно поле Размер иконки - поле для правки размера иконки виджета. В поле можно самостоятельно ввести нужное число размера или прибавить/убавить при помощи кнопок выше/ниже. Расположение : здесь выбираем 1 из 3х вариантов расположения виджета на странице: нижний левый угол, верхний правый угол и нижний правый угол. z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. Чек-бокс “Показывать только на первом экране” - возможность показа виджета только на первом экране, не затрагивая другие страницы. Отступы : поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже. Шаг 2 - Ссылки. В открывшейся странице открылось поле с виджетом (как в шаге 1) и меню для наполнения кнопки текстом. Меню в разделе: Дизайн (см. скриншот 39) Заголовок виджета - поле для ввода текста в заголовок кнопки; Цвет фона - выбор цвета фона в кнопке (синяя стрелка); Цвет текста - выбор цвета текста в кнопке (желтая стрелка); Тень : чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. Ссылка - поля для подключения кнопок Поле с названием соц сети - отображается в кнопке (красная стрелка); Ссылка - поле для ввода ссылки соц сети; Иконка - по умолчанию стоит телеграмм, но при помощи кнопки “Выбрать иконку”, выбираете нужную соц сеть из списка (скриншот 40) и она автоматически подставится как в кнопку в виджете, так и в поле с ссылкой (см. красную стрелку на скриншоте 41). После добавления новой иконки требуется поменять название и вставить нужную ссылку. Если нужно удалить ссылку в виджете, то нужно нажать на кнопку “Удалить” (см. синюю стрелку на скриншоте 41). Шаг 3 - Размещение. В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: Название виджета - поле для названия виджета во внутренней системе touch_me; Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список; Где показывать - выбор устройств на которых будет показываться виджет; Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: На всех страницах указанного сайта; На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER); Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER); URL-адреса соответствующие Сначала при помощи кнопок выбираете как будет отображаться, а потом заполняете поля с ссылками. Полностью заполненные поля можно посмотреть на скриншоте. На примере выбрано, что виджет будет показываться сразу на выбранном сайте на разрешении больше 768 px на конкретных страницах (в примере это страницы каталога).
Как создать виджет Cookies для сайта — простая инструкция
Пошаговая инструкция, как создать виджет Cookies для сайта: зачем он нужен, какие элементы включить и как правильно настроить отображение уведомления пользователям. Для создания виджета есть 2 шага: Дизайн - выбор расцветки виджета, его расположения на странице, корректировка отступов; Размещение - название виджета в списке виджетов в touch_me, на каком сайте размещен. Шаг 1 - Дизайн. В открывшейся странице открылось поле с виджетом и меню для дизайна (см. скриншот 43). То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте (оно всегда серых цветов), а стрелкой показан сам виджет. Меню дизайна виджета: Цвет фона - цвет самого модального окна (на примере бирюзовый цвет); Цвет текста - цвет внутреннего текста (на примере синий цвет). Закругления : поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. Шрифт : поле для правки шрифта в виджете (см. скриншот 10). Размер текста : поле для правки размера описания виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Тень : чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. Меню дизайна кнопки: Цвет фона - цвет самого модального окна (на примере красный цвет); Цвет текста - цвет внутреннего текста-описания (на примере белый цвет). Закругления : поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. Отступы : поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже (см. скриншот 11). Здесь регулируется отступ между текстом и кнопкой. Меню расположения виджета: Расположение : здесь выбираем 1 из 3х вариантов расположения виджета на странице: нижний левый угол, нижний правый угол или верхний правый угол. z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. Отступы от границ экрана - поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже. Здесь регулируется отступ от экрана до виджета. Политика конфиденциальности - поле для ввода ссылки на политику конфиденциальности, которая размещена на вашем сайте. Шаг 2 - Размещение. В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: Название виджета - поле для названия виджета во внутренней системе touch_me; Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список.
Виджеты Touch_me: эффективные инструменты для развития вашего бизнеса
С помощью виджетов ToucH_me вы сможете вывести свой сайт на новый уровень, повысить продажи и улучшить взаимодействие с посетителями. Эти лёгкие и мощные инструменты позволяют вовлекать аудиторию, собирать лиды, возвращать пользователей и совершенствовать их опыт на сайте — и всё это без необходимости сложных интеграций и масштабных внедрений. Подключение всех виджетов осуществляется с помощью всего одного скрипта, они работают оперативно и не оказывают существенной нагрузки на сайт. Мы создали набор решений, которые помогут вам справиться с ключевыми задачами бизнеса. В линейке представлены инструменты для отправки уведомлений, сбора лидов, создания мультикнопки, организации пуш-подписок, отображения cookie-уведомлений и аналитики событий. Давайте подробнее рассмотрим каждый из виджетов. Уведомления: эффективный способ привлечь внимание и увеличить количество кликов С помощью виджета уведомлений вы сможете оперативно информировать посетителей о важных событиях: акциях, обновлениях, запуске новых продуктов и специальных предложениях. Уведомления отображаются поверх содержимого сайта, выделяются ярким дизайном и помогают управлять действиями пользователей. С уведомлениями вы сможете: оперативно сообщать об акциях и специальных предложениях; направлять внимание посетителей к ключевым разделам сайта; разделять аудиторию на сегменты; повышать кликабельность и конверсию; передавать данные о событиях в Roistat и другие системы. Виджет уведомлений станет незаменимым помощником для маркетологов, которые хотят быстро проверить эффективность новых идей и повысить конверсию без привлечения разработчиков. Виджет для сбора контактов: эффективный инструмент лидогенерации Виджет Лидхантер позволяет быстро собирать заявки, электронные адреса и номера телефонов. Пользователи могут оставить свои контакты в всплывающем окне, а данные будут надёжно храниться на серверах DataPro (Tier III) с соблюдением всех требований законодательства РФ. Среди ключевых возможностей виджета: настройка полей и условий появления виджета; автоматическая передача заявок в CRM-систему или Telegram-бота; адаптация под определённый сегмент аудитории или страницу сайта; проведение A/B-тестирования для разных текстов и предложений. Виджет идеально подходит для сайтов, предоставляющих услуги, B2B-сервисов, SaaS-платформ и других проектов, где важно качество лидов и скорость получения обратной связи. Мультикнопка: удобный доступ ко всем каналам связи Мультикнопка объединяет все ваши каналы коммуникации в едином интерфейсе: мессенджеры, социальные сети, телефон, электронную почту. Посетители сайта смогут быстро выбрать наиболее удобный способ связи, а вы — увеличить количество обращений. Преимущества мультикнопки: сокращение пути пользователя к связи с вами; увеличение числа запросов в мессенджеры; совместимость с мобильными устройствами и десктопами; лёгкая адаптация под фирменный стиль компании. Для сайтов с высоким трафиком мультикнопка станет простым и эффективным способом увеличить количество обращений, не ухудшая пользовательский опыт. Cookie-уведомление: соблюдение законодательных требований Этот виджет — стандартный, но необходимый элемент для корректной работы сайта. Он информирует пользователей о сборе данных и помогает вашему сайту соответствовать законодательным требованиям. Преимущества cookie-уведомления : возможность настройки стилей и текстов; быстрый запуск без привлечения разработчиков; совместимость с любыми CMS. Аналитика и интеграции: контроль эффективности и её повышение С Touch_me вы сможете передавать данные о событиях в CRM-системы и популярные аналитические сервисы. Вы получите возможность отслеживать показы, клики, отправку заявок и реакцию аудитории на ваши действия. Интеграция с Roistat позволит передавать не только заявки, но и информацию о поведении пользователей. Возможности аналитики: - получение статистики по каждому виджету; - сравнение эффективности различных инструментов; - автоматическая передача данных в CRM; - работа с UTM-метками и сегментами. Почему стоит выбрать ToucH_me? - Подключение за 2 минуты с помощью одного скрипта. - 14 дней бесплатного тестирования. - Хранение данных на серверах DataPro (Tier III). - Быстрые интеграции с CRM, Roistat, Telegram-ботом. - Поддержка и регулярные обновления. Вывод: виджеты Touch_me — инструменты, которые работают Виджеты Touch_me — это не просто дополнительные элементы дизайна, а мощные инструменты для увеличения продаж, повышения вовлечённости и количества обращений. Они подойдут бизнесу любого масштаба — от небольших сайтов до крупных SaaS-проектов.
Создание виджета
Чтобы создать новый виджет, нужно зайти в раздел Виджеты и выбрать свой сайт (см. скриншот). На странице будут показаны все виджеты, которые есть на выбранном сайте. Есть 2 варианта создать виджет (см. скриншот 7): Через кнопку вверху “Добавить виджет” Самое первое окно в списке виджетов “Создать новый виджет”. Нажимая на кнопку у нас открывается модальное окно с видами виджетов: Уведомления (десктоп), Уведомления (мобильный телефон), Тап-бар, Социальные сети, Сбор контактов и Cookies (см. скриншот нижу). Выбираем нужный тип и переходим к созданию. Правила работы с выбором цвета в виджетах: Нажимая на квадратик с цветом или номер цвета у нас открывается модальное окно с выбором цвета. Цвет можно задавать при помощи цветовой полоски, где цвета от красного до фиолетового. Перемещая белый курсор с этой полоске можно выбрать понравившийся цвет и в большом поле с градиентом выбрать необходимый оттенок. Если известен код цвета, то его можно ввести в поле HEX, а в полях RGB появятся значения для этого оттенка (см. скриншот). Правила работы со шрифтами: Чтобы изменить шрифт текста внутри виджета, требуется нажать на поле Шрифт и выбрать нужный: можно пролистать все шрифты или найти нужный через поиск (см. скриншот). Правила работы с отступами: В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже (см. скриншот).
Виджет “Уведомления (десктоп)”
Для создания виджета есть 3 шага: Дизайн - выбор расцветки виджета, его расположения на странице, корректировка отступов; Содержание - наполнение текстом и добавление необходимых ссылок для виджета; Размещение - название виджета в списке виджетов в touch_me, на каких страницах будет показан/не показан виджет, код для подключения к Яндекс Метрике. Шаг 1 - Дизайн. В открывшейся странице открылось поле с виджетом и меню для дизайна (см. скриншот 12). То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте (оно всегда серых цветов), а стрелкой показан сам виджет. Меню дизайна: Цвет фона - цвет самого модального окна (на примере зеленый цвет); Цвет заголовков - цвет текста темы виджета (на примере красный цвет); Цвет текста - цвет внутреннего текста-описания, раскрывающего заголовок (на примере фиолетовый цвет). Закругления : поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. Тень : чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. Шрифт : поле для правки шрифта в виджете (см. скриншот). Размер заголовков : поле для правки размера темы виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Размер текста : поле для правки размера описания виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Отступы внутри : поле для регулировки отступов в случае, если в виджете будет 2 и более окон (см. скриншот 13). Меню расположения: Расположение : здесь выбираем 1 из 3х вариантов расположения виджета на странице: нижний левый угол, нижний правый угол или верхний правый угол. z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. Чек-бокс “Показывать только на первом экране” - возможность показа виджета только на первом экране, не затрагивая другие страницы. Отступы : поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже (см. скриншот выше). При завершении этого шага можно перейти на следующий шаг при помощи кнопки “Следующий шаг” в правом нижнем углу или при перечислении шагов чуть выше поля создания виджета (см. скриншот ниже). Шаг 2 - Содержание. В открывшейся странице открылось поле с виджетом (как в шаге 1) и меню для содержания ссылки: Заголовок - поле для ввода темы виджета, здесь просто требуется ввести текст; Описание - поле для ввода текста-описания виджета, здесь просто требуется ввести текст; Ссылка - поле, куда нужно вставить ссылку, куда ведет виджет; Пунктирное поле - поле для загрузки файла изображения. Чтобы загрузить изображение нужно нажать на пунктирное поле и найти нужное изображение в вашем компьютере. Изображение должно быть в формате png или jpeg, весить не более 200 KB, пропорции 1 к 1; Кнопка Удалить - появляется только тогда, когда добавлено несколько ссылок в виджет. Пример полностью заполненного шага 2 на скриншоте ниже. В каждом окне виджета может быть только одна ссылка, которую требуется заполнить. Если нужно несколько ссылок, то можно добавить еще, но она отобразится как второе окно. Как добавить дополнительную ссылку: В меню найти кнопку “Добавить еще ссылку” (скриншот) В появившихся полях также заполнить поля как заполняли ранее для первой ссылки. При добавлении новой ссылки во всех ссылках появляется кнопка Удалить. На скриншоте показано как будет выглядеть страница при добавлении дополнительной ссылки. Дополнительное окно можно скрыть и раскрыть, нажав на кнопку Скрыть/Раскрыть внизу виджета. Шаг 3 - Размещение. В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: Название виджета - поле для названия виджета во внутренней системе touch_me; Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список; Начинать показ - здесь выбираете время для показа; Как долго показывать - здесь выбираете время показа; Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: На всех страницах указанного сайта; На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER); Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER); URL-адреса соответствующие. Сначала при помощи кнопок выбираете как будет отображаться, а потом заполняете поля с ссылками. Цель в Яндекс Метрике - поле для ввода кода для интеграции (получать в Яндекс Метрике). Полностью заполненные поля можно посмотреть на скриншотах ниже. На примере выбрано, что виджет будет показываться на выбранном сайте сразу на конкретных страницах в течение 6 секунд. Когда виджет полностью создан, то нужно нажать на кнопку “Сохранить изменения” слева в самом низу страницы (отмечено стрелкой на скриншоте).
Редактирование виджетов
Чтобы редактировать уже имеющийся виджет, нужно Зайти в раздел Виджеты и выбрать свой сайт (см. скриншот). На странице списка всех виджетов на выбранном сайте найти меню виджета в виде трех точек сбоку (см. скриншот). В меню выбираем пункт редактировать (см. скриншот).
Авторизация
Чтобы авторизоваться, необходимо ввести данные в поля e-mail и пароль (см. скриншот 1). При вводе пароля он будет скрыт, но чтобы просмотреть вводимый пароль, можно нажать на кнопку глазика: по умолчанию он закрыт, а когда пароль открыт, то и иконка глазика меняется на открытый глаз. Чтобы восстановить пароль, необходимо нажать на кнопку “Забыли пароль?”(см. скриншот 2) и в поле e-mail укажите свою почту, по которой ранее были зарегистрированы в touch_me (см. скриншот 3). Далее нажмите кнопку “Отправить”, чтобы на указанную почту пришло письмо новым паролем для входа.
Регистрация
Чтобы зарегистрироваться в touch_me нужно нажать на кнопку внизу “Зарегистрироваться” Далее заполняем поля для регистрации и нажимаем кнопку “Продолжить”: Имя - имя, под которым вас можно идентифицировать в программе; Сайт - сайт, на каком вы будете пользоваться нашим продуктом и отслеживать статистику; Номер телефона - для связи с вами; E-mail - почта для входа в учетную запись touch_me; Чек-боксы согласий с политикой обработки персональных данных, политикой конфиденциальности и получение уведомлений от touch_me - обязательные поля для регистрации на сайте. Пример полностью заполненной заявки для регистрации смотрите на скриншоте:
Виджет “Тап-бар”
Для создания виджета есть 3 шага: Содержание - выбор названия, иконок и количества разделов в тап-баре; Дизайн - расположение и вид вашего тап-бара; Размещение - название виджета в списке виджетов в touch_me, на каких страницах будет показан/не показан виджет. Шаг 1 - Содержание. В открывшейся странице открылось поле с виджетом и меню для содержания ссылок (см. скриншот). То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте (оно всегда серых цветов), а стрелкой показан сам виджет. В тап-баре может быть максимально 5 ссылок (разделов) , которые необходимо заполнить. Если нужно менее 5 разделов, то удаляем ненужный раздел при помощи кнопки удалить. При удалении раздела появляется кнопка “Добавить еще ссылку”, которая располагается ниже всех ссылок (см. скриншот 27). Она появляется только если разделов меньше 5, если хотите 6 и более, то кнопка не появится, т.к. для удобства пользователя вашего сайта нашей программой предусмотрено только 5 разделов. Меню для заполнения ссылки-раздела : Название - поле для ввода названия раздела, здесь просто требуется ввести текст (по умолчанию там указаны Каталог, Услуги, Корзина, Избранное и Контакты); Ссылка - поле, куда нужно вставить ссылку, куда ведет раздел; Пунктирное поле - поле для изменения иконки. Для этого необходимо нажать на крестик внутри поля, удалив текущую иконку, и нажать на кнопку Выбрать иконку (см. на красные стрелки на скриншоте) и в открывшимся модальном окне выбрать нужную (см. скриншот). После выбора иконки в пунктирном поле появляется название выбранной иконки, а на виджете показана сама иконка. Если выбранная иконка не подходит, то удаляем и заново выбираем другую. Кнопка Удалить - для удаления раздела. Шаг 2 - Дизайн. В открывшейся странице открылось поле с виджетом (как в шаге 1) и меню для дизайна тап-бара. В меню Расположения всего одно поле z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. Меню Дизайна: Шрифт : поле для правки шрифта в виджете (см. скриншот 10). Размер текста : поле для правки размера текста виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. Тень : чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. Поле Неактивное состояние - выбор цветов в тап-баре: Цвет фона - цвет самого тап-бара (на примере черный цвет); Цвет иконки - цвет выбранной иконки (на примере белый); Цвет текста - цвет названия раздела в тап-баре (на примере белый цвет); Поля Активное состояние - выбор цветов в тап-баре: Цвет фона - цвет самого тап-бара (на примере фиолетовый цвет); Цвет иконки - цвет выбранной иконки (на примере желтый цвет); Цвет текста - цвет названия раздела в тап-баре (на примере бирюзовый цвет); Шаг 3 - Размещение. В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: Название виджета - поле для названия виджета во внутренней системе touch_me; Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список; Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: На всех страницах указанного сайта; На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER); Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER); URL-адреса соответствующие Сначала при помощи кнопок выбираете как будет отображаться, а потом заполняете поля с ссылками. Цель в Яндекс Метрике - поле для ввода кода для интеграции (получать в Яндекс Метрике). Полностью заполненные поля можно посмотреть на скриншоте. На примере выбрано, что виджет будет показан на указанном сайте и будет находиться на всех страницах сайта. Когда виджет полностью создан, то нужно нажать на кнопку “Сохранить изменения” слева в самом низу страницы
Инструкция по интеграции целей в Яндекс.Метрику
Виджеты Touch_me поддерживают интеграцию целей из Яндекс.Метрики. Если вы хотите отслеживать эффективность в удобной для вас системе, просто дабвьте идентификатор цели в настройках размещения виджета. Доступно только для виджетов “Уведомления” и “Лидхантер” (Мультикнопка - в очереди на добавление) Шаг 1. Создание цели в Яндекс.Метрике Убедитесь, что метрика подключена к вашему сайту и осуществляется сбор данных. Перейдите на вкладку “Цели” Нажмите добавить цель При добавлении цели выберите: 4.1. - Введите название 4.2. - Выберите JavaScript-событие 4.3. - Пропишите идентификатор, например touch_me 4.4. - Скопируйте код - его нужно будет вставить в Touch_me 4.5. - Добавьте цель ym(96387973,'reachGoal','test') Только вместо test будет ваш идентификатор, поэтому лучше сразу копировать код цели полностью из метрики. Шаг 2. Добавьте код для цели в Touch_me Зайдите на последний шаг, добавления виджета. В размещение. Вам необходимо будет в блоке “Цель в Яндекс.Метрике” ввести код из пункта 4.4. в поле и сохранить.
Начните повышать
конверсию уже сегодня
Подключите Touch_me и превратите трафик
в реальные заявки
