Keural Kit

Keural Kit встраивает экраны Keural на страницу с помощью одного скрипта. Экраны рисуются внутри Shadow DOM, поэтому не смешиваются с CSS страницы. Kit обновляется при развёртывании веб-версии Keural. Если после развёртывания отображается старый экран, очистите кэш браузера и CDN и проверьте время сборки через window.KeuralKit.__build.

ЗагрузкаКопировать ссылку на раздел

Kit загружается с веб-адреса используемой среды Keural. Для keural.ai это https://keural.ai, для локальной или выделенной среды укажите веб-адрес Keural этой среды. Перед добавлением скрипта задайте в window.__KEURAL_ENV__ адреса серверов, к которым будет обращаться Kit. Все три адреса должны относиться к одной среде. Получите их у контактного лица в Keural при подключении.

<script>
  window.__KEURAL_ENV__ = {
    NEXT_PUBLIC_API_BASE_URL: '<KEURAL_API_URL>',
    NEXT_PUBLIC_FAST_API_BASE_URL: '<KEURAL_AGENT_URL>',
    NEXT_PUBLIC_MODE: 'prd',
  };
</script>
<script src="<KEURAL_WEB_URL>/plugin/kit/keural.js" async></script>

Если тот же Kit используется на втором домене, укажите все три значения: NEXT_PUBLIC_ADDITIONAL_FRONTEND_URL, NEXT_PUBLIC_ADDITIONAL_API_BASE_URL и NEXT_PUBLIC_ADDITIONAL_FAST_API_BASE_URL. Если хотя бы одно из них отсутствует, возникает ошибка. Значения: адреса https:// без пути.

После загрузки скрипта создаётся window.KeuralKit. В SPA, например React, используйте загрузчик, который добавляет скрипт только один раз.

export function loadKeuralKit(src = '<KEURAL_WEB_URL>/plugin/kit/keural.js') {
  if (window.KeuralKit) return Promise.resolve(window.KeuralKit);
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onload = () => resolve(window.KeuralKit);
    s.onerror = () => {
      s.remove();
      reject(new Error('Keural Kit failed to load'));
    };
    document.head.appendChild(s);
  });
}

Встраивание чатаКопировать ссылку на раздел

const el = document.getElementById('keural-chat')!;

window.KeuralKit.mountChat(el, {
  userInfo: { userId: user.id, name: user.name },
  colorMode: 'light',
  initialData: { message: 'Подведи итоги выручки за квартал', room_name: 'Квартальный отчёт' },
  onSessionCreated: (roomId) => router.push(`/c/${roomId}`),
  onError: () => router.push('/'),
});

// При уходе с экрана
window.KeuralKit.unmount(el);

• Чтобы открыть существующий диалог, укажите его ID в sessionId.
• initialData указывайте только при открытии нового диалога. Если указать его при открытии существующего диалога, то же сообщение отправится снова.
• Если userInfo.userId не задан, пользователь считается неавторизованным. Встраивайте экран после того, как данные для входа готовы.

МетодыКопировать ссылку на раздел

Методы Методы mount* и update* принимают colorMode и userInfo, а unmount(el) принимает только элемент. update* перерисовывает элемент с новыми параметрами. Чтобы открыть или закрыть окно, измените значение open и вызовите update*. Повторный вызов mount* для того же элемента повторно использует существующий экран.

Параметры mountChatКопировать ссылку на раздел

initialDataКопировать ссылку на раздел

Язык экранаКопировать ссылку на раздел

Экраны Kit отображаются на корейском языке.

Настройки и входКопировать ссылку на раздел

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