Онлайн чат на сайт
С помощью данной статьи, вы сможете подключить бота к своему сайту
Установив Онлайн-чат на сайт вы сможете собирать данные о клиентах, автоматизировать общение с клиентами на сайте или организовать работу отдела продаж подключая менеджеров к диалогам с клиентами. Вести диалоги с клиентами можно, как из интерфейса Salebot на сайте, так и в нашем мобильном приложении для Android и iOS.
Все основные настройки описали в этой инструкции.
Для создания чата перейдите в пункт меню "Каналы" и нажмите на кнопку "Online-chat".
Каналы - нажимаем Online-chat
Сразу после клика по кнопке "Online- chat" откроется форма настроек созданного онлайн-чата.
Форма настроек онлайн-чата
Внешний вид чата будет отличаться в зависимости от настроек. В правой панели отображается внешний вид чата, который вы создали, его можно открыть и закрыть.
Пример отображения онлайн-чата на сайте. Данный онлайн-чат создан без изменения настроек по умолчанию, изменен только цвет.
Отображение онлайн-чата, если он закрыт. В скриншоте слева тип оформления "Классический", справа тип оформления "Компактный".
Вид онлайн-чата в открытом виде без формы сбора данных.
После создания чата и установки всех настроек нажмите кнопку "Сохранить и закрыть". Вы окажетесь на странице "Каналы". Чтобы получить код для добавления онлайн-чата к вам на сайт нажмите кнопку
"Встроить код на сайт"
Раздел Каналы - созданный онлайн-чат - кнопка для получения кода для добавления онлайн-чата на сайт
У вас откроется всплывающее окно с кодом. Нажмите кнопку
СкопироватьДалее этот код необходимо установить на каждую страницу вашего сайта внутри тега <head>
Пример кода онлайн-чата для добавления на сайт
Вставьте данный код на каждую страницу вашего сайта внутри тега <head>. На этом подключение онлайн чата к сайту завершено.
Оформление
Оформление, продолжение
Заголовок чата. Самое верхнее поле чата (По умолчанию, Генерал ботов)
Подзаголовок чата. Находится под заголовком чата. (По умолчанию, Powered by SaleBot.pro)
Надпись на кнопке виджета. По умолчанию указаны Заголовок и подзаголовок чата. Можно установить свою фразу.
Пример, как выглядит кнопка онлайн чата если в поле Надпись на кнопке виджета указать "Здесь вам ответят на все вопросы".
Надпись на кнопке виджета.
Приветственное сообщение в чате. В этом поле укажите сообщение, которое видит пользователь при открытии чата до того, как он написал что-либо.
Ориентация текста. Выравнивание текста относительно правого, левого края или по центру окна.
Кнопка чата. Можно выбрать как будет выглядеть кнопка онлайн-чата на разных устройствах (веб-версия сайта и мобильная версия сайта).
Возможны 3 варианта:
Расположение кнопки. Можно разместить онлайн чат как слева, так и справа.
Цветовая палитра. Можно выбрать цвет из предложенных, выбрать свой цвет в круговой палитре или возможный градиент. Цвет кнопки на сайте совпадает с цветом онлайн-чата.
Также можно выбрать вариант цвета текста: черный или белы й.
Настройки цветовой палитры
Аватар оператора. С помощью него можно поменять аватар оператора в онлайн - чате. Аватар может быть добавлен как ссылкой, так и загруженным файлом. Можно отключить отображение аватара оператора.
По умолчанию "Введите сообщение и нажмите Enter". Укажите своё знач ение или оставьте по умолчанию.
По умолчанию "Выберите удобный способ связи"
Пример отображения в мобильной версии онлайн-чата:
мобильная версия онлайн-чата на сайте
Если вставить в поле #{operatorName}, то будет показано имя оператора, указанное в разделе Сотрудники. Назначить оператора можно вручную: кликнуть в диалоге с клиентом кнопку "Взять клиента" или "Передать клиента". Или настроить автораспределение клиентов между операторами в разделе Сотрудники.
Пример отображения в мобильной версии онлайн - чата:
Как указать имя сотрудника: раздел "Сотрудники" - меню (три точки) - указать имя
По умолчанию "На данный момент операторов нет в сети. Оставьте нам сообщение и мы обязательно вам ответим в ближайшее время"
Статус "В сети" бот получает из раздела "Сотрудники". Возможные статусы: В сети, Перерыв, Отсутствует.
Сменить свой статус также можно в верхней строке, находясь в любом разделе проекта.
Пример данного сообщения в онлайн-чате:
Язык в чате. Можно выбрать Русский или Английский язык для служебных сообщений в чате, которые установлены по умолчанию
Пример сообщений по умолчанию из поля "Сообщение, когда операторов нет в сети" и "Сообщение, когда клиенту назначается оператор при включенном" при включенном английском языке в настройках онлайн-чата :
Данные настройки позволяют включить/выключить звуковые уведомления открытия чата и о новых сообщениях в онлайн-чате для клиентов на сайте:
Можно выбрать какие мессенджеры будут отображаться на сайте при наведении курсора на виджет (значок) онлайн-чата.
Кнопки мессенджеров появятся только после того, как эти мессенджеры будут подключены к конструктору.
Если включить данный переключатель, то на сайте появятся только кнопки мессенджеров. Остальные функции онлайн-чата будут отключены.
Пример отображения кнопок при включенном ползунке Отображать только мессенджеры
По умолчанию "Написать в"
Начальное сообщение в Whatsapp. Этот текст будет записан в поле ввода у пользователя в приложении Whatsapp при переходе по кнопке с сайта. Ему будет достаточно нажать "Отправить". Так же прописывайте этот текст в условии стартового блока цепочки сообщений.
Свои ссылки. Добавлена возможность кроме кнопок мессенджеров выводить свои кнопки с ссылками.
В настройках можно указать url ссылки и добавить изображение:
Загрузка файлов. Данная настройка даёт возможность получать вложения от клиентов сайта, например, изображения. Ограничения на размер входящего файла ч ерез онлайн-чат : 20 МВ
Данные пользователя. В первом сообщении можно получить согласие на обработку персональных данных и/или собрать данные пользователя, используя форму для сбора данных. Заполнение формы можно пропустить или сделать обязательной, включив ползунок Сделать заполнение формы обязательным.
Пример первого сообщения со сбором данных:
Чекбокс "Запрос на звонок" отображается в настройках онлайн-чата, если в проекте подключена Телефония.
Принцип работы:
При заполнении формы пользователь может поставить галочку на запрос обратного звонка, тогда автоматически будет выбран один из сотрудников, у кого подключена телефония и будет совершен звонок клиенту.
Сотрудник назначается автоматически. При выборе сотрудника проверяется
- статус "На смене"
- любая роль, в т.ч. администратор
- у сотрудника подключена(настроена) телефония
После звонка этот сотрудник будет назначен ответственным этому пользователю.
Запрашивать разрешение на обработку персональных данных. По умолчанию отключен. При включенном ползунке при первом запуске онлайн-чата появится сообщение Даю согласие на обработку персональных данных и кнопка
Подтвердить
Настройка онлайн-чата
Пример первого сообщения для получения разрешения на обработку персональных данных:
Вид онлайн-чата на сайте
Настройка начальных кнопок.
При клике по кнопке Добавить кнопку откроется форма создания начальной кнопки:
Кнопка может иметь одну из функций:
Ссылка: позволяет добавить ссылку для перехода на другую страницу сайта или сторонний веб-ресурс.
Почта: клиент будет перенаправлен на почтовый сервис, чтобы написать письмо на почту, указанную в настройках кнопки
Телефон: запуститься приложение для звонков. Или будет предложено выбрать с помощью какого приложения позвонить. Зависит от устройства, на котором пользователь (клиент) переходит по этой кнопке. Вызов будет на номер, указанный в настройках кнопки
Сообщение: данная функция позволяет делать быстрые ответы от бота при клике на кнопку.
Например, можно сделать кнопку с названием Адрес, а в поле Сообщение укзать точный адрес и время работы офиса.
Текст в поле "Сообщение" будет без переноса строк. Учитывайте этот момент в работе.
Обработка клиентов с разных доменов. Эта настройка позволяет разделить диалоги, если один и тот же человек пишет в онлайн чат, размещенный на разных доменах. По умолчанию это один и тот же диалог.
Кнопки в тексте будут отображаться в истории онлайн чата (Переключатель). Включите его, чтобы кнопки в тексте из конструктора воронок отображались в истории онлайн -чата с клиентом
Скрыть онлайн чат. Не обязательно удалять онлайн чат с сайта. Емо можно просто скрыть.
Сначала устанавливаем условия, в какой момент должно выполниться настраиваемое действие:
Варианты условий
Продолжение: варианты условий
Далее выбираем какое действие для онлайн-чата должно выполниться автоматически:
В данной статье рассмотрены основные моменты по настройке и подключению онлайн чата на сайт.
Чтобы подробнее разобраться с базовым функционалом конструктора, приглашаем пройти тему "Автовебинарная воронка с подробным разбором базового функционала"
👇 Присоединяйтесь к бесплатному обучению от Salebot.pro 👇
Как установить онлайн чат на сайт
Last modified 1mo ago