Использование HTML-фрагмента для веб-чата

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

Cloud Contact предоставляет фрагмент HTML (а также полный код чата для локального хостинга) для каждого виджета чата, настроенного для вашего контакт-центра. Фрагмент HTML – это код, определяющий конфигурацию виджета чата.

В этой статье вы узнаете, как получить фрагмент HTML и использовать его на веб-сайте вашей компании.

Порядок действий

Шаг 1. Найдите запись сценария чата

1. В Администратор контактного центра перейдите в раздел Конфигурация > Точки входа сценариев > Обмен сообщениями/чат.
   

   

2. Выберите нужную запись сценария чата, чтобы просмотреть ее свойства.

Шаг 2. Получите веб-фрагмент HTML.

1. На вкладке Свойства > Веб-фрагмент HTML нажмите кнопку Фрагмент HTML. Фрагмент HTML — это код настроенного вами виджета чата. Если вы еще не настроили виджет чата, см. раздел «Как настроить веб-чат».
   

   

2. Откроется диалоговое окно Фрагмент HTML для веб-страницы.
   

   

Шаг 3. Введите имя хоста вашего контакт-центра.

1. В поле Укажите имя хоста веб-сервера клиента введите имя вашего контакт-центра (т. е., «contact-center.example”). Если вы не знаете, что это такое, посмотрите URL-адрес вашего приложения Администратор контактного центра в веб-браузере. Имя хоста — это имя, которое появляется перед «/admin».
   

   

2. Нажмите Копировать в буфер обмена, чтобы скопировать HTML. Это код виджета чата.

Шаг 4. Вставьте фрагмент в файл HTML.

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

Пример кода

Ниже приведен пример фрагмента HTML, помещенного в базовый HTML-файл Doctype. Текст фрагмента отображается синим цветом.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>My Chat Widget</title>
  </head>

  <body>
  <p>This is my test page.</p>
  </body>

<link type="text/css" rel="stylesheet" href="https://contact-center.example/clientweb/chat-client-v4/css/form.css">
<script type="text/javascript">
    SERVICE_PATTERN_CHAT_CONFIG = {
        appId: '123456789',
        apiUrl: 'https://contact-center.example/clientweb/api/v1',
        tenantUrl: 'contact-center.example',
        chatPath: 'https://contact-center.example/clientweb/chat-client-v4/'

        /*        
         // Default customer data, it can be collected on current site's context
         first_name: ,
         last_name: ,
         email: ,
         phone_number: 
 		*/
    };
</script>
<script src="https://contact-center.example/clientweb/chat-client-v4/js/init.js"></script> 

</head>
</html>

Шаг 5. Опубликуйте свою страницу и протестируйте виджет чата.

1. Поместите фрагмент HTML в соответствующее место на веб-странице и сохраните.
2. Опубликуйте свою страницу. В показанных примерах фрагмент HTML был помещен на веб-страницу, созданную в бесплатном приложении для создания веб-сайтов. На странице появится вкладка контактов виджета чата (и любые другие элементы виджета чата, добавленные в конфигурацию виджета чата).
   

   

3. На веб-странице при нажатии на вкладку контактов виджет разворачивается.
   

   

Дополнительную информацию о настройке виджета чата см. в Руководстве по настройке виджета чата.