Customizing the chat window with CSS.

You can customize the look of webchat window by applying custom CSS styles.

Customizing with CSS

CSS is short for Cascading Style Sheets and is a set of specific rules applied to the style of the elements which are being read by the browser. You can't create new rules, but you can modify their properties.

To add custom styles, go to Webchat channel settings - Get Embed Code.
Insert your code and the changes will be applied to your webchat.



All the changes are applied instantly, there is no need to replace the code on your website.

The default SnatchBot CSS settings for your reference:

#sntch_webchat, #sntch_webchat iframe { height: 300px !important; width: 300px !important }


{ background-color: red !important; }

{ border-color: #000 !important; }

{ border-radius: 50px !important; }

{ display: none !important; }

{ border: 4px solid #ff00dd !important; }
.chat__form .round-block

{ border-radius: 0 !important; }

{ box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.5); }

Other editable parameters:

Button Get Started:
.chat__starter .mat-primary { background-color: red !important}

Chat styling:

Chat Body

Chat Form
.chat__form .round-block

Chat Recorder

Messages Styling:

Quick replies

.message // from bot
.message__body img
.message--right // from user


Card buttons:
.mcard__btns button


Right-to-Left languages

To enable right-to-left text direction, you can apply this parameter:
{ direction: rtl; }

Watch this video tutorial ''How to customize the chat window with CSS''

Next Steps

Connect your bot to your desired channel or channels.

Did this page help you?