Widget Styling
You can customize the appearance of your chatbot by modifying the following CSS variables:
📝
Use .ygpt-chatbot class to override the default styling of the chatbot. You can increase the specificity of the selector by adding more classes to it.
For example, .ygpt-chatbot.ygpt-chatbot will override the default styling of the chatbot.
Usage
curl
CSS Variables
| Variable | Description |
|---|---|
--yourgptChatbotFontFamily | Font family of the chatbot |
--yourgptChatbotPrimaryColor | Primary color of the chatbot |
--yourgptChatbotPrimaryColorHsl | Primary color of the chatbot in HSL format |
--yourgptChatbotSurfaceColorHsl | Surface color of the chatbot in HSL format |
--yourgptChatbotTextColorHsl | Text color of the chatbot in HSL format |
--yourgptChatbotUserMessageBgColor | Background color of the user message |
--yourgptChatbotUserMessageTextColor | Text color of the user message |
--yourgptChatbotBotMessageBgColor | Background color of the bot message |
--yourgptChatbotBotMessageTextColor | Text color of the bot message |
Animations
You can inject custom animations to the widget button using the following CSS:
CSS