Salebot.pro
Search
K

Онлайн-чат на сайт

В данной статье рассмотрены основные моменты по настройке и подключению онлайн-чата на сайт.
Установив Онлайн-чат на сайт, вы сможете собирать данные о клиентах, автоматизировать общение с ними на сайте или организовать работу отдела продаж, подключая менеджеров к диалогам с клиентами. Вести диалоги с клиентами можно как из интерфейса Salebot на сайте, так и в нашем мобильном приложении для Android и iOS.
Все основные настройки описали в этой инструкции.

Как создать онлайн-чат

Для создания чата перейдите в пункт меню "Каналы" и нажмите на кнопку "Online-chat".
Каналы - нажимаем Online-chat
Сразу после клика по кнопке "Online-chat" откроется форма настроек созданного онлайн-чата.
Форма настроек онлайн-чата
Внешний вид чата будет отличаться в зависимости от настроек. В правой панели отображается внешний вид чата, который вы создали, его можно открыть и закрыть. Пример отображения онлайн-чата на сайте. Данный онлайн-чат создан без изменения настроек (т.е., по умолчанию), изменен только цвет.
Отображение онлайн-чата, если он закрыт. В скриншоте слева тип оформления "Классический", справа тип оформления "Компактный".
Вид онлайн-чата в открытом виде без формы сбора данных.
Как настроить "Классический", "Компактный" и "Адаптивный" тип оформления расскажем ниже.

Как установить онлайн-чат на сайт

После создания чата и установки всех настроек нажмите кнопку "Сохранить и закрыть". Вы окажетесь на странице "Каналы". Чтобы получить код для добавления онлайн-чата к вам на сайт нажмите кнопку "Встроить код на сайт"
Раздел Каналы - созданный онлайн-чат - кнопка для получения кода для добавления онлайн-чата на сайт
У вас откроется всплывающее окно с кодом. Нажмите кнопку Скопировать
Далее этот код необходимо установить на каждую страницу вашего сайта внутри тега <head>
Пример кода онлайн-чата для добавления на сайт
Вставьте данный код на каждую страницу вашего сайта внутри тега <head>. На этом подключение онлайн-чата к сайту завершено.

Основные настройки онлайн-чата

Оформление

Оформление

Заголовок чата

Это самое верхнее поле чата, в котором вы указываете наименование, подходящее для вашего онлайн-помощника.
По умолчанию онлайн-чат будет иметь название "Salebot".

Подзаголовок чата

Это поле находится ниже, чем заголовок чата, и позволяет Вам уточнить роль онлайн-чата на вашем ресурсе.
По умолчанию будет написано "Powered by Saletbot.pro"

Надпись на кнопке виджета

По умолчанию указаны "Заголовок" и "Подзаголовок чата". Можно установить свою фразу.
Ниже приведен пример, как выглядит кнопка онлайн-чата, если в поле "Надпись на кнопке виджета" указать "Здесь вам ответят на все вопросы".
Надпись на кнопке виджета.

Приветственное сообщение в чате

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

Ориентация текста

С помощью панели ориентации текста можно выравнивать заголовок и подзаголовок онлайн-чата относительно правого, левого края или центра по аналогии с любыми текстовыми редакторами типа Word, Googledoc и т.п.
Текст выровнен справа

Кнопка чата

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

Цветовая палитра

Можно выбрать цвет из предложенных, выбрать свой цвет в круговой палитре или градиент. Цвет кнопки на сайте совпадает с цветом онлайн-чата. Также можно выбрать вариант цвета текста.

Аватар онлайн-чата

С помощью него можно поменять аватар помощника в онлайн-чате. Аватар может быть добавлен как ссылкой, так и загруженным файлом. Можно отключить отображение аватара оператора.
При активности данного переключателя аватар будет виден
При выключенном состоянии переключателя аватара видно не будет

Настройки

Надпись внутри поля ввода

В этом поле по умолчанию установлен следующий текст - "Введите сообщение и нажмите Enter".
Вы можете самостоятельно указать свое значение или оставить по умолчанию.

