Customize Web Widget Styles

Luma provides a wide range of customization options for completely customizing the look and feel of the web widget. To do so:

Open the Luma folder from the luma-web-chat-widget folder and then edit the styles.css page, which appears as shown below.
The default font provided in the CSS stylesheet is Montserrat, however, you can use any font as required.
To change the web widget image, provide the image URL in the background image.

Web Widget Location

You can change the location of the web widget icon on a web page by editing the following fields:

Position
Bottom
Right
Height
Width

Header Container

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:

Background
Padding

Chat Item User

To edit the Chat Item User (the background color of the user responses as shown in the following sample image), update the following style:

Background

Chat Item Bot

To change the Chat Item Bot, update the following style:

Background color

Chat Container

To edit the Chat Container (it is the background color of the container as shown in the following image), update the following styles:

Position
Right
Bottom
Width
Height
Max width
Max height
Box shadow
Border radius
z -index

Chat Text

To edit the Chat Text, update the following styles:

White space
Max width

Text Color

To edit the Bot Text color (It is background color of bot responses as shown in the following sample image), update the following style:
1. Color
To edit the User Text color (It is color of user text responses as shown in the following sample image), update the following style:
1. Color