Гайды и документация TouchMe — настройки виджетов и интеграций
Подробные гайды и документация по сервису TouchMe: инструкции по настройке виджетов, интеграциям, сценариям показа и работе с личным кабинетом. Всё, чтобы быстро запустить и эффективно использовать сервис.
Виджет “Уведомления (мобильный телефон)”
Здесь очень похож функционал с уведомлениями на десктопе, поэтому все скриншоты можно посмотреть в уведомлениях для десктопа . Шаг 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; Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список.
Создание виджета
Чтобы создать новый виджет, нужно зайти в раздел Виджеты и выбрать свой сайт (см. скриншот). На странице будут показаны все виджеты, которые есть на выбранном сайте. Есть 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 и превратите трафик
в реальные заявки
