On the Settings > Widget page, there is the possibility to fully customize your widget launcher.
➡️ Not using the chatbot widget yet? Check out our demo.
Right side - live preview
On the right side on the screen is the live preview of the changes made. Even if the changes are directly shown here, do not forget to save the changes and publish the changes.
Launcher button text balloon
Activating this option will allow the launcher to be accompanied with a text balloon.
The content of this text balloon is fully customizable. When the button is turn on, it opens a text field, which can be completed with up to 64 characters, including text - digits - special characters - emojis.
The font used on the text balloon is the font used on the website where the widget script is added. This way, it will automatically integrate within your page.
The text balloon will be visible when the widget is closed, when the widget is open, the text balloon disappear.
The placement of the text balloon next to the launcher button is automatically adjusted based on the Position (see the explanation below)
Shape
In the option, the section Shape is available and provide 4 different options to customize the shape of the launcher button.
The selected shape will be directly available in the live preview on the right side.
Those are the options:
Upon saving and publishing, the shape will be visible in the published widget version.
Icon:
Below is the Icon section where default icon can be selected or the addition of a custom SVG.
The selected icon will show in blue in the menu and will automatically be available in the right side preview.
In the widget, the default icons will look as such:
If a custom SVG is added, several parameters are to take into consideration:
✅ Resize to the widget 
✅ Color managed by the icon color
ℹ️ In some cases, the color may not be managed by the Icon color, but have hard coded color in the SVG file.
You can decide what suits best for your icon.
An SVG flag should keep its original colors:
An SVG can also have several colors but only one is managed by the icon color:
Tip
If you want to let Spotler Chat+ manage the color of the SVG, you need to open the SVG code file and remove the fill = information.
❌ In some cases the SVG won't be able to resize properly. This is because the size is hard coded in the SVG code file. It will be noticable when the icon shows outside of the widget.
Tip
If you want to let Spotler Chat+ manage the size of the SVG, you need to open the SVG code file and remove the width = and height = information.
✅ The animated SVGs are supported and must comply to the size and color choices described above.
Colors
There is 2 colors to manage for the launcher button:
- Background color - This is the color used behind the icon.
- Icon color - This is the color of the icon
⚠️ As described in the SVG section, the icon color can be overruled by the SVG code file.
Position
The positioning of the launcher button can be customize in 3 different places on both desktop and mobile.
The options are:
- Bottom right
- Bottom center
- Bottom left
The right side live preview will move representing the chosen placement for the desktop configuration.
Once all the configuration is saved and publish, the new design will automatically be available on the published widget.
To know more about the customizable functions of the widget itself read more on the Widget setting. page.