Здесь очень похож функционал с уведомлениями на десктопе, поэтому все скриншоты можно посмотреть в уведомлениях для десктопа.

Шаг 1 - Дизайн.

В открывшейся странице открылось поле с виджетом и меню для дизайна (см. скриншот).
То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте
(оно всегда серых цветов), а стрелкой показан сам виджет. 

Меню дизайна:

1. Цвет фона - цвет самого модального окна (на примере бирюзовый цвет);

2. Цвет заголовков - цвет текста темы виджета (на примере красный цвет);

3. Цвет текста - цвет внутреннего текста-описания, раскрывающего заголовок (на примере фиолетовый цвет).

4. Закругления: поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. 

5. Тень: чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. 

6. Шрифт: поле для правки шрифта в виджете (см. скриншот 10). 

7. Размер заголовков: поле для правки размера темы виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. 

8. Размер текста: поле для правки размера описания виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. 
   

Меню Расположения:

1. z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. 

2. Чек-бокс “Показывать только на первом экране” - возможность показа виджета только на первом экране, не затрагивая другие страницы.

3. Отступы: поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже (см. скриншот 11). 

При завершении этого шага можно перейти на следующий шаг при помощи кнопки “Следующий шаг” в правом нижнем углу или при перечислении шагов чуть выше поля создания виджета (см. скриншот 14).

Шаг 2 - Содержание.

В открывшейся странице открылось поле с виджетом (как в шаге 1) и меню для содержания ссылки:

1. Заголовок - поле для ввода темы виджета, здесь просто требуется ввести текст;

2. Описание - поле для ввода текста-описания виджета, здесь просто требуется ввести текст;

3. Ссылка - поле, куда нужно вставить ссылку, куда ведет виджет;

4. Пунктирное поле - поле для загрузки файла изображения. Изображение должно быть в формате png или jpeg.

В отличие от десктопных уведомлений, в виджет для мобильного телефона можно добавить только одну ссылку!

Шаг 3 - Размещение.

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

а просто меню. Здесь следующие поля для заполнения: 

1. Название виджета - поле для названия виджета во внутренней системе touch_me;

2. Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список;

3. Начинать показ - здесь выбираете время для показа;

4. Как долго показывать - здесь выбираете время показа;

5. Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: 

• На всех страницах указанного сайта;

•  На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER);

• Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER);

• URL-адреса соответствующие

Сначала при помощи кнопок выбираете как будет отображаться, а потом заполняете поля с ссылками.

6. Цель в Яндекс Метрике - поле для ввода кода для интеграции (получать в Яндекс Метрике).

Полностью заполненные поля можно посмотреть на скриншотах 22 и 23. На примере выбрано,

что виджет будет показан через 10 секунд после попадания на указанный сайт и находиться в течение

всего времени нахождения пользователя на сайте на всех страницах, кроме указанных страниц. 

Когда виджет полностью создан, то нужно нажать на кнопку “Сохранить изменения” слева в самом низу страницы.