Передача переменных JavaScript через HTML-фрагмент веб-чата

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

Фрагмент содержит форматирование и стиль настроенного вами виджета чата, путь к приложению чата, конечную точку мобильного/веб-API, URL-адрес вашего контакт-центра и путь к чату. Вы можете отредактировать фрагмент, чтобы передать в чат некоторые стандартные переменные, такие как first_name, last_name, адрес электронной почты и phone_number. Также можно передавать пользовательские переменные через фрагмент.

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

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

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

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

   

2. На вкладке Свойства в разделе Веб-фрагмент HTML нажмите кнопку Фрагмент HTML.
3. Откроется диалоговое окно Фрагмент HTML для веб-страницы.
   

   

Шаг 2. Введите имя хоста вашего контакт-центра и скопируйте фрагмент.

1. В поле Укажите имя хоста веб-сервера клиента введите имя вашего контакт-центра (т. е., «contact-center.example”). Это действие заполнит фрагмент именем хоста, и он будет готов к копированию.
2. Нажмите Копировать в буфер обмена, чтобы скопировать фрагмент.
3. Выглядит это так:

<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: '94066', 
	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>

Шаг 3. Измените параметры данных клиента по умолчанию.

Обратите внимание, что в комментариях к коду указаны некоторые параметры данных о клиенте: first_name, last_name, адрес электронной почты и phone_number. Эта информация о клиенте представляет собой набор данных по умолчанию, собираемый из формы предварительного чата и передаваемый в систему во время взаимодействия в чате.^[1]

Чтобы передать пользовательские переменные через чат, просто замените это:

/* 
// Default customer data, it can be collected on current site's context 
first_name: , 
last_name: , 
email: , 
phone_number: 
*/

Следующим образом, где «variable_name» — это имя вашей переменной, а «Значение» — это значение:

parameters:{
    variable_name: 'Value',
}

Например:

 <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: '70a6624585ef2b0981fed84fcd12d4db',
        apiUrl: 'https://contact-center.example/clientweb/api/v1',
        tenantUrl: 'contact-center.example',
        chatPath: 'https://contact-center.example/clientweb/chat-client-v4/',
        parameters:{
            test_var: 'Hello World', 
		 }
    };
 </script>
 <script src="https://contact-center.example/clientweb/chat-client-v4/js/init.js"></script>

Примечание. Вам следует использовать либо параметры данных клиента по умолчанию, или свои собственные параметры, но не то и другое одновременно. В параметрах клиента используется переменная $(item.externalChatData) для сбора всех данных о клиенте из формы предварительного чата. Если вы включите как параметры по умолчанию, так и пользовательские параметры, у вас будут повторяющиеся записи first_name, last_name, электронной почты и phone_number.

Для получения дополнительной информации см. Конструктор сценариев, раздел Переменные.

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

Завершив шаг 3, вставьте фрагмент в HTML-код для использования на своей веб-странице.