Онлайн-чат

1) Зачем нужен онлайн-чат?

2) Размещение чата на сайте

3) Настройки и сценарии использования

4) FAQ (часто задаваемые вопросы)

 

В качестве канала приёма обращений вы можете подключить к себе на сайт онлайн-чат. HelpDeskEddy предоставляет полностью готовый и гибкий инструмент, который поможет посетителям вашего сайта быстро получить ответ на свой вопрос. Не надо искать э-почту службы поддержки и оформлять письмо, никуда звонить или ждать пока перезвонят тебе, достаточно написать свой вопрос в чате и сразу же получить на него ответ. 

 

Плюсы размещения онлайн-чата на сайте:

  • Общение с клиентами в любое время. Оператора службы поддержки в ночное время может заменить чат-бот, который вы также можете создать и настроить в HelpDeskEddy. Он поможет клиенту получить ответы на типовые вопросы, а оператор при необходимости подключится к общению в рабочее время. 
  • Помощь с заказом, услуги или выбором товара. Оператор может помочь клиенту ответить на его вопросы, предложить замену, альтернативу или другие способы решения проблемы.
  • Обратная связь от пользователей. По окончанию диалога клиент сможет оценить работу службы поддержки, а вы на основании этих данных сможете построить отчет и проанализировать качество клиентского сервиса.
  • Возможность общаться сразу с несколькими клиентами. По телефону оператор может уделить внимание только одному клиенту одновременно, а с помощью чата можно вести сразу несколько переписок одновременно.
  • Повышение скорости коммуникации за счёт автоответов и быстрых кнопок. Иногда клиенту даже не приходится писать вопрос: кнопки помогают ему выбрать тему обращения и описать проблему. А автоответы сэкономят время как клиента, так и сотрудника поддержки.

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

 

 

 

Перейти к настройкам можно открыв меню "Омни" (на панели слева) → раздел "Настройки" → "Настройки виджета и чата":

 

 

Здесь располагаются основные инструменты для настройки чата, в том числе код виджета. Его необходимо скопировать и разместить в блоке body на вашем сайте:

 

 

Пример размещения и работы онлайн-чата:

 

 

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

 

Помимо визуальных компонентов, доступны следующие настройки:

1) Сделать э-почту необязательным полем. В этом случае виджет не будет требовать обязательно ввести эл. почту у пользователя и она будет сгенерирована при создании заявки автоматически.

2) Не показывать поле "э-почта". При включении виджет не будет запрашивать эл. почту у пользователя (поле не будет отображаться).

3) Не показывать поле "Имя". При включении виджет не будет запрашивать имя у пользователя (поле не будет отображаться), а у оператора вместо имени клиента будет отображаться "Посетитель" (по умолчанию).

 

Ниже располагается поле с ссылкой на согласие на обработку персональных данных:

 

 

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

 

 

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

 

Рассмотрим различные варианты работы при использовании онлайн-чата.

При первом обращении клиента есть возможность настроить приветственное сообщение (автоотбивку), а также отправку быстрых кнопок, которые помогут пользователю выбрать тему обращения.

Для создания таких кнопок, необходимо перейти в меню "Кнопки омниканальности" и создать группу (набор) кнопок для чат-виджета:

 

 

Подробнее с функционалом "Кнопки омниканальности" можно ознакомиться в статье.

 

Далее возвращаемся в настройки виджета и чата, и внизу выбираем приветственное сообщение и группу кнопок, которую создали ранее:

 

 

После чего клиенту при обращении в чат отправится выбранный автоответ, а также набор предложенных кнопок (тематик обращения на выбор):

 

 

Как только будет нажата одна из кнопок, её текстовое содержимое будет отправлено в чат. На этом основании вам будет доступно множество вариантов развития событий при помощи инструмента автоматизации (меню "Диспетчер"):

  • Автоматически распределяйте заявки между операторами и департаментами. Например, если клиент выбрал тематику "Оплата", то заявка достанется сотруднику департамента "Sales".
  • Постройте собственного чат-бота и отправляйте автоматические ответы на самые часто задаваемые вопросы. Операторы будут счастливы избавиться от рутины, а клиенты получат ответы на вопросы в считанные секунды.
  • Отправляйте автотбивки в нерабочее время – клиенты будут знать что их обращение принято и будет обработано чуть позже.
 

FAQ (ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ):

 
В: Можно ли передавать данные пользователя в виджет?

