Styling issues

Excerpt

Styling issues (hidden text, wrong colours, etc)

---

Styling issues (hidden text, wrong colours, etc)

Styling issues are uncommon but can result when styles on your own site conflict with bot styles.

You can fix these by using some custom CSS on your site.

Below are the most common issues. For larger issues, such as those that occur on Shopify, see this dedicated help article with styles for Shopify (may also work on other platforms).

Here is how the code snippet would look like for installation:

<style>
div.talktext p {
    color: black !important;
}
</style>

Common issues and the relevant CSS is below:

The text on the Call to Action “speech bubble” pop out is white/hidden, meaning you can’t see it

You can insert this as custom CSS on your site to fix it:

<style>
    div.talktext p {
    color: black !important;
    }
</style>

The area behind the “Powered By” branding/custom logo is grey, black or the wrong color.

You can insert this as custom CSS on your site to fix it:

<style>
    #poweredBy {
    background-color: white !important;
    }
</style>

Chat links wrong color:

You can insert this as custom CSS on your site to fix it:

<style>
    .chatLink {
    color: blue !important;
    }
</style>

Button links wrong color:

You can insert this as custom CSS on your site to fix it:

<style>
    .sc-suggestions-element {
    color: blue !important;
    }
</style>

Change font size:

Insert this custom CSS to determine the font size:

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