Styling issues are uncommon but can result when styles on your own site conflict with Aminos 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).
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 “Powered By” branding/custom logo is centered to the left or right instead of centered:
<style>
#poweredBy { display: block; margin-left: auto !important; margin-right: auto !important; text-align: center; } #poweredBy img { display: block; margin: 0 auto; }
</style>
The area behind the “Powered By” branding/custom logo is grey, black or the wrong color.
<style>
#poweredBy {
background-color: white !important;
}
</style>
Chat links wrong color:
<style>
.chatLink {
color: blue !important;
}
</style>
Button links wrong color:
.sc-suggestions-element {
color: blue !important;
}
Font size needs changing:
.sc-message--text-content {
font-size: 18px !important;
}
(Wrap in style tags if required).
Even more, courtesy of community member Stas R:
You can do it without this bit (/* User Text Bubble Background */) - this is just the comment so you know what a function does. Here are a few, if you need something else let me know. Wrap in style tags, see example:
Wrap in style tags, see example:
EXAMPLE:
-------------------------------------------------------
<style>
/* User Text Bubble Background */
.sent .sc-message--text {
background: #1b1b1b !important;
}
</style>
--------------------------------------------------------
/* User Text Bubble Background */
.sent .sc-message--text {
background: #1b1b1b !important;
}
--------------------------------------------------------
/* User Text Color */
.sent .sc-message--text-content {
color: #e2e2e2 !important;
}
--------------------------------------------------------
/* Bot Text Bubble Background */
.received .sc-message--text {
background: #000 !important;
}
--------------------------------------------------------
/* Bot Text Color */
.received .sc-message--text p {
color: #e2e2e2 !important;
}
--------------------------------------------------------
/* Welcome Message Text Color */
.received .sc-message--text-content {
color: #e2e2e2 !important;
}
--------------------------------------------------------
/* Main Background */
.sc-message-list {
background: #232323 !important;
}
--------------------------------------------------------
/* Header Title */
.sc-header--title {
text-shadow: 1px 0 10px #000;
color: #fff;
font-weight: 300;
font-family: sans-serif !important;
text-transform: uppercase;
}
--------------------------------------------------------
/* Header Background */
.sc-header {
background: #1b1b1b !important;
}