The minimal version of the webchat widget will let you add chat to a page of your choice, using all of the default appearance options. This will be functional, but most clients will want to personalise their chatbot widget, for branding or their own preferences.
If you want to customise the appearance of your webchat widget, you will need the complete version of the widget. You can modify elements of the widget script in many ways. This article describes the top five customisation options.
Widget width
One of the simplest changes you can make is to adjust the width of the chatbot widget. By default it is set to a slim 360 pixels, but this can be adjusted as needed.
In the widget's script, search for the attribute data-width:
data-width="360px"
Here is a comparison of width 360 and width 560:
Widget colours
You will likely want to change the colour scheme of the widget to match your branding. The theme colour is for the banner, the accent colour is used for the borders of buttons and the accent on the send button, both a lovely LeadDesk blue by default, and the background colour is very slightly off-white by default.
Search the script for these three attributes to change the colours, and update using the hex value of the RGB colour you want to use for each.
data-theme-color="#1e156a"
data-accent-color="#1e156a"
data-background-color="#fefefe"
Font size
You can add a font size control to the header of the webchat. This will allow the user to click to increase the font size if they need to. This control shows based on the attribute data-enable-font-size-option, showing if it is set to true.
data-enable-font-size-option="true"
Users will be able to click the icon in the chat header to adjust text size.
Title
By default, the header in the webchat reads 'Customer Service'. This too can be changed, as well as the font, font size, colour and alignment of that text. Adjust these attributes in the script to suit your needs:
data-title="Customer Service"
data-title-alignment="center"
data-title-text-color="#FFFFFF"
data-widget-font="Arial"
data-widget-font-size="18"
Available fonts are: Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookmark, Trebuchet MS, Arial Black, Impact.
Icons
Finally for this list, if you have icons that you would rather use, you an switch out the main chat icon that appears on your site for customers to click to start chat. You can show customers if they are speaking to a chatbot or an agent, by having different icons next to their chat bubbles. You can even change the Send icon!
In all cases you will need the URL of image file for the icon you want to use.
Chat icon
data-use-chat-icon="true"
data-chat-icon-url="https://files.leaddesk.com/LD.svg"
Bot icon
In addition to choosing the file for the icon, there are settings for width, height and borders for the chatbot icon. These settings are also applied to the agent icon.
data-bot-icon-url="https://files.leaddesk.com/ChatbotIcon.svg"
Agent icon
data-agent-icon-url": "https://files.leaddesk.com/AgentIcon.svg"
Send icon
data-send-icon-url="https://files.leaddesk.com/sendIcon.svg"
And more...!
There are other customisation options available for the widget, for the full list of attributes in the widget check the PDF attachment at the bottom of the article Installing the webchat widget. This PDF gets updated as new attributes become available.