SimpleBot — 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.

Need more help?

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