In order to customize the assistant widget, you need a separate stand with the assistant widget. For example, the stand is located at https://test-robin-web.dev.rpa-robin.site:10000.
The file https://test-robin-web.dev.rpa-robin.site:10000/config/environment.json contains the settings required for the application to work.
Example
- apiAssistantServiceUrl - address of the assistant service
- wsMainUrl - address of the SignalR service
- keyCloakUrl - address of the Keycloak service
They can be different for each booth.
The assistant widget works through an iframe. In order for Keycloak to open inside an iframe, in the Keycloak settings in Content-Security-Policy you should specify the address of the site to which the iframe with the widget will be connected. For example, for http://127.0.0.1:8000: Content-Security-Policy: frame-src 'self'; frame-ancestors 'selft' http://127.0.0.1:8000; object-src 'none';
On the html page of the site where you want to connect the assistant widget, you need to add the following code
The connect-assistant-widget.js script is connected, from which the connectAssistantWidget function is used to connect the assistant widget. The url address of the stand with the assistant widget is passed to the parameter object. For minimal connection this is enough, all default parameters will be applied. If you need to customize the appearance of the widget, all possible parameters are described below:
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 - address of the stand with the assistant widget. By default, not set.
zIndex - z-index of the widget relative to other elements on the page. The default is 1. If other elements will overlap the widget, you can increase zIndex. Read more here. - OpenChatButton object - parameters of the button to open the widget.
- width - width of the button. The default is 50px. Read more here.
- height - height of the button. The default is 50px. Read more here.
- top - button position relative to the top border of the page. By default, not set. Read more here.
- right - button position relative to the right border of the page. By default, 30px if neither top, bottom, nor left is set. Read more here.
- bottom - button position relative to the bottom border of the page. By default, 30px if neither top, right nor left is set. Read more here.
- left - button position relative to the left page border. By default, not set. Read more here.
- backgroundColor - background color of the button. By default, #0043B5. Read more here.
- borderRadius - radius of the button frame. By default, 50%. Read more here.
- Icon object - parameters of the icon inside the button to open the widget.
- svg - icon in svg format. Defaults as in the code example above.Read more here.
- theme - icon theme. If the icon is multicolored, it should be set to 'brand'.
- color - color of the icon. It is used if the icon has only one color. The theme value in this case should not be 'brand'.
- size - icon size. By default, it is 24px.
- Chat object - widget chat window parameters.
- width - width of the chat window. The default is 467px. Read more here.
- height - height of the chat window. By default, 680px. Read more here.
- top - position of the chat window relative to the top border of the page. By default, it is not set. Read more here.
- right - position of the chat window relative to the right border of the page. By default, 42px if neither top, bottom, nor left is set. Read more here.
- bottom - position of the chat window relative to the bottom border of the page. By default, 42px if neither top, right nor left is set. Read more here.
- left - position of the chat window relative to the left border of the page. By default, it is not set. Read more here.
If more complex customization is required, it is possible to pass global styles to the widget via the style property - this is a string with css that will be applied to the entire assistant application.
To customize the widget open button, you need to use the .widget-icon selector, and to customize the icon inside it, the .widget-icon i selector.