Как создать виджет Cookies для сайта — простая инструкция

Пошаговая инструкция, как создать виджет Cookies для сайта: зачем он нужен, какие элементы включить и как правильно настроить отображение уведомления пользователям.

Для создания виджета есть 2 шага: 

1. Дизайн - выбор расцветки виджета, его расположения на странице, корректировка отступов;

2. Размещение - название виджета в списке виджетов в touch_me, на каком сайте размещен. 

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

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

Меню дизайна виджета:

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

2. Цвет текста - цвет внутреннего текста (на примере синий цвет).

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

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

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

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

Меню дизайна кнопки:

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

2. Цвет текста - цвет внутреннего текста-описания (на примере белый цвет).

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

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

Меню расположения виджета:

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

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

2. Отступы от границ экрана - поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже. Здесь регулируется отступ от экрана до виджета.

Политика конфиденциальности - поле для ввода ссылки на политику конфиденциальности, которая размещена на вашем сайте.

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

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

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

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