SnatchBot Support

Welcome to the SnatchBot Support. You'll find comprehensive guides and documentation to help you start working with SnatchBot as quickly as possible, as well as support if you get stuck. Let's jump right in!

The community forum is not a helpdesk
Let’s put this in the front - the vast majority of people here do not work for SnatchBot.

Get Started    SNATCHBOT API

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.

📘

Note

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 }

.chat__header

{ background-color: red !important; }
.chat__avatar

{ border-color: #000 !important; }
.chat__body

{ border-radius: 50px !important; }
.chat__audio

{ display: none !important; }
.message__body

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

{ border-radius: 0 !important; }
.message__suggested-btn:hover

{ 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:
Header:
.chat__starter
.chat__header
.chat__start
.chat__channels
.chat__channel
.chat__channel-item
.chat__avatar
.chat__name

Chat Body
.chat__body

Chat Form
.chat__form
.chat__form-btns
.chat__input
.chat__info
.chat__control
.chat__controls
.chat__form .round-block

Chat Recorder
.chat__audio

Messages Styling:
.audio
.messages

Quick replies
.message__suggested
.message__suggested-btn

Message
.message // from bot
.message__body-img
.message__link
.message__wrapper
.message__body
.message__body_audio
.message__body img
.message--right // from user
.message__date

Cards
.mcard
.mcard__body
.mcard__text
.mcard--gallery
.mcard__thumb

Card buttons:
.mcard__btns button
.mcard__btn-container
.mcard__btn
.mcard__body-img

👍

Right-to-Left languages

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

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

Updated 13 days ago


Next Steps

Connect your bot to your desired channel or channels.

Connecting Channels

Customizing the chat window with CSS.


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.