SaleSave up to 20% on Pro with code SALE20See pricing →

Upgrade to Pro

Chatbot

View All Docs

Customization (4)

Custom CSS

Reading Time: 8 minutes
Download Markdown

Overview

With Custom CSS you can fully customize the appearance of your WPiko AI Chatbot beyond the built-in styling options. Using CSS, you can modify colors, fonts, animations, layouts, and create unique designs that perfectly match your website’s branding and aesthetic preferences.

Where to Add Custom CSS

Built-in WordPress Customizer (Easiest)

This is the recommended method for beginners and simple customizations:

  • Go to your WordPress admin dashboard
  • Navigate to Appearance → Customize → Additional CSS
  • Add your custom CSS code in the text area
  • Click Publish to save your changes

Benefits:

  • Your CSS won’t be lost when you update your theme
  • Changes are applied instantly with live preview
  • Easy to manage and modify
  • WordPress handles the CSS loading automatically

For advanced customizations and multiple CSS rules:

  • Create a child theme if you don’t have one already
  • Open your child theme’s style.css file
  • Add your custom CSS at the end of the file
  • Save the file and upload it to your server

Benefits:

  • Preserves customizations when the parent theme updates
  • Better organization for extensive modifications
  • Can include additional functionality
  • Professional development approach

Available CSS Classes and Selectors

Main Container Classes

Chatbot

css
/ Main chatbot container /
#wpiko-chatbot-container {
    / Customize the overall chatbot appearance /
}
/ Chatbot header /
#chatbot-header {
    / Customize header background, padding, etc. /
}
/ Messages area /
#chatbot-messages {
    / Customize the conversation area /
}
/ Input container /
#input-container {
    / Customize the input area wrapper /
}

Floating Chatbot

css
/ Floating chatbot icon /
#wpiko-chatbot-floating-icon {
    / Customize the floating button /
}
/ Floating chatbot container /
#wpiko-chatbot-floating-container {
    / Customize the floating chatbot window /
}
/ Floating text bubble /
#wpiko-chatbot-floating-text {
    / Customize the text that appears next to floating icon /
}
/ Mobile close button /
#wpiko-chatbot-mobile-close {
    / Customize the mobile close button /
}

Header Elements

css
/ Chatbot image/avatar /
#chatbot-image {
    / Customize bot avatar /
}
/ Chatbot name /
#chatbot-name {
    / Customize bot name styling /
}
/ Chatbot status indicator /
#chatbot-status {
    / Customize online/offline status /
}
#chatbot-status.online {
    / Online status styling /
}
#chatbot-status.offline {
    / Offline status styling /
}
/ Menu button /
#chatbot-menu-button {
    / Customize the menu button /
}
/ Menu dropdown /
#chatbot-menu-dropdown {
    / Customize the dropdown menu /
}

Message Styling

css
/ User messages /
.message-container .user-message {
    / Customize user message bubbles /
}
/ Bot messages /
.message-container .bot-message {
    / Customize bot message bubbles /
}
/ Message wrappers with avatars /
.user-message-wrapper {
    / User message container with avatar /
}
.bot-message-wrapper {
    / Bot message container with avatar /
}
/ Message avatars /
.message-avatar {
    / General avatar styling /
}
.message-avatar.user-avatar {
    / User avatar specific styling /
}
/ User avatar SVG icon /
.user-avatar-svg {
    / Customize user avatar icon /
}

Input Area

css
/ Input container /
#chatbot-input-container {
    / Customize the input wrapper /
}
/ Text input field /
#chatbot-input {
    / Customize the message input field /
}
/ Send button /
#chatbot-send {
    / Customize the send button /
}
#chatbot-send svg {
    / Customize the send button icon /
}

Pre-made Questions

css
/ Questions container /
#pre-made-questions {
    / Customize the questions area /
}
/ Individual question buttons /
.pre-made-question {
    / Customize question button styling /
}
.pre-made-question:hover {
    / Question button hover effects /
}

