How to Customize Live Chat Window


You can customize the chat window that your website visitors will see. You can customize it to match the look and feel of your website by changing the chat icon, its color, font, chatbox dimensions, and several other options.


Here's how you can customize the chat window for your website visitors:

Step 1: On your ProProfs Live Chat dashboard, click Settings.


Navigate to Settings to customize live chat widget


Step 2: By default, you arrive in the Theme option under the Chat Window setting. You can change various theme settings on this screen such as Style, Icon, Color, Avatar, Name, and Logo.


Customize the live chat window


Each customizable theme setting for the visitor chat window is explained below:


Style: Choose how you want the chat icon to look like. You can select between Bubble and Bar.


Select the style of live chat widget 


Icon: This setting is available if you've selected Bubble as the style of the icon. In case you've chosen Bar, the Icon setting becomes unavailable.


Choose the icon of live chat widget


Color: Choose the color you want the chat Bubble or Bar to appear in.


Select the color of live chat widget


Avatar and Name: As their names indicate, these settings allow you to add your avatar image and your name.


Add avatar and name


Logo: Add your company logo with this option. Please note that the recommended size is 350 x 200 pixels.


Add company logo to live chat widget


Moreover, you can click + Advanced to access advanced customization settings for the visitor chat window.


Click Advance to customize live chat widget


In the Advanced section, you can further customize the Visitor Text Color, Operator Text Color, Chatbox Position, Chatbox Size, and more. You can see the real-time preview of these changes on the preview chat window on the right, as shown in the screenshot below.


Customize live chat widget


Finally, you can also use the CSS Customization option if you have any color preferences that may not be provided by the available Color and Text Color options. CSS (Cascading Style Sheet) Customization also provides you more freedom in customizing the dimension of the chat window, dialogue boxes, bar, and the avatar box. In the end, click Save when you're done making changes.


Chat window customization using CSS

More Live Chat Customization Options


Video About:  How to Customize Your Live Chat Window






Was this information helpful?

The page cannot be found

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please make sure you spelled the page name correctly or use the search box.

add chat to your website