Some weeks ago I got a request from a customer on how to customize the chatbot widget icon and It pushed me to put together that information 🙂
Bu default the Web SDK has the following icon.
So lets add a GIF instead of the default picture ( the principle is exactly the same as adding a different picture)
Settings.js
In the Web SDK settings js file add the botButtonIcon element. In the below case is uses and URL, but you can place the image/gif locally and refer to it with: ‘./<images folder>/giphy.gif’
var chatWidgetSettings = {
URI: 'oda-xxx',
channelId: 'xxxxxxx',
botButtonIcon: 'https://media.giphy.com/media/jxJjBMvqEvMSA/giphy.gif',
This is how it looks like.
There are other elements that can be used to manage other icons.
// Chat logo icon, displayed at the header of the chat widget
logoIcon: 'https://media.giphy.com/media/11JrXA63z7lc6Q/giphy.gif',
//Icon of the bot when writes a text
botIcon: 'https://media.giphy.com/media/mIZ9rPeMKefm0/giphy.gif',
This is how it looks. They are all animated gifs.
For the full list of supported icons/logos check the SDK documentation.
Being able to configure the chatbot icon is one of the most common requirements and the SDK offers plenty of flexibility to customize the look’n’feel and the behavior of the widget.