Виджет на сайт

1. Нажмите на кнопку «Добавить виджет».

2. Заполните форму создания виджета:

• «Название» — укажите названия виджета. Оно будет отображаться в списке добавленных виджетов.
• «Домен расположения» — укажите домен вашего сайта, на котором будет расположен виджет. Нужно указать только домен в виде «example.com».

Нажмите на строку виджета для открытия его настроек.

На странице настроек виджета будет автоматически создана первая кнопка «Чат». В правом нижнем углу будет отображен виджет для предпросмотра, который можно включить либо выключить.

Предпросмотр позволяет проверить изменения настроек виджета, отображение добавленных кнопок в виджет и т.д. прямо в интерфейсе системы.

Нажмите на кнопку «Добавить» и выберите в меню пункт «Кнопку».

Заполните форму добавления кнопки:

• В блоке «Тип» выберите пункт «Контакт».
• В блоке «Основное»:
  • выберите необходимый тип контакта из списка;
  • укажите контактные данные;
  • установите чекбокс «Показывать название кнопки при наведении» и введите название кнопки, оно будет отображаться при наведении мыши на кнопку в виджете.
• В блоке «Пульсация» можно включить эффект пульсации кнопки.
• В блоке «Индивидуальный цвет» для кнопки можно задать цвет по умолчанию и цвет при наведении.
• Нажмите кнопку «Сохранить».

Нажмите на кнопку «Добавить» и выберите в меню пункт «Кнопку».

Заполните форму добавления кнопки:

• В блоке «Тип» выберите пункт «Ссылка».
• В блоке «Основное» введите необходимую ссылку. При нажатии на кнопку в виджете ссылка будет открыта в новой вкладке браузера.
• Установите чекбокс «Показывать название кнопки при наведении» и введите название кнопки, оно будет отображаться при наведении мыши на кнопку в виджете.
• Выберите иконку кнопки из имеющегося набора, либо переключитесь на вкладку «Из Font Awesome» и укажите класс иконки Font Awesome, для этого:
  • Перейдите на сайт fontawesome.com.
  • Выберите иконку и скопируйте её класс. Найти его можно во вкладке HTML, кликнув на иконку. Обычно класс выглядит так: fa-solid fa-phone
  • Вставьте класс в поле.
• В блоке «Пульсация» можно включить эффект пульсации кнопки.
• В блоке «Индивидуальный цвет» для кнопки можно задать цвет по умолчанию и цвет при наведении.
• Нажмите кнопку «Сохранить».

Данный тип кнопки при нажатии производит прокрутку страницы вверх.

Нажмите на кнопку «Добавить» и выберите в меню пункт «Кнопку».

Заполните форму добавления кнопки:

• В блоке «Тип» выберите пункт «Прокрутка наверх».
• В блоке «Основное» установите чекбокс «Показывать название кнопки при наведении» и введите название кнопки, оно будет отображаться при наведении мыши на кнопку в виджете.
• В блоке «Анимация» задайте скорость анимации и выберите желаемый эффект прокрутки страницы.
• В блоке «Пульсация» можно включить эффект пульсации кнопки.
• В блоке «Индивидуальный цвет» для кнопки можно задать цвет по умолчанию и цвет при наведении.
• Нажмите кнопку «Сохранить».

Группа кнопок представляет собой кнопку, при нажатии на которую всплывают кнопки, входящие в состав группы.

Нажмите на кнопку «Добавить» и выберите в меню пункт «Группу кнопок».

Заполните форму добавления группы кнопок:

• Задайте направление раскрытия кнопок, входящих в группу: по вертикали, либо по горизонтали.
• В блоке «Пульсация» можно включить эффект пульсации кнопки.
• В блоке «Индивидуальный цвет» для кнопки можно задать цвет по умолчанию и цвет при наведении.
• Нажмите кнопку «Сохранить».

Для добавления кнопки в группу нажмите на кнопку «Добавить кнопку в группу» и заполните форму добавления кнопки.

Вы можете менять порядок кнопок и перемещать их в/из группы.

Для этого нажмите на левую область кнопки и перетащите кнопку в необходимую позицию.

В блоке «Вид и позиция кнопок» вы можете настроить следующие параметры:

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

В блоке «Чат» вы можете настроить следующие параметры чата в виджете:

• Текст в шапке: заголовок окна чата.
• Приветственное сообщение: сообщение, которое будет отправлено клиенту при открытии чата.
• Задержка приветствия: задержка в секундах до отправки приветственного сообщения в чат клиенту.
• Чекбокс «Автоматически открывать чат с приветственным сообщением»: при включении, чат с приветственным сообщением будет автоматически открыт при загрузке страницы сайта, через заданную задержку вывода приветствия.
• Радиус скругления окна чата: очень маленький, маленький, средний, большой.
• Цвет шапки чата и исходящих сообщений.
• Цвет акцентных кнопок чата и цвет акцентных кнопок чата при наведении.

После внесения изменений в настройки нажмите кнопку «Сохранить.

Для настройки сбора данных клиентов перейдите во вкладку «Сбор данных».

Для вывода клиенту запроса согласия на обработку персональных данных (ПДн) выполните следующие действия:

1. Включите сбор согласия на обработку ПДн.
2. Введите название ссылки. При клике на ссылку клиенту будет выведен текст согласия на обработку ПДн.
3. Введите текст согласия на обработку ПДн. Если в системе заполнены данные в разделе «Компания» — «Обработка ПДн».вы можете нажать кнопку «Сгенерировать из настроек обработки ПДн» для автоматической генерации текста согласия.
4. Нажмите кнопку «Сохранить».

После включения сбора согласия на обработку ПДн при первом открытии чата в виджете клиенту будет предложено согласиться/отказаться от обработки ПДн.

В системе в разделе «Чаты» будет отображена информация о согласии/отказе клиента на обработку ПДн.

Задайте в какой момент должна выводиться форма сбора контактных данных в чате виджета:

• После первого сообщения клиента: форма сбора контактных данных появится после получения первого сообщения от клиента.
• Сразу при открытии чата: форма сбора контактных данных появится сразу после открытия чата.

В системе имеется возможность сбора следующих контактных данных клиентов:

• Фамилия
• Имя
• Отчество
• Телефон
• Почта

Для каждого поля контактных данных настройте следующие параметры:

• Измените название поля, если оно отличается от названия, предлагаемого системой по умолчанию.
• Включите переключатель для вывода поля в форме в чате виджета.
• Установите чекбокс «Обязательно к заполнению», если поле является обязательным.

После настройки параметров сбора контактных данных нажмите кнопку «Сохранить».

В системе в разделе «Чаты» будет отображена информация о полученных контактных данных клиента.

1. Перейдите во вкладку «Экспорт» и скопируйте код виджета, нажав кнопку «Скопировать».
2. Откройте HTML-код страницы вашего сайта в редакторе или в панели управления CMS (WordPress, Tilda, Bitrix и др.).
3. Вставьте код виджета перед закрывающим тегом </body> в нижней части страницы. Это обеспечит корректную загрузку виджета.
4. Сохраните файл или опубликуйте изменения в вашей CMS. Виджет появится на сайте после обновления страницы.