Chat widget styling: custom CSS

Use custom CSS to make styling changes to your Helpfruit chat widget beyond the standard options for avatar, colours, and position. This article covers commonly used selectors and example CSS snippets for common styling changes.

Add custom CSS

Go to Configuration > Bot styles, then open the Custom CSS tab.

Use this area to add styling changes that are not available in the standard widget styling options.

Some styles may only apply if you add !important. After saving your changes, test the widget on desktop and mobile.

Frequently used CSS selectors

Use the selectors below to target common parts of the chat widget.

• #myChatButton — use this to style the chat button, including avatar sizing.

• #chatBoxWrapper — the main wrapper for the chat widget. Use this to adjust width, borders, and outer styling.

• #chatBoxWrapper .chatBoxContent — use this to adjust the height of the chat content area.

• #chatBoxWrapper .chatBoxHeader — the header area of the chat widget.

  • .chatHeaderIcon span.icon — the header icon.

  • .chatHeaderTitle h1 — the header title.

• #chatBoxWrapper .wc-message-from-bot .wc-message-content — bot message styling.

• #chatBoxWrapper .wc-message-from-me .wc-message-content — user message styling.

• #chatBoxWrapper .chatBoxContent .wc-chatview-panel .wc-console — the chat input area.

  • button.wc-send — the send button.

Callout selectors

Use these selectors to style callouts.

• .callout-close-wrapper

• .callout-message

• .callout-message-triangle

• .callout-message-triangle-shadow

Example CSS snippets

Always show the close button

/* Always show the close button */
.callout-close-wrapper {
  opacity: 100 !important;
}

Hide the callout on small screens

@media screen and (max-width: 400px) {
  .callout-message {
    display: none;
  }

  .callout-message-triangle {
    display: none;
  }

  .callout-message-triangle-shadow {
    display: none;
  }

  #myChatButton {
    bottom: 2vh;
  }
}

Change widget width

#chatBoxWrapper {
  width: 420px !important;
}

Change chat content height

#chatBoxWrapper .chatBoxContent {
  height: 500px !important;
}

Round widget corners

#chatBoxWrapper,
#myChatButton {
  border-radius: 16px !important;
}

Style bot messages

#chatBoxWrapper .wc-message-from-bot .wc-message-content {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

Tips for testing changes

• Save one change at a time so it is easier to spot problems.

• Test the widget on desktop and mobile screen sizes, on your website test environment - so you can see how it works with your site's CSS.

• Check the chat button, header, messages, input area, and callouts.

• If a style does not apply, try adding !important.

• Remove any CSS that causes layout or readability issues.