Setting up the widget:
In the left menu, go to Settings -> Widget. This will open your settings page. From here you can select Widget to go to the widget settings.
The Widget settings screen is the place where you can personalise your chat widget. There are a lot of fields here, so let's talk about the most important ones. The tooltips for the settings in the platform will also explain each functionality.
| Field name | Functionality |
| Title | This field adjusts the title in the widget. We recommend putting your chatbot's name here. |
| Subtitle | You can use this field to explain a bit about the purpose of your bot. |
You can then customise:
- Interaction settings
- Designing the launcher
- Colourise the widget
Don't forget to use the save buttons to save your changes!
Interaction settings:
| Refresh button | With the refresh button you can restart your conversation with the bot. |
| Keep session alive | With this option enable the session will be kept alive across your domain using cookies. |
| Save session state | Turning this setting on enables your user to travel over your website while keeping the same conversation with your bot. |
| Typing delay | The typing delay decides how long you bot takes to answer when it receives questions. You can use this to give your chatbot a more personal feel to it! |
| Knowledgebase feedback | With this option enable the customer can give feedback on knowledgebase items. |
| New session on expiry | With this option enabled a new session will be started when the current session has expired* A session expired 15 min after not receiving a response |
| Transcript button | With this option enabled the customer can provide their email address and receive a transcript of the conversation |
| Redo choices | With this option enabled the user can revisit a choice they have made |
| Auto close widget | With this option enabled the widget will close when the user clicks outside of the widget. This will not work if the widget is set on full screen |
Designing the launcher:
The launcher button can be customisable on web pages and mobile devices.
Colourise the widget:
You can use the different colour fields to change the look of your chatbot. Experiment and give it some cool colours!
Content Security Policy:
If you are integrating with OBIBots by displaying our chat widget on your web page, it may be necessary to update the Content-Security-Policy headers your website serves pages with, in order for the widget to function.
More information on the Content-Security-Policy header can be found onMDN Web Docs andGoogle Web Fundamentals.
Required Directives:
The following CSP directives are required for the basic functioning of the chat widget. That is: rendering the launcher button, and allowing users to converse with the chatbot:
style-src 'unsafe-inline' https://fonts.googleapis.com;
script-src https://cloudstatic.obi4wan.com/ngbots/;
connect-src https://app.obi4wan.ai/;
img-src https://cloudstatic.obi4wan.com/ngbots/;
font-src https://fonts.gstatic.com;
The directive unsafe-inline is required stylesheets to allow our user-defined widget styling to function.
Optional Directives:
If you are making use of an integration such as OBI Engage Livechat to hand over conversations to human agents, it may be necessary to augment your Content Security Policy additional directives, to allow the chat widget to connect to your handover provider of choice.