Надпись в мобильной версии

По умолчанию установлен текст "Выберите удобный способ связи"
Пример отображения в мобильной версии онлайн-чата:
мобильная версия онлайн-чата на сайте

Сообщение при назначении клиенту оператора

Если вставить в поле #{operatorName}, то будет показано имя оператора, указанное в разделе Сотрудники. Назначить оператора можно вручную: кликнуть в диалоге с клиентом кнопку "Взять клиента" или "Передать клиента". Или настроить автораспределение клиентов между операторами в разделе Сотрудники.
Пример отображения в мобильной версии онлайн-чата:
Как указать имя сотрудника: раздел "Сотрудники" - меню (три точки) - указать имя

Сообщение при отсутствии операторов в сети

По умолчанию будет высвечивать следующее сообщение: "На данный момент операторов нет в сети. Оставьте нам сообщение и мы обязательно вам ответим в ближайшее время"
Статус "В сети" бот получает из раздела "Сотрудники". Возможные статусы: В сети, Перерыв, Отсутствует.
Сменить свой статус также можно в верхней строке, находясь в любом разделе проекта.
Пример данного сообщения в онлайн-чате:

Язык в чате

Можно выбрать русский или английский язык для служебных сообщений в чате, которые установлены по умолчанию
Пример сообщений по умолчанию из поля "Сообщение, когда операторов нет в сети" и "Сообщение, когда клиенту назначается оператор при включенном" при включенном английском языке в настройках онлайн-чата :

Звуковые уведомления в чате.

Данные настройки позволяют включить/выключить звуковые уведомления открытия чата и о новых сообщениях в онлайн-чате для клиентов на сайте:

Отображение мессенджеров

Можно выбрать какие мессенджеры будут отображаться на сайте при наведении курсора на виджет (значок) онлайн-чата.
Кнопки мессенджеров появятся только после того, как эти мессенджеры будут подключены к конструктору.

Ползунок Отображать только мессенджеры.

Если включить данный переключатель, то на сайте появятся только кнопки мессенджеров. Остальные функции онлайн-чата будут отключены.
Пример отображения кнопок при включенном ползунке Отображать только мессенджеры

Надпись к мессенджерам

По умолчанию "Написать в"

Начальное сообщение в Whatsapp

Этот текст будет записан в поле ввода у пользователя в приложении Whatsapp при переходе по кнопке с сайта. Ему будет достаточно нажать "Отправить". Так же прописывайте этот текст в условии стартового блока цепочки сообщений.

Свои ссылки

Добавлена возможность, помимо кнопок мессенджеров, выводить свои кнопки с ссылками.
В настройках можно указать url ссылки и добавить изображение:
Загрузка файлов
Данная настройка даёт возможность получать вложения от клиентов сайта, например, изображения.
Ограничения на размер входящего файла через онлайн-чат : 20 МВ

Данные пользователя

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

Запрос на звонок

Чекбокс "Запрос на звонок" отображается в настройках онлайн-чата, если в проекте подключена Телефония.
Принцип работы:
При заполнении формы пользователь может поставить галочку на запрос обратного звонка, тогда автоматически будет выбран один из сотрудников, у кого подключена телефония и будет совершен звонок клиенту.
Сотрудник назначается автоматически. При выборе сотрудника проверяется - статус "На смене" - любая роль, в т.ч. администратор - у сотрудника подключена(настроена) телефония
После звонка этот сотрудник будет назначен ответственным этому пользователю.

Запрашивать разрешение на обработку персональных данных

Данный параметр по умолчанию отключен. При включенном ползунке при первом запуске онлайн-чата появится сообщение Даю согласие на обработку персональных данных и кнопка Подтвердить
Настройка онлайн-чата
Пример первого сообщения для получения разрешения на обработку персональных данных:
Вид онлайн-чата на сайте

Настройка начальных кнопок