О: В системе есть возможность передачи имени и электронной почты в виджет, при помощи атрибутов data. Для этого необходимо в код виджета, в тег script, нужно добавить поля:

  • data-user-name="Имя пользователя"; 
  • data-user-email="Э-почта"
  • data-prepend-message="Тело передаваемого сообщения"

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

 

Другие атрибуты виджета чата:

  • data-host – домен;
  • data-lang – язык виджета (en, ru);
  • data-position – расположение виджета (bottom-right, bottom-left, top-right, top-left);
  • data-custom-container – ID элементов кнопки для запуска контейнера;
  • data-custom-inner-container  – дополнительный атрибут, благодаря которому можно добавить свой класс к виджету, что позволит использовать разные стили для разных виджетов (на разных сайтах), переключаться между светлой и темной темой, использовать отдельную версию виджета для слабовидящих и т.д. 
  • data-custom-button – ID элементов кнопки для запуска чата;
  • data-width – ширина виджета (для виджета контактов data-chat-width);
  • data-height – высота виджета (для виджета контактов data-chat-height);
  • data-comment – содержимое комментария (либо при помощи GET параметра в ссылке - comment=Your%20comment);
  • data-id – позволяет "подтягивать" историю обращений. Для этого сгенерируйте сессию по API и подставьте ее в data-id:

7bcb5ad67a4701b40abc84982165b75010e3a44a

Пример.

 

В: Как установить собственную иконку виджета?

О: С инструкцией и примером кода по установке иконки можно ознакомиться в статье.

 

В: Возможно ли отображать онлайн-чат только на определенных страницах сайта?

О: Такая возможность доступна в настройках виджета в меню "Сценарии". 

 

В: Как изменить текстовые надписи в виджете? 

О: Надписи в виджете, как и другие текстовые элементы системы, можно изменить при помощи редактирования языкового файла в меню "Язык". Инструкция.

 

В: Как изменить язык виджета? 

О: Язык виджета можно изменить при помощи редактирования атрибута data-lang="ru" в скрипте. Для этого вместо ru необходимо укажите нужный язык. 

 

В: Можно ли не отображать имена сотрудников в чате?

О: Вместо имен сотрудникам можно указать псевдоним в их карточке в меню "Контакты". Установленный псевдоним будет отображаться у клиента вместо реального имени сотрудника:

 

 

В: Есть ли у вас готовые примеры для чата с описанием CSS-стилей (кастомизация, оформление)?

О: Более гибкое редактирование внешнего вида чат-виджета доступно при помощи кастомизации css-кода элементов. Подробнее про изменение внешнего вида системы можно почитать в этой статье.

 

Пример:

 

971a40cd7156a14ca363b2858841759bdab8becf

 

В настройках омниканальности использованы следующие цветовые палитры:

Фон сообщений сотрудника: #EBF9FC 

Фон сообщений посетителя: #3D8BF0

 

Фон кнопок: #3D8BF0 

Фон кнопок при наведении: #F054BA 

 

Цвет текста сотрудника: #1E253C

Цвет текста посетители, цвет текста кнопок, цвет текста кнопок при наведении: #FFFFFF

В приложении к статье (вверху страницы) дополнительно доступен .css файл с описанием всех стилей – его содержимое необходимо разместить в блок Stylesheet (CSS) согласно инструкции выше.

По аналогии вы можете отредактировать элементы и подобрать наиболее оптимальную цветовую палитру на своё усмотрение.

 

В: Как устроена логика работы истории предыдущих обращений клиента?

О: История обращений подгружается в зависимости от того, как был авторизован пользователь в систему:

 

1) Если пользователь был авторизован через API, то ему доступны все его обращения из канала чата.

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

 

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

 

Подгрузка предыдущих обращений доступна по кнопке в чат-виджете, подгрузка через скроллинг (прокрутка чата) – не получится. Если у посетителя, независимо от способа авторизации, последнее обращение закрыто, то оно будет сразу подгружено. Логика группировки заявок на стороне системы осуществляется на основе э-почты пользователя

 

Также стоит учесть:

  • История не показывается, если включена функция в "Омни" - "Объединять ответы после завершения переписки", так как после объединения в заявку попадают и комментарии сотрудников:

 

  • В "диспетчере" присутствует поддержка мультисессий для условия "Статус пользователя в чат виджете".
widget_theme1_1.css
Загрузить