Custom CSS
Custom CSS allows you to customize the appearance of your chatbots across all chat modes, including dedicated pages, iFrame embeds, and widget mode.
!important to override the default styles. Otherwise, your custom CSS might not be applied.Widget Mode Customization
When customizing your chatbot in widget mode, you have access to several specific IDs and classes that can be used to apply your custom styles:
The clickable chat icon that appears on the page. It is styled to be circular and has a default DocuChat green background.
Properties you can customize:
#docuchat-bubble {
background-color: #00ff00 !important; /* Change bubble color */
width: 60px !important;
height: 60px !important;
right: 20px !important;
bottom: 20px !important;
border-radius: 50% !important;
transform: scale(1.1) !important; /* For hover effects */
}
Inside the chat bubble, this icon can be the logo or any image representing the chat initiation.
Properties you can customize:
#docuchat-icon {
content: url('path/to/icon.png') !important;
width: 24px !important;
height: 24px !important;
}
The main chat interface that appears when the chat bubble is clicked.
Properties you can customize:
#docuchat-widget {
width: 400px !important;
height: 600px !important;
background-color: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
Custom CSS in iFrame Embeds and Dedicated Pages
For now, we do not have dedicated IDs or classes for the iFrame embeds and dedicated pages. However, you can target these elements by inspecting the pages. If you need assistance, please contact our support team.