Loading Animation

css
/ Loading dots container /
.loading-dots {
    / Customize loading animation container /
}
.loading-dots .dot {
    / Individual loading dots /
}
/ Loading message container /
.message-container.loading {
    / Container for loading messages /
}

Error Messages

css
/ General error messages /
.error-message {
    / Basic error styling /
}
/ Configuration errors /
.error-message.config_error {
    / Specific config error styling /
}

Pro Features (WPiko AI Chatbot Pro)

Email Capture

css
/ Email capture overlay /
#email-capture-overlay-container {
    / Full overlay container /
}
#email-capture-overlay {
    / Email capture form container /
}
#email-capture-overlay h3 {
    / Email capture title /
}
#email-capture-overlay input[type="email"] {
    / Email input field /
}
#email-capture-overlay button {
    / Email submit button /
}

Contact Form

css
/ Contact form message container /
.contact-form-message {
    / Contact form wrapper /
}
/ Contact form /
#wpiko-contact-form {
    / Main contact form /
}
#wpiko-contact-form .form-group {
    / Form field groups /
}
#wpiko-contact-form input,
#wpiko-contact-form textarea {
    / Form input fields /
}
#wpiko-contact-form button {
    / Form buttons /
}
#contact-form-submit {
    / Submit button /
}
#contact-form-cancel {
    / Cancel button /
}

Product Cards

css
/ Product card container /
.message-container .product-link-container {
    / Product card wrapper /
}
/ Product image /
.message-container .product-image {
    / Product image styling /
}
/ Product information /
.message-container .product-info {
    / Product details container /
}
/ Product name /
.message-container .product-name {
    / Product title styling /
}
/ Product description /
.message-container .product-description {
    / Product description text /
}
/ Product price /
.message-container .product-price {
    / Product price styling /
}

Common Customization Examples

Change Chatbot Width and Height

css
#wpiko-chatbot-container {
    max-width: 500px; / Custom width /
}
#chatbot-messages {
    height: 400px; / Custom height /
}

Custom Message Bubble Styling

css
/ Rounded user messages /
.message-container .user-message {
    border-radius: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/ Custom bot messages /
.message-container .bot-message {
    background: #f8f9ff;
    border-left: 4px solid #667eea;
    border-radius: 0 15px 15px 15px;
}

Floating Button Customization

css
/ Custom floating button /
#wpiko-chatbot-floating-icon {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    width: 70px;
    height: 70px;
    bottom: 30px;
    right: 30px;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

Header Customization

css
/ Custom header styling /
#chatbot-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 20px;
}
#chatbot-name {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

Input Area Styling

css
/ Modern input styling /
#chatbot-input-container {
    background: #f8f9fa;
    border-radius: 25px;
    border: 2px solid #e9ecef;
    transition: border-color 0.3s ease;
}
#chatbot-input-container:focus-within {
    border-color: #007cba;
}
#chatbot-input {
    background: transparent;
    font-size: 16px;
    color: #333;
}
#chatbot-send {
    background: linear-gradient(135deg, #28a745, #20c997);
    transition: transform 0.2s ease;
}
#chatbot-send:hover {
    transform: scale(1.1);
}

Mobile Responsive Adjustments

css
/ Mobile-specific styling /
@media screen and (max-width: 767px) {
    #wpiko-chatbot-floating-container {
        / Full screen on mobile /
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }
    
    #chatbot-header {
        padding-top: 40px; / Account for status bar /
    }
    
    #chatbot-input {
        font-size: 16px; / Prevent zoom on iOS /
    }
}

Animation Effects

