loading Loading...
add chat to your website

How to Customize Live Chat Widget

 

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