Изменение полного кода чата для локального размещения

Веб-чаты поддерживаются с помощью приложений чата, встроенных в веб-сайты для мобильных устройств и настольных компьютеров. Если вы хотите создать собственное приложение чата, используя Cloud Contact Mobile/Web API, вы можете начать с загрузки и изменения полного кода клиента чата, внесения в него любых необходимых дополнительных функций, а затем размещения его на своем веб-сайте.


	Большинство случаев использования веб-чата можно решить, просто добавив HTML-фрагмент виджета чата на свой веб-сайт, а также при необходимости стилизовав и настроив виджет. Создание собственного чат-приложения может оказаться трудоемким занятием и не рекомендуется.

Предварительные требования

Быть пользователем Cloud Contact с ролью и привилегиями администратора.
Знать и иметь доступ к приложению Администратор контактного центра и операциям контакт-центра.

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

Шаг 1. Загрузите клиентское приложение

В приложении Администратор контактного центра перейдите в раздел Конфигурация > Точки входа сценариев > Сообщения/Чат и выберите нужную запись сценария чата, чтобы просмотреть ее свойства.
В свойствах перейдите в раздел Полный код чата для локального хостинга и нажмите кнопку Загрузить. На ваш компьютер будет загружен zip-файл (chat-client.zip) с кодом приложения чата.

Свойства веб-фрагмента HTML
Извлеките содержимое файла Chat-client.zip. Он должен включать следующие папки и файлы:
- сборка/
- css/
- изображения/
- js/
- медиа/
- сцена/
- тест/
- build.xml
- check-session.html
- client-chat-page.html
- client-chat-page-dev.html
- default.html
- default-dev.html
- README.md
Разверните все файлы и каталоги на своем веб-сервере.
Запишите веб-адрес, по которому обслуживаются измененные файлы и папки. Вам нужно будет отредактировать default.html, чтобы включить этот URL-адрес в несколько мест.

Шаг 2. Откройте фрагмент кода

Откройте default.html для редактирования. default.html включает JavaScript вашего приложения чата. Ниже приведен пример того, что вы должны увидеть в загруженном файле default.html.

Содержимое default.html

 <!DOCTYPE html>
 
 <!--___PRODUCT_BUILD___ (___PRODUCT_COMMENTS___) ___PRODUCT_DATE___-->
 
 <html>
 <head>
     <title>Chat Test Page</title>
 </head>
 <body>
 
 <!-- You have to put this piece of JavaScript code into your web page -->
 
 <script type="text/javascript">
     SERVICE_PATTERN_CHAT_CONFIG = {
         appId: '123',                   /* Unique identifier of Mobile/Web record of Portal Tenant Management   */
         clientId: 'WebChat',            /* no need to change this */
         apiUrl: '/clientweb/api/v1',    /* path to public API can be absolute like http://contact-center.example:98/clientweb/api/v1 or relative*/
         tenantUrl: 'example.com',
         width: 300,                     /* chat width */
         chatPath: '',                    /* relative path to client-chat-page.html i.e empty here because default.html and 
client-chat-page.html in same directory */
         callback:false,
         subject: 'TEST SUBJECT',
         sound_notification: true,
         sound_notification_file: 'media/ding.mp3',
 
         email: 'someone@example.com'
         /* Default customer data, it can be collected on current site's context*/
         /* Customer data also can be requested via "Request Input" block + "MobileChatCustomerData" formName */ 
 /*
         togetherJS_enabled : true,
         first_name: '',
         last_name: '',
         from: '',
         email: '',
        account_number: '',
         phone_number: 91001,
         location : {
             latitude: 37.5151481,
             longitude: -122.4183997
         }
 */
 
     };
 </script>
 <script type="text/javascript" src="js/snippet.js"></script>
 </body>
 </html>

Шаг 3. Отредактируйте фрагмент кода

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

 <!DOCTYPE html> 
 <link type="text/css" rel="stylesheet" href="https://<Address serving chat widget code>/css/form.css">
 <script type="text/javascript">
     SERVICE_PATTERN_CHAT_CONFIG = {
         appId: '<app_id>',
         apiUrl: 'https://<tenant_url>/clientweb/api/v1',
         tenantUrl: '<tenant_url>',
         chatPath: 'https://<Address serving chat widget code>'
 
         /*        
          // Default customer data, it can be collected on current site's context
          first_name: '',
          last_name: '',
          email: '',
          phone_number: ''
      */
     };
 </script>
 <script src="https://<Address serving chat widget code>/js/init.js"></script>

Измените значения следующих параметров, чтобы они указывали на ваш контакт-центр и домен, на котором будет размещен виджет чата.
- link href – замените https://<Address serving chat widget code> на URL-адрес, на котором размещены файлы и каталоги клиента чата.
- appId – уникальный идентификатор приложения чата (e.g., «’428938e0-7b11-41b5-bbaa-b28ebb27812c»), также известная как точка запуска входа в сценарий чата. Вы можете найти appID в свойствах записи сценария приложения чата.
- apiUrl – URL-адрес вашего домена с конечной точкой API (e.g., “ https://contact-center.example/clientweb/api/v1”)
- tenantUrl – URL-адрес вашего контакт-центра (e.g., «contact-center.example»)
- путь к чату – замените https://<Address serving chat widget code> на URL-адрес, на котором размещены файлы и каталоги клиента чата.
- script src – замените https://<Address serving chat widget code> на URL-адрес, на котором размещены файлы и каталоги клиента чата.
Сохранить файл.

Пример отредактированной версии default.html

 <!DOCTYPE html> 
 <link type="text/css" rel="stylesheet" href="https://url.of.self-hosted.code.com/directory-with-chat-client-files/css/form.css">
 <script type="text/javascript">
     SERVICE_PATTERN_CHAT_CONFIG = {
         appId: 'f58ccefbdc6f41f1baa468dd82186c02',
         apiUrl: 'https://contact-center.example/clientweb/api/v1',
         tenantUrl: 'contact-center.example',
         chatPath: 'https://url.of.self-hosted.code.com/directory-with-chat-client-files'
 
         /*        
          // Default customer data, it can be collected on current site's context
          first_name: '',
          last_name: '',
          email: '',
          phone_number: ''
      */
     };
 </script>
 <script src="https://url.of.self-hosted.code.com/directory-with-chat-client-files/js/init.js"></script>

Шаг 4. Вставьте JavaScript на свою веб-страницу.

Скопируйте код JavaScript из файла default.html (все, кроме <!DOCTYPE html>).
Вставьте его на веб-страницу, где клиенты будут иметь доступ к виджету чата.
Сохранить и опубликовать веб-страницу.

Шаг 5. (Необязательно, не рекомендуется) Измените исходный код.


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

Измените код (загруженный на шаге 1) по своему желанию. Если вы вносите какие-либо изменения в файлы в папке js/, вам необходимо запустить процесс сборки, описанный в README.md:
- Установите зависимости, необходимые для создания кода фрагмента чата, из исходного кода: java, ant, node.js и npm.
- Вручную загрузите все внешние зависимости, которые используются в build.xml, в частности yuicompressor-2.4.8.jar и yarn-1.19.1.js.
- Запустите процесс сборки.
- Обратите внимание, что содержимое папки build/ будет обновлено в процессе сборки.
Разверните измененные файлы и каталоги на своем веб-сервере (включая все изменения в папке build/).

Шаг 6. Проверьте чат

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

Справочный портал