css
/ Fade-in animation for messages /
.message-container {
    animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/ Typing indicator animation /
.loading-dots .dot {
    animation: typing 1.4s infinite ease-in-out;
}
@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

Best Practices for Custom CSS

Performance Optimization

  • Minimize CSS: Remove unnecessary properties and combine rules when possible
  • Use Efficient Selectors: Prefer classes over complex nested selectors
  • Avoid !important: Use specific selectors instead of forcing styles with !important

Cross-Browser Compatibility

  • Test Across Browsers: Check your customizations in Chrome, Firefox, Safari, and Edge
  • Use Vendor Prefixes: Add prefixes for CSS properties that require them
  • Fallback Values: Provide fallback values for newer CSS properties

Responsive Design

  • Mobile-First Approach: Design for mobile devices first, then enhance for larger screens
  • Test on Multiple Devices: Ensure your chatbot looks good on phones, tablets, and desktops
  • Use Relative Units: Prefer em, rem, and percentages over fixed pixel values

Accessibility Considerations

  • Color Contrast: Ensure sufficient contrast between text and background colors
  • Focus Indicators: Maintain visible focus indicators for keyboard navigation
  • Font Sizes: Don’t make text too small to read comfortably

Troubleshooting Custom CSS

Common Issues and Solutions

Styles Not Applying

  • Clear Browser Cache: Hard refresh (Ctrl+F5 or Cmd+Shift+R)
  • Check CSS Priority: Use more specific selectors or proper cascade order
  • Validate CSS Syntax: Ensure there are no syntax errors in your CSS
  • Test in Incognito: Verify changes in a private browsing window

Styles Being Overridden

  • Increase Specificity: Use more specific selectors
  • Check Load Order: Ensure your CSS loads after the plugin’s CSS
  • Use CSS Custom Properties: Override CSS variables instead of individual properties

Mobile Issues

  • Test Responsive Design: Use browser developer tools to test different screen sizes
  • Check Touch Targets: Ensure buttons are large enough for mobile use
  • Verify Font Sizes: Make sure text is readable on small screens

Browser Compatibility

  • Check Can I Use: Verify CSS property support across browsers
  • Add Fallbacks: Provide alternative styles for unsupported properties
  • Test Across Browsers: Don’t rely on just one browser for testing

Advanced Customization Techniques

CSS Grid and Flexbox

css
/ Advanced layout with CSS Grid /
#chatbot-messages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
/ Flex-based message alignment /
.message-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.user-message-wrapper {
    justify-content: flex-end;
}

CSS Transforms and Transitions

css
/ Smooth animations /
.pre-made-question {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pre-made-question:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/ Micro-interactions /
#chatbot-send {
    transition: transform 0.1s ease-out;
}
#chatbot-send:active {
    transform: scale(0.95);
}

Custom Scrollbars

css
/ Webkit-based browsers /
#chatbot-messages::-webkit-scrollbar {
    width: 6px;
}
#chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}
#chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
#chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

Compatibility Notes

  • Theme CSS Conflicts: Some themes may have conflicting styles
  • Color Scheme Integration: Match your theme’s color palette
  • Typography Consistency: Use fonts that complement your theme
  • Responsive Breakpoints: Align with your theme’s responsive design

Theme-Specific Adjustments

Different themes may require specific CSS adjustments. Always test your customizations with your active theme and make adjustments as needed.

Applying Changes

After adding your custom CSS:

  • Save your changes in your chosen method (Customizer, child theme, or plugin)
  • Clear any caching (browser cache, WordPress cache plugins)
  • Test thoroughly across different devices and browsers
  • Monitor performance to ensure your CSS doesn’t impact page load times

Getting Help

If you encounter issues with custom CSS:

  • Check Browser Console: Look for CSS errors in developer tools
  • Validate Your CSS: Use online CSS validators to check syntax
  • Community Support: Reach out to the WordPress or WPiko community
  • Professional Help: Consider hiring a CSS developer for complex customizations

Remember: Custom CSS gives you unlimited control over your chatbot’s appearance, but with great power comes great responsibility. Always test your changes thoroughly and keep backups of your working configurations.

Have a Question?