Chatbot

View All Docs
+

Getting Started (3)

+

Ai Configuration (6)

+

Woocommerce Integration (5)

+

Chatbot Implementation (3)

−

Customization (2)

+

Conversation Management (2)

+

Chatbot Menu Settings (4)

+

Security And Privacy (4)

Custom CSS

Reading Time: 8 minutes

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 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.