Custom CSS

Customize your assistant

You can make your assistant’s design entirely custom by using the Custom CSS option. You will find it in the Design tab, in the Appearance section.

image2.png

You can add and edit your custom CSS code by clicking on the Edit button (Pencil icon). We provided you with a sample block of code but that’s just a tiny portion of what you can achieve here.

INFO

Remember to remove the comment signs ("/*" at the beginning and "*/" at the end) if you want to make the sample code work.

image3.png

INFO

You can style any static class in your assistant, which are easy to recognize thanks to their user-friendly names, such as:

.top-navigation
.page-selector-wrapper
.questions-wrapper
.navigation-next-button
.product-details

You will be able to see your changes in the assistant only when Custom CSS is enabled. Simply switch the toggle on:

image1.png

TIP

When your changes don’t apply in the assistant, try using the !important rule. This will override any class relationships that might be blocking your customization. For example:

.questions-wrapper .answer-text {
color: #3b0078 !important;
}

Was this article helpful?
3 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Articles in this section