See related

Chat Management: Design

Last Update: Sep 2024 • Est. Read Time: 4 MIN
To check plan availability, see the pricing page.

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 typesAdmins can access chat settings.


In this article

To access the Chat Design settings for a brand, go Appsand select Chat. From the Chat Management page, select the brand and then go to the Design tab.

Learn more about Chat Management 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

Select the Live Chat format to support customers through real-time conversations with an agent.

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.

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.

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.

  • 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. 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. 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.

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.

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.

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.

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.