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:
- Color
- 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:
- Color
Add Comment