Widget settings

The Widget settings screen under Settings Widget is where you can personalize your chat widget. Select the widget for which you want to set or adjust the settings.

There are many fields available here, so let's focus on the most important ones. Tooltips within the software will also explain each functionality. Remember to use the Save button to save your changes during and after modifying the settings. The Preview button allows you to view the changes on both mobile devices and computers.

On this page you have the following options:

General settings

Here you can configure basic settings for your widget.

Field name Functionality
Title Adjusts the title in the widget. It is recommended to put your chatbot's name here.
Subtitle Use this field to explain the purpose of your bot.

Interaction settings

The following settings affect how users interact with the chatbot:

Field name Functionality
Refresh button Restarts the conversation with the bot.
Auto close widget Closes the widget when the user clicks outside of it. Does not work if the widget is in full screen mode.
Knowledgebase feedback Allows customers to give feedback on knowledgebase items.
Keep session alive Keeps the session alive across your domain using cookies.
Save session state Maintains the conversation state as users navigate through the website.
Transcript button Allows customers to provide their email address and receive a transcript of the conversation.
Use system fonts Disables Google fonts in the widget.
WCAG zoom compliant Ensures the widget is WCAG compliant regarding zoom levels.
Widget shadow Removes the shadow from the widget launcher when disabled.
Typing delay Adjusts how long the bot takes to answer after receiving a question, giving it a more personal feel.
New session on expiry Starts a new session when the current session expires after 15 minutes of inactivity.
Redo choices Allows users to revisit a previous choice they made.

Notification messages

Here you can configure messages that appear in the widget, such as popup messages that are displayed at the top of the widget.

Configurable texts

Customize the placeholders in the widget to guide users.

  • Message field placeholder: Shown in the input field where users type their messages.
  • Drop-down field placeholder: Displayed as hint text in the drop-down field.

Whitelisted urls

Whitelist specific URLs where you want the chat widget to appear. You can add domain whitelisting using ECMAScript syntax and test with regex101.com.

Design chatbot

These settings allow customization per device (mobile or computer):

  • Launcher button: Display or hide the user button. Turn this off if you want to create your own button to start a chat.
  • Open by default: Makes the widget appear open when loaded.
  • Enable close button: Allows the widget to be closed from within the widget itself.
  • Full screen: Enables full screen mode for the widget.
  • User can toggle full screen: Lets users toggle full screen mode.
  • Width, Height, Position: Set the widget's width, height, and position.

Color settings

Customize the colors of your chatbot using the different color fields. Experiment to give it a unique appearance!

image5.png

Generate custom style sheet

Read more on using a custom style sheet in this article

Content Security Policy

If you are integrating with Spotler AIgent 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 on MDN Web Docs and Google Web Fundamentals.

Directives

The following CSP directives are required for the basic functioning of the chat widget:

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 for stylesheets to allow our user-defined widget styling to function.

If you are using an integration such as Spotler Engage Livechat to hand over conversations to human agents, additional directives may be required.