Luma provides a wide range of options for completely customizing the look and feel of the web widget. To do so:
You can customize the chat container using the following options:
You can change the chat toggle icon and position by editing the following styles:
You can change the bot icon and edit the following styles:
To edit the Header Container (to change the background color of web widget header as shown in the following sample image), update the following styles:
You can change the appearance of the bot text by editing the following styles:
You can change the appearance of the user entered text by editing the following styles:
You can change the appearance of the agent entered text by editing the following styles:
To edit the message information of the bot (which includes the bot name and the message displayed timestamp to the user), change the font size.
To edit the message information of the user (which includes the user name and the message displayed timestamp to the user), change the font size.
To change the bot face icon, provide the image URL in the background image.
To change the agent icon, provide the image URL in the background image.
To change the welcome image, provide the image URL in the background image.
To edit the Welcome Container (it is the background color of the welcome container as shown in the following image), update the image URL in the background image.