Robot — Styling Issues

Overview

Styling issues are uncommon but can occur when CSS styles on your site conflict with the bot's built-in styles. These conflicts can cause text to disappear, colors to render incorrectly, or elements to display in unexpected ways.

The fix is to add custom CSS to your site that overrides the conflicting styles. Below are the most common issues and their solutions.

Speech Bubble Text Hidden or White

If the call-to-action speech bubble text is invisible (white text on a white background):

div.talktext p {
  color: black !important;
}

"Powered By" Area Wrong Color

If the background behind the branding area is grey, black, or an unexpected color:

#poweredBy {
  background-color: white !important;
}

Chat Link Colors

If links inside the chat window are the wrong color:

.chatLink {
  color: blue !important;
}

Button Link Colors

If suggestion button text is the wrong color:

.sc-suggestions-element {
  color: blue !important;
}

Font Size

If the chat text is too small or too large, adjust the font size:

.sc-message--text-content {
  font-size: 18px !important;
}

Additional Style Targets

For more advanced customization, here are additional CSS selectors you can use:

Wrap any of these in tags and add them to your site's custom CSS or HEAD code section.

Designing Your Widget

Before you reach for custom CSS, most of the look and feel of your chat widget can be set directly from its built-in design options — no code required. Open your bot and select Widget Style from the sidebar to find these settings.

Theme color. Click the color swatch to set your widget's main color. This drives the header, buttons, and accent elements throughout the chat.

Position. Choose where the chat widget sits on the page — for example, bottom right or bottom left.

Launcher button (widget icon). Upload a custom image for the floating chat button visitors click to open the chat. A square image works best — somewhere between 60×60 and 120×120 pixels, and under about 0.5 MB.

Chat avatar. Upload an image shown next to the bot's messages inside the chat. Use the same size guidance as the launcher button.

Text size. Adjust the message text to your preferred size within the chat window.

Header appearance. Toggle the header bar on or off. When it's on, the header shows your avatar and bot title. You can also control how strongly the theme color shows in the header, from subtle to strong.

Preview before you save. Use the live preview panel to see your design in both floating (chat bubble) and inline (embedded) modes. Changes update in real time, so you can refine the look before saving.

If something still doesn't look right after using these options — for example, your site's own styles are overriding the widget — the CSS fixes earlier in this article are the next step.

Need more help?

If you've worked through this and still need a hand, contact support — we'll dig in with you.