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
1 |
|
- 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
1 |
|
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 |
|
- 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.
Обзор
Инструменты контента