Customizing CSS

In order to customize CSS you can choose to override the CSS properties of the chatbot:

The following classes can be overriden:

.react-chatbot-kit-chat-container {}
.react-chatbot-kit-chat-inner-container {}
.react-chatbot-kit-chat-header {}
.react-chatbot-kit-chat-input-container {}
.react-chatbot-kit-chat-message-container {}
.react-chatbot-kit-chat-input {}
.react-chatbot-kit-chat-input-form {}
.react-chatbot-kit-chat-input::placeholder {}
.react-chatbot-kit-chat-btn-send {}
.react-chatbot-kit-chat-btn-send-icon {}
.react-chatbot-kit-chat-bot-message-container {}
.react-chatbot-kit-chat-bot-avatar-container {}
.react-chatbot-kit-chat-bot-avatar-icon {}
.react-chatbot-kit-chat-bot-avatar-letter {}
.react-chatbot-kit-chat-bot-message {}
.react-chatbot-kit-chat-bot-message-arrow {}
.react-chatbot-kit-chat-bot-loading-icon-container {}
.chatbot-loader-container {}
#chatbot-loader #chatbot-loader-dot1 {}
#chatbot-loader #chatbot-loader-dot2 {}
#chatbot-loader #chatbot-loader-dot3 {}
.react-chatbot-kit-error {}
.react-chatbot-kit-error-container {}
.react-chatbot-kit-error-header {}
.react-chatbot-kit-error-docs {}