# Chat Management: Design > Style and customize the chat widget design, appearance, and default messaging to provide a seamless chat experience for your customers on web and mobile apps... Source: https://kustomer.kustomer.help/en_us/chat-design-Skgvx4KQf Last updated: 2026-04-30T15:17:01.256Z Style and customize the chat widget design, appearance, and default messaging to provide a seamless chat experience for your customers on web and mobile apps. With chat, you can design and configure your chat widget to match the voice, style, branding, and reply time for each brand in your organization. In this article, we'll explore the design settings available in chat and how you can customize the chat widget design for a brand. **Who can access this feature?** **User types** Admins can access chat settings. ### In this article * [Chat widget experience](#chat-widget-experience) * [Team info](#team-info) * [Icon design](#icon-design) * [Set a reply time](#set-reply-time) * [Set up a footer message](#footer) * [Colors](#colors) ### To access the Chat Design settings for a brand, go **Apps**![](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/64b94a43531d0c8e5fcec04eef45eb98.png)and select **Chat**. From the Chat Management page, select the brand and then go to the **Design** tab. Learn more about [Chat Management](https://help.kustomer.com/introduction-kustomer-chat-H1xk1Gb8v#manage-chat) settings in Kustomer. ### Chat widget experience Provide customers with a versatile chat support experience with live chat support, a native knowledge base in the chat widget, or both.  Choose the best chat support experience for your customers from three different chat widget formats: * [Live Chat](#live-chat) * [Knowledge Base](#knowledge-base) * [Knowledge Base + Live Chat](#knowledge-base-live-chat) **Live Chat** Select the **Live Chat** format to support customers through real-time conversations with an agent. ![](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/989500593e49988786635395778cb73c.png) **Knowledge Base** Select the **Knowledge Base** format to support customers with a native knowledge base in the chat widget. Customers will be able to access and search your public knowledge base articles directly from the widget. ![Knowledge Base Chat Widget Experience example for Kustomer Chat 2.0.](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/c5e9c6e6209965682098eef0dc8e37f7.png) **Knowledge Base + Live Chat** Select the **Knowledge Base + Live Chat** format to support customers with the option to access a native knowledge base from the chat widget and to have a real-time conversation with an agent for additional support. ![](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/1aa9a8ed0bacefd77504409bcb16a439.png) ### Team info Customize the team logo, name, and default messaging in the chat widget to represent your brand or the team on chat support. The following settings are available: * **Team Name**: The brand name or the name of the specific team (for example, Support or Sales) on chat support. The team name appears below the team logo or avatar in the chat. * **Team Logo**: Upload the image of your brand logo or a logo for the team on chat support. This team logo appears as the team avatar in the chat before the customer connects with an agent or when an agent is unavailable. * Supported image file types: PNG and JPG * Recommended image height and width: 50px * **Greeting Message (When Available)**: A short, introductory greeting to display in the chat header under your team name when the chat widget first opens for customers. ![](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/2c4f4456ab17c7228027a1dd481e0e08.png) * **Greeting Message (When Unavailable)**: A short greeting to display in the chat header if you have chat set to [Appear Available outside of your business hours](https://help.kustomer.com/settings-B1sdKbtz7#business-hours-availability). You can use this greeting to communicate with customers your business hours or the offline status of your chat support team. * **Greeting Image (When Unavailable)**: Upload the image for a custom, branded image placeholder to display in a chat conversation when chat support is offline. This image only displays if there are no previous chats for the customer and the customer opens chat outside of business hours. * Supported image file types: PNG and JPG * Recommended image height and width: 250px ### Icon design Customize the design and a border color for the chat icon that opens the chat widget for customers. Kustomer uses the Kustomer logo as the default chat icon with a dark navy border color: ![Default Kustomer Chat icon](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/4a9f08cc051efa366758778bb29f49f1.png). The following settings are available: * **Chat Icon**: Upload the image used as a custom chat icon to display on your site for the customer to open chat. * Supported image file types: PNG and JPG * Recommended image height and width: 50px * **Chat Icon Color:** The chat icon border color to match your brand. ![](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/f7fcb93822b0ce456e6b3d2418422d51.png) ### Set a reply time Set a reply time to let your customers know when they can expect a chat reply from your team, especially when chat volume is high. The expected reply time is displayed within active chats and inside the chat header when a customer first opens chat.  You can choose how to display the reply time with the following options: * **"Typically responds in 45 minutes"** The response time is automatically calculated from when the message is received. * **"Typically responds in a few minutes"** * **"Typically responds in an hour"** * **"Typically responds in the same day"** * **Custom Message**: Select this option to display a custom reply time message. ![](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/91984294b7410ab35bbdaf4a690ef04e.png) ### Set up a footer message Set a short message that displays in the chat footer. By default, the footer message notifies the customer that they are consenting to the chat being stored according to your privacy policy. ![](https://cdn.kustomerhostedcontent.com/media/570fad9d9001bc1000163b28/fb4fd7a1a1fa2e81bd5a059a03fc943b.png) **Note:** As required by applicable law, you should obtain customers’ consent to record conversations, and provide transparency to customers that you use Kustomer, Inc. to facilitate this chat function. For tips on how to disclose that your conversational assistant is not a person, see our [best practices article](https://help.kustomer.com/best-practices-conversational-assistant-B1NCgLbJq). ### Colors Style the chat widget to match your custom brand colors. Use the color pickers or enter hex color codes to set the background and text colors for the chat header, chat bubbles, and chat response buttons. The Colors setting allows you to choose colors for the following: * **Chat header**: Background, Primary Text, Secondary Text * **Agent chat bubble**: Background, Primary Text * **Customer chat bubble**: Primary Text, Secondary Text * **Primary button**: Background, Background (Hover), Text **Tip**: Test your custom chat colors for an accessible color contrast ratio. ### ****Multilingual Chat Configuration**** ****How language selection works:**** * The chat widget detects the customer's browser language by default and displays the chat in the matching language (if enabled). * If the browser language does not match any of your enabled languages, the widget defaults to your primary language. * Customers do not manually select a language — the widget handles it automatically based on browser settings. ****To enable additional languages:**** 1. Navigate to ****Settings > Chat > Languages****. 2. Select the languages you want to support. 3. Provide translations for your chat forms and greeting messages. 4. Save and deploy the changes.