How to Customize the Live Chat Widget to Reflect Your Brand

In this article, you’ll learn how to fully customize the live chat widget’s appearance, including its theme, logo, launcher button, colors, position, and more. This will help maintain your brand identity and align it with your website’s design for a seamless and consistent user experience that resonates with your brand.

To get started, follow these steps:

1. Navigate to Admin > Chat > Live Chat.
2. Choose the widget you want to customize.

Theme

Within the General tab, select a light or dark theme for your live chat widget to match your site’s design.

Light Theme	Dark Theme

Widget appearance

Under the Widget Customization tab, you can find the Widget Appearance section, which allows you to adjust key visual elements.

Banner header and description

Modify the header text and description to highlight important information or provide helpful instructions to your users.

Widget colors

Personalize your Live Chat widget by selecting colors that reflects your brand. Adjust the following settings:

• Brand Color: Sets the background color of the widget.
• Action Color: Highlights buttons, links, and other key elements.
• Brand Text Color: Sets the color for header and message text.
• Action Text Color: Changes the text color for actionable elements like buttons.

Customize logo

Add your company logo to the live chat widget to reinforce your brand identity. By default, the BoldDesk logo is displayed, but you can replace it with your brand’s Favicon and customize the agent Avatars.

With Logo	With Out Logo

Launcher appearance

You can find options for the Launcher Appearance in the customization tab.

Button type and text

Tailor the appearance of the launcher button to fit your brand’s style.

Button position

You can control where the widget appears on the screen, placing it at either the bottom left or right. You can also fine-tune its position using the Offset Bottom (px) and Offset Right (px) settings.