🤖 Chatbot
⚙️ Customization
Chatbot SDK
Styling

Widget Styling

You can customize the appearance of your chatbot by modifying the following CSS variables:

Note: 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

.ygpt-chatbot.ygpt-chatbot {
     
 /* FONT STYLE */
  --yourgptChatbotFontFamily: 'Roboto', sans-serif;
 
 /* PRIMARY COLOR  */
    --yourgptChatbotPrimaryColor: #000;
 
 /* FOR SAHDES PLEASE ADD HSL VALUES IN FORMAT OF - H S% L% */
    --yourgptChatbotPrimaryColorHsl: 0 0% 0%;
    --yourgptChatbotSurfaceColorHsl: 0 0% 0%;
    --yourgptChatbotTextColorHsl:0 0% 0%;
 
 
 
 /* USER MESSAGE STYLING */
  --yourgptChatbotUserMessageBgColor: #f5f5f5;
  --yourgptChatbotUserMessageTextColor: #000;
 
 /* BOT MESSAGE STYLING */
    --yourgptChatbotBotMessageBgColor: #f5f5f5;
    --yourgptChatbotBotMessageTextColor: #000;
}

CSS Variables

VariableDescription
--yourgptChatbotFontFamilyFont family of the chatbot
--yourgptChatbotPrimaryColorPrimary color of the chatbot
--yourgptChatbotPrimaryColorHslPrimary color of the chatbot in HSL format
--yourgptChatbotSurfaceColorHslSurface color of the chatbot in HSL format
--yourgptChatbotTextColorHslText color of the chatbot in HSL format
--yourgptChatbotUserMessageBgColorBackground color of the user message
--yourgptChatbotUserMessageTextColorText color of the user message
--yourgptChatbotBotMessageBgColorBackground color of the bot message
--yourgptChatbotBotMessageTextColorText color of the bot message

Animations

You can inject custom animations to the widget button using the following CSS:

Hello
/* Styling for the outer widget button */
.ygpts-widgetBtnMiddle::before {
    content: "";
    /* Creating a gradient background */
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    /* Applying a blur effect */
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    /* Applying an animation */
    animation: glowing 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 50px;
    opacity: 1;
}
 
/* Styling for the after pseudo-element of the outer widget button */
.ygpts-widgetBtnMiddle::after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* Setting the background color */
    background: #622bff;
    left: 0;
    top: 0;
    border-radius: 40px;
}
 
/* Defining the glowing animation */
@keyframes glowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}
Web/SDKWidget