Custom chatbot styling with CSS - Help Center

You can customize the appearance of the chat widget by adding your own CSS styles. Examples of what can be accomplished:

How to add custom styling

To change chatbot widget appearance, enter CSS (Cascading Style Sheets) in the ‘Appearance’ section in your chatbot dashboard:

💡

Tip: Try changing the theme between light/dark to make styling experiments easier.

Example

Below are the IDs of various elements you can target and some example styles you could use.


/* Chat widget container */
#chatwith-chat-widget {
  background-color: #DAD7CD;
  color: #ffffff;
  font-family: 'Courier New', Courier, monospace;
}

#chatwith-chat-message-list {
  max-width: 1000px;
}

/* Chat header */
#chatwith-chat-header {
  background-color: #A3B18A;
  border-bottom: 2px solid #344E41;
}

#chatwith-chat-header-avatar {
  border: 1px solid #A3B18A;
  background-color: #DAD7CD;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  margin-right: 10px
}

#chatwith-chat-header-name {
  color: #344E41;
  font-size: 1.5rem;
  font-weight: bold;
}

#chatwith-chat-header-clear-conversation-button {
  color: #344E41;
}

#chatwith-chat-header-close-button {
  color: #344E41;
}

/* Chat Bubbles */
.chatwith-chat-bubble-user {
  background-color: #344E41 !important;
  padding: 16px;
  border-radius: 15px 15px 0 15px;
}

.chatwith-chat-bubble-assistant {
  background-color: #A3B18A;
  padding: 16px;
  border-radius: 15px 15px 15px 0;
}

.chatwith-chat-bubble-user .chatwith-bubble-content p,
.chatwith-chat-bubble-assistant .chatwith-bubble-content p,
.chatwith-chat-bubble-user .chatwith-bubble-content span,
.chatwith-chat-bubble-assistant .chatwith-bubble-content span {
  color: #000000;
  font-size: 1.5rem;
}

#chatwith-chat-loading-indicator {
  width: 100px;
}

#chatwith-chat-bubble-action[data-action-state="loading"] {
  color: #000000;
  font-weight: bold;
  border-radius: 100px;
}

#chatwith-chat-bubble-action[data-action-state="loading"] svg {
  stroke: #ffff00;
}

#chatwith-chat-bubble-action[data-action-state="error"] {
  background-color: #ffcccc;
  border-radius: 100px;
}

#chatwith-chat-bubble-action[data-action-state="completed"] {
  font-weight: bold;
  border-radius: 100px;
}

/* Chat Panel */
#chatwith-chat-panel {
  background-color: #A3B18A;
  border-top: 2px solid #344E41;
  padding: 10px;
}

#chatwith-chat-panel-form {
  background-color: #DAD7CD;
  border: 1px solid #344E41;
  padding: 10px;
  border-radius: 10px;
}

.chatwith-chat-suggestion {
  background-color: #A3B18A;
  color: #344E41;
  font-weight: bold;
  border: 1px solid #344E41;
  padding: 10px;
  border-radius: 100px;
}

/* Lead Form */
#chatwith-lead-form {
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}

#chatwith-lead-form input {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #cccccc;
  padding: 10px;
  border-radius: 5px;
}

#chatwith-lead-form button {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#chatwith-lead-form button:hover {
  background-color: #0056b3;
}

💡

Your custom code will not be checked for correctness before saving. Having trouble accomplishing a theme? Try asking ChatGPT for help! (provide code above as example)