Для того , чтобы настроить виджет ассистента необходим отдельный стенд с виджетом ассистента. Например, стенд находится по адресу https://test-robin-web.dev.rpa-robin.site:10000.

В файле https://test-robin-web.dev.rpa-robin.site:10000/config/environment.json находятся настройки, необходимые для работы приложения.

Пример

1
2
3
4
5

{
  "apiAssistantServiceUrl": "https://test-ent-web.dev.rpa-robin.site/assistant",
  "wsMainUrl": "https://test-ent-web.dev.rpa-robin.site/notification/hub",
  "keyCloakUrl": "https://test-ent-web.dev.rpa-robin.site:8443/realms/robin"
}


  • apiAssistantServiceUrl - адрес сервиса ассистента
  • wsMainUrl - адрес сервиса SignalR
  • keyCloakUrl - адрес сервиса Keycloak

Для каждого стенда они могут быть свои.

Виджет ассистента работает через iframe. Для того, чтобы Keycloak открывался внутри iframe, в настройках Keycloak в Content-Security-Policy необходимо прописать адрес сайта, на который будет подключаться iframe с виджетом. Например, для сайта http://127.0.0.1:8000: Content-Security-Policy: frame-src 'self'; frame-ancestors 'selft' http://127.0.0.1:8000; object-src 'none';

На html странице сайта, на котором требуется подключить виджет ассистента, необходимо добавить следующий код 

1
2
3
4
5
6

<script src="https://test-robin-web.dev.rpa-robin.site:10000/assets/connect-assistant-widget.js"></script>
<script>
  connectAssistantWidget({
    url: 'https://test-robin-web.dev.rpa-robin.site'
  });
</script>


Подключается скрипт connect-assistant-widget.js, из которого используется функция connectAssistantWidget для подключения виджета ассистента. В объект параметров передаётся url - адрес стенда с виджетом ассистента. Для минимального подключения этого достаточно, применятся все параметры по умолчанию. Если требуется кастомизация внешнего вида виджета, то далее описаны все возможные параметры:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<script>
  connectAssistantWidget({
    url: 'https://test-robin-web.dev.rpa-robin.site:10000',
    zIndex: 1,
    openChatButton: {
      width: '50px',
      height: '50px',
      right: '30px',
      bottom: '30px',
      backgroundColor: '#0043B5',
      borderRadius: '50%',
      icon: {
        color: '#FFFFFF',
        size: '24px',
        svg: `
             <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M16.1932 19.7039L18.5413 21.8512C18.6263 21.9289 18.73 21.9787 18.8401 21.9945C18.9503 22.0104 19.0623 21.9917 19.163 21.9407C19.2637 21.8896 19.3489 21.8084 19.4086 21.7065C19.4683 21.6046 19.5 21.4863 19.5 21.3655V9.63454C19.5 9.46625 19.4385 9.30485 19.3291 9.18585C19.2197 9.06685 19.0714 9 18.9167 9H6.08333C5.92862 9 5.78025 9.06685 5.67085 9.18585C5.56146 9.30485 5.5 9.46625 5.5 9.63454V18.9206C5.5 19.0889 5.56146 19.2503 5.67085 19.3693C5.78025 19.4883 5.92862 19.5551 6.08333 19.5551H15.8178C15.9551 19.5551 16.088 19.6078 16.1932 19.7039Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M10 15C10.8284 15 11.5 14.3284 11.5 13.5C11.5 12.6716 10.8284 12 10 12C9.17157 12 8.5 12.6716 8.5 13.5C8.5 14.3284 9.17157 15 10 15Z" fill="white"/>
             <path d="M15 15C15.8284 15 16.5 14.3284 16.5 13.5C16.5 12.6716 15.8284 12 15 12C14.1716 12 13.5 12.6716 13.5 13.5C13.5 14.3284 14.1716 15 15 15Z" fill="white"/>
             <path d="M12.5 8.5L12.5 6" stroke="white" stroke-width="1.5"/>
             <circle cx="12.5" cy="4" r="1.75" stroke="white" stroke-width="1.5"/>
             <path d="M5.5 12H4C3.72386 12 3.5 12.2239 3.5 12.5V14.5C3.5 14.7761 3.72386 15 4 15H5.5" stroke="white" stroke-width="1.5"/>
             <path d="M19.5 12H21C21.2761 12 21.5 12.2239 21.5 12.5V14.5C21.5 14.7761 21.2761 15 21 15H19.5" stroke="white" stroke-width="1.5"/>
             </svg>
           `,
       }
     },
     chat: {
       width: '467px',
       height: '680px',
       right: '42px',
       bottom: '42px',
     },
     style: `
       .widget-icon {
   
       }
 
       .widget-icon i {
 
       }
    `
  });
</script>


  • url - адрес стенда с виджетом ассистента. По умолчанию, не установлен.
  • zIndex - z-index виджета относительно других элементов на странице. По умолчанию, 1. Если другие элементы будут перекрывать собой виджет, то можно увеличить zIndex. Подробнее
  • Объект openChatButton - параметры кнопки для открытия виджета.
    • width - ширина кнопки. По умолчанию, 50px. Подробнее
    • height - высота кнопки. По умолчанию, 50px. Подробнее
    • top - положение кнопки относительно верхней границы страницы. По умолчанию, не установлен. Подробнее
    • right - положение кнопки относительно правой границы страницы. По умолчанию, 30px, если не установлены ни top, ни bottom, ни left. Подробнее
    • bottom - положение кнопки относительно нижней границы страницы. По умолчанию, 30px, если не установлены ни top, ни right, ни left. Подробнее
    • left - положение кнопки относительно левой границы страницы. По умолчанию, не установлен. Подробнее
    • backgroundColor - цвет фона кнопки. По умолчанию, #0043B5. Подробнее
    • borderRadius - радиус рамки кнопки. По умолчанию, 50%. Подробнее
    • Объект icon - параметры иконки внутри кнопки для открытия виджета.
      • svg - иконка в формате svg. По умолчанию, как в примере кода выше. Подробнее
      • theme - тема иконки. Если иконка разноцветная, то нужно установить значение 'brand'.
      • color - цвет иконки. Применяется, если в иконке только один цвет. Значение theme в таком случае не должно быть 'brand'.
      • size - размер иконки. По умолчанию, 24px.
  • Объект chat - параметры окна чата виджета.
    •  width - ширина окна чата. По умолчанию, 467px. Подробнее
    •  height - высота окна чата. По умолчанию, 680px. Подробнее
    •  top - положение окна чата относительно верхней границы страницы. По умолчанию, не установлен. Подробнее
    •  right - положение окна чата относительно правой границы страницы. По умолчанию, 42px, если не установлены ни top, ни bottom, ни left. Подробнее
    •  bottom - положение окна чата относительно нижней границы страницы. По умолчанию, 42px, если не установлены ни top, ни right, ни left. Подробнее
    •  left - положение окна чата относительно левой границы страницы. По умолчанию, не установлен. Подробнее


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

Чтобы кастомизировать кнопку открытия виджета, нужно использовать селектор .widget-icon, а чтобы иконку внутри неё, селектор .widget-icon i

  • Нет меток