При клике по кнопке Добавить кнопку откроется форма создания начальной кнопки:
Кнопка может иметь одну из функций:
  1. 1.
    Ссылка: позволяет добавить ссылку для перехода на другую страницу сайта или сторонний веб-ресурс.
  1. 2.
    Почта: клиент будет перенаправлен на почтовый сервис, чтобы написать письмо на почту, указанную в настройках кнопки:
  1. 3.
    Телефон: запустится приложение для звонков. Или будет предложено выбрать с помощью какого приложения позвонить. Зависит от устройства, на котором пользователь (клиент) переходит по этой кнопке. Вызов будет на номер, указанный в настройках кнопки
  1. 4.
    Сообщение (от администратора / пользователя) данная функция позволяет делать быстрые ответы от бота при клике на кнопку. Например, можно сделать кнопку с названием Адрес, а в поле Сообщение указать точный адрес и время работы офиса.
Текст в поле "Сообщение" будет без переноса строк. Учитывайте этот момент в работе.
Обработка клиентов с разных доменов. Эта настройка позволяет разделить диалоги, если один и тот же человек пишет в онлайн-чат, размещенный на разных доменах. По умолчанию это один и тот же диалог.
Данный переключатель необходим, если разные онлайн-чаты установлены на разных сайтах на одном домене, и нужно разделить диалоги, когда пишет один и тот же человек
Например:
https://salebot.site/page1/
https://salebot.site/page2/
Кнопки в тексте будут отображаться в истории онлайн чата (Переключатель). Включите его, чтобы кнопки в тексте из конструктора воронок отображались в истории онлайн -чата с клиентом

Скрыть онлайн-чат

Необязательно удалять онлайн чат с сайта. Емо можно просто скрыть с помощью соответствующего переключателя:

Автоматические действия

Принцип работы автоматических действий следующий: для того чтобы автоматическое действие сработало, необходимо установить определенный триггер для данного действия - условие.
Сначала устанавливаем условия, в какой момент должно выполниться настраиваемое действие. Можно добавлять условия в зависимости от времени дня, страны посетителя, города, URL текущей страницы и т.п.
Подробнее об условиях:
  1. 1.
    Время дня. Выставьте автоматическое срабатывание онлайн-чата в зависимости от того, в какой промежуток клиент взаимодействует с онлайн-чатом (например, в счастливые часы после 16:00 при посещении вашего лендинга клиент может получить скидку).
Пример условия (время дня) и автоматического действия (сообщение от им. администратора)
  1. 2.
    Выполнить это действие только один раз за день для пользователя. Данное условие может быть применено в различных случаях: например, для направления партнерских или иных ссылок в сообщении от имени администратора/пользователя (как доступ к новым материалам курса); для накопительной системы и т.п.:
  1. 3.
    Город посетителя. Страна посетителя. Выставив данное условие, можно установить необходимый круг пользователей, которым бы была полезна ваша предоставляемая услуга, если, например, необходимо для покупки товара (услуги) личное присутствие клиента.
В данном случае можно установить соответствие как равно, так и не равно. Например, если вам необходимо установить город или страну (или список стран), для которых автоматическое действие воспроизводиться не будет, поставьте не равно.
  1. 4.
    День недели. Данное условие является триггером для автоматических действий, исходя из дня недели. Здесь также можно установить чекбоксы (галочки) напротив дней недели, выставить соответствие равно/не равно и выбрать выполняемое онлайн-чатом автоматическое действие.
Например, можно установить все рабочие дни недели ваших операторов/менеджеров для последующей их связи с клиентами.
  1. 5.
    URL текущей страницы. Автоматическое действие будет срабатывать в зависимости от того, содержится/не содержится или равно/не равно URL ссылки.
