Custom CSS Options

Introduction

The Custom CSS Options feature in WPiko AI Chatbot provides advanced users with the ability to fine-tune the chatbot’s appearance beyond the standard styling options. This feature allows you to add custom CSS rules, giving you precise control over the chatbot’s look and feel.

Accessing Custom CSS Settings

1. Log in to your WordPress dashboard.
2. Navigate to WPiko AI Chatbot > Custom CSS.

Using the Custom CSS Editor

1. You’ll see a large text area labeled “Custom CSS”.
2. In this area, you can enter your custom CSS rules.
3. The CSS you enter here will be applied to the chatbot on the front-end of your website.

Best Practices for Custom CSS

1. Specificity: Use specific selectors to ensure your styles are applied correctly.
2. Testing: Always test your CSS changes on various devices and browsers.
3. Backup: Keep a backup of your custom CSS in case you need to revert changes.
4. Comments: Use CSS comments to organize and explain your custom styles.

Key Selectors for Customization

Here are some important selectors you can use to target specific parts of the chatbot:

/* Main chatbot container */
#wpiko-chatbot-container { }

/* Chatbot header */
#chatbot-header { }

/* Chatbot messages area */
#chatbot-messages { }

/* User message bubbles */
.user-message { }

/* Bot message bubbles */
.bot-message { }

/* Input area */
#chatbot-input-container { }

/* Send button */
#chatbot-send { }

/* Pre-made questions area */
#pre-made-questions { }

/* Floating chatbot icon */
#wpiko-chatbot-floating-icon { }

Example Custom CSS Snippets

Here are some examples of custom CSS you might want to use:

1. Rounded corners for message bubbles:

.user-message, .bot-message {
    border-radius: 20px;
}

2. Custom font for chatbot text:

#wpiko-chatbot-container {
    font-family: 'Arial', sans-serif;
}

3. Gradient background for the header:

#chatbot-header {
    background: linear-gradient(to right, #e1e8ed, #2196F3);
}

4. Hover effect for the send button:

#chatbot-send:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

5. Custom scrollbar for the messages area:

#chatbot-messages::-webkit-scrollbar {
    width: 10px;
}
#chatbot-messages::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

Advanced Customization Tips

1. Media Queries: Use media queries to apply different styles on various screen sizes.

   @media (max-width: 768px) {
       #wpiko-chatbot-container {
           /* Mobile-specific styles */
       }
   }

2. CSS Variables: Utilize CSS variables for easy theme changes.

   :root {
       --chatbot-primary-color: #00C7FC;
   }
   #chatbot-header {
       background-color: var(--chatbot-primary-color);
   }

3. Animations: Add subtle animations to enhance user experience.

   .bot-message {
       animation: fadeIn 0.5s ease;
   }
   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }

Troubleshooting Custom CSS

If your custom CSS isn’t working as expected:

1. Check for syntax errors in your CSS code.
2. Ensure your selectors are specific enough and correctly target the desired elements.
3. Use browser developer tools to inspect elements and debug your CSS.
4. Clear your browser cache to ensure you’re seeing the latest changes.

Saving Your Custom CSS

After entering your custom CSS:

1. Click the “Save Custom CSS” button at the bottom of the page.
2. Refresh your website to see the changes in action.

Reverting Changes

If you need to remove all custom CSS:

1. Delete all content from the Custom CSS text area.
2. Save the empty custom CSS.

Remember, custom CSS is a powerful tool, but it should be used judiciously. Always prioritize the user experience and ensure that your customizations enhance, rather than detract from, the chatbot’s functionality.