Customization

The chatbot is designed to be customizable. Every part of it has its own css class you can use to style it. It also uses css variables for colors and other properties, so you can change them easily.

Colors

/* custom.css */
.chatbot {
    --mathew-chatbot-color-primary: #5e61ea;
    --mathew-chatbot-color-primary-light: #e2e5fe;
    --mathew-chatbot-color-primary-mid: #9ca2e1;
    --mathew-chatbot-color-primary-dark: #7f81ee;
    --mathew-chatbot-color-secondary: #ea5e61;
    --mathew-chatbot-color-success: #38a736;
    --mathew-chatbot-color-info: #50ced2;
    --mathew-chatbot-color-warning: #ffb463;
    --mathew-chatbot-color-light: #f3f4ff;
    --mathew-chatbot-window-background-color: white;
}

// index.js
import { startChatbot } from '@adaptical/mathew-chatbot'
import '@adaptical/mathew-chatbot/style.css'
import './custom.css'

startChatbot(...)

Agent

Agent's name and icon are customizable via chatbot options.

import { startChatbot } from '@adaptical/mathew-chatbot'

const chatbotRoot = document.querySelector('#app')
const chatbotOptions = {
    agent: {
        name: 'Mathew',
        icon: 'src/assets/img/agent-icon.svg',
    },
}

startChatbot(chatbotRoot, chatbotOptions)