Передача параметров URL в сценарий чата

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

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

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

https://example.com/checkout.html?cart_id=6789-defg-h4i5&user_id=abc-123

В этом случае параметрами запроса являются все, что следует за символом ?:

cart_id=6789-defg-h4i5&user_id=abc-123

После анализа и передачи этого значения в сценарий через виджет веб-чата следующие переменные сценария будут заполнены следующим образом:

$(item.externalChatData.cart_id) будет установлен со значением 6789-defg-h4i5
$(item.externalChatData.user_id) будет установлен со значением abc-123

Как правило, значение любой другой пары key=value из строки запроса будет доступно в сценарии путем ссылки на переменную сценария $(item.externalChatData.key). Следующие шаги иллюстрируют, как:

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

1. Извлечение параметров запроса

Следующие шаги демонстрируют один из способов анализа параметров запроса из URL-адреса.

Добавьте следующий фрагмент JavaScript на свой веб-сайт, чтобы извлечь параметры запроса в переменную queryParams:

<script>
// Function to extract and parse URL query parameters into an object
function getQueryParams() {
    // Create URLSearchParams object from current URL's query string (everything after '?')
    const params = new URLSearchParams(window.location.search);
    
    // Initialize an empty object to store the key-value pairs
    const queryParams = {};
    
    // Iterate through each key-value pair in the URLSearchParams object
    for (const [key, value] of params) {
        // Add each key-value pair to our queryParams object
        queryParams[key] = value;
    }
    
    // Return the object containing all query parameters
    return queryParams;
}

// Execute the function and store the result in queryParams constant
const queryParams = getQueryParams();

// Log the extracted query parameters to the console for debugging
console.log("Query Parameters:",queryParams);
</script>

Откройте журнал консоли вашего браузера, который можно найти в инструментах разработчика Chrome, Safari, Firefox, Edge и большинстве других современных браузеров.

Добавьте ?cart_id=6789-defg-h4i5&user_id=abc-123 к URL-адресу вашего веб-сайта и загрузите страницу

Вы должны увидеть, что содержимое queryParams зарегистрировано в консоли и состоит из объекта: {cart_id: "6789-defg-h4i5", user_id: "abc-123"}

2. Настройте виджет чата

Виджет чата позволяет вам передавать переменные JavaScript в сценарии во время настройки.

Включите предыдущую функцию JavaScript в свой виджет чата, чтобы передать параметры запроса в сценарий. Обратите внимание на ключевые моменты сценария:
- Сначала определяется функция getQueryParams()
- Далее значение queryParams устанавливается с помощью строки const queryParams = getQueryParams();
- Наконец, пара ключ: значение parameters:queryParams добавляется в SERVICE_PATTERN_CHAT_CONFIG

<link type="text/css" rel="stylesheet" href="https://contact-center.example/clientweb/chat-client-v4/css/form.css">
<script type="text/javascript">

   function getQueryParams() {
      const params = new URLSearchParams(window.location.search);
      const queryParams = {};
      for (const [key, value] of params) {
         queryParams[key] = value;
      }   
      return queryParams;
   }

   const queryParams = getQueryParams();

   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/',

      // Set the new variable "queryParams" as the value for the custom 'parameters' sent when configuring the chat widget
      parameters:queryParams

   };
</script>
 <script src="https://contact-center.example/clientweb/chat-client-v4/js/init.js"></script>

Убедитесь, что appId, apiUrl, tenantUrl и chatPath настроены с правильными значениями для вашего виджета чата.

Откройте веб-страницу и убедитесь, что виджет чата загружается правильно.

3. Доступ к значениям параметров запроса с помощью переменных сценария

Данные, передаваемые в ключ parameters конфигурации чата, доступны через переменную сценария $(item.externalChatData). Как упоминалось ранее, значение любой пары key=value из строки запроса будет доступно в сценарии путем ссылки на переменную сценария $(item.externalChatData.key).

Если мы используем пример URL:

https://example.com/checkout.html?cart_id=6789-defg-h4i5&user_id=abc-123

Тогда будут два параметра запроса, доступные для следующих переменных сценария:

$(item.externalChatData.cart_id) будет установлен со значением 6789-defg-h4i5
$(item.externalChatData.user_id) будет установлен со значением abc-123

Чтобы настроить сценарий для отображения значений cart_id и user_id из строки запроса оператору через внутреннее сообщение:

Откройте сценарий чата, связанный с этим виджетом чата. Добавьте эти три блока по порядку:
- Найти блок «Оператор (Чат)» со значениями по умолчанию.
- Внутреннее сообщение настроено для отображения значений параметров запроса (следующий шаг).
- Подключите чат со значениями по умолчанию.

Выберите блок Внутреннее сообщение и настройте его поля, как указано:
- Текст заголовка: название параметра блока, помогающее понять его назначение. Просто выберите «Информация о заказе».
- Имя пользователя: указывает, кто должен видеть сообщение. Переменная сценария $(user.loginId) предоставляет логин оператора, выбранного в блоке Найти оператора (чат), поэтому тот же человек, который отвечает на чат с клиентом, увидит внутреннее сообщение, содержащее информацию о заказе.
- Сообщение: текст, отображаемый оператору. Чтобы показать им данные из строки запроса, используйте переменную сценария $(item.externalChatData), как указано:
```
Cart ID
$(item.externalChatData.cart_id)

User ID
$(item.externalChatData.user_id)
```

Блоки Найти оператора и Подключить чат можно оставить с настройками по умолчанию. Сохранить сценарий

4. Проверьте сценарий

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

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

Перейдите на свой веб-сайт, на котором настроен виджет чата. Добавьте параметры запроса к URL-адресу (e.g. https://example.com/checkout.html?cart_id=6789-defg-h4i5&user_id=abc-123), перезагрузите страницу, затем откройте виджет чата, чтобы начать новый чат. сеанс.

На рабочем столе оператора примите чат и убедитесь, что значения параметров запроса отображаются во внутреннем сообщении:

Дополнительные идеи

Отображение данных оператору с помощью внутреннего сообщения — это простой пример из множества возможностей. Рассмотрите возможность использования переменных сценария для создания URL-адресов для CRM или всплывающих окон на веб-экране, получения автоматических ответов от «Спросите бота» или создания индивидуальных инструкций для ИИ-оператора.

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