Пример, как отключить онлайн-чат на некоторых страницах сайта
  1. 5.
    Сообщение пользователя. Чтобы автоматическое действие сработало с таким условием, необходимо в поле вставить определенное слово от пользователя:
  1. 7.
    Время на странице. Данное условие схоже с временем дня, однако, например, если ваша клиентская база находится в разных часовых поясах и есть необходимость выполнения автоматического действия только в одно и то же время у каждого часового пояса, можно воспользоваться этим условием.
  2. 8.
    Время от закрытия окна Salebot. Такое условие выставляется аналогично времени дня или времени на странице, однако зависит от действия самого пользователя по закрытию соответственно окна Salebot.
  3. 9.
    Время от первого сообщения посетителя. Автоматическое действие сработает спустя определенный промежуток времени (в секундах), после того как ваш клиент написал какое-либо сообщение в онлайн-чат.
  4. 10.
    Время без ответа оператора с первого сообщения пользователя. Данное условие также выставляется в секундах и выполняется соответственно вне зависимости от того, ответил клиенту оператор или нет.
При необходимости условия можно сочетать друг с другом и выставлять срабатывание автоматического действия исходя из нескольких условий:
Исходя из примера выше, автоматическое действие выполнится только для клиентов из Москвы после 16:00 часов в понедельник, вторник и среду.
Далее выбираем какое действие для онлайн-чата должно выполниться автоматически:
  1. 1.
    Автоматическое открытие чата. Данное действие соответственно откроет онлайн-чат для пользователя. Для данного действия не требуется дополнительных настроек.
  2. 2.
    Автоматическое приглашение к диалогу. Такое автоматическое действие направит пользователю любое прописанное в поле сообщение:
  1. 3.
    Скрыть ярлык онлайн-чата с сайта. Данное действие можно применить, например, по истечении рабочих часов ваших администраторов.
  2. 4.
    Показать ярлык онлайн-чата. Аналогично предыдущему действию, можно показать ярлык онлайн-чата для клиентов в определенный промежуток времени (или по иным другим необходимым условиям).
  3. 5.
    Отправить сообщение от имени администратора. Данное действие направит соответственно сообщение в онлайн-чате от имени администратора.
  1. 6.
    Отправить форму. Данное действие служит для сбора данных (информации) клиента, где вы можете заполнить текст формы, выбрать необходимые поля сбора данных (имя, номер телефона, email, чекбокс или иное поле ввода, которое можно настроить самостоятельно).
Пример формы.
Иное поле ввода можно настроить, например, для сбора города проживания или для другой информации:
Заполнение поля формы
Вид поля формы в отправке

Отправление формы для заполнения клиентами

В онлайн-чат также представлена функция отправления формы клиентам для сбора информации о пользователе, добавления его в систему для дальнейшей работы с ним:
Такая форма отправляется с помощью функции online_chat_send_form(), где передаются параметры:
  1. 1.
    name;
  2. 2.
    phone;
  3. 3.
    privacy;
  4. 4.
    callback (данный параметр работает только в случаях, если есть телефония в проекте);
  5. 5.
    age;
  6. 6.
    email_group_ID (если добавить этот параметр с имейлом, то будет создан email клиента и привязан к клиенту чата);
  7. 7.
    wa_group_ID (если добавить этот параметр с телефоном, то создаст ватсап клиента и привяжет к клиенту чата)
    Если указать несуществующую группу, то просто отправит форму, но клиента не создаст.
Важно! Все параметры записываются одной строкой через запятую!
Пример записи в Калькуляторе: online_chat_send_form("name,email,email_group_ID")
уведомление, которое придет в диалог после заполнения формы
В карточке онлайн-клиента из отправленной формы значения сохраняются в переменных клиента (см. ниже)

! online_chat_send_form(arguments, texts)

Принимает два обязательных аргумента
arguments - строка параметров
texts - имя формы
Например, в калькуляторе можно ввести таким образом: online_chat_send_form("name,phone", "Привет, Заполни форму")
Пример ответа Онлайн-чата:
Чтобы подробнее разобраться с базовым функционалом конструктора, приглашаем пройти тему "Автовебинарная воронка с подробным разбором базового функционала"
Присоединяйтесь к бесплатному обучению от Salebot.pro ↦ Перейти в бота проекта Репетитор

Видео-инструкция

Как установить онлайн чат на сайт
Last modified 1mo ago