Introduction
The Chatbot Style tab in WPiko AI Chatbot offers options to customize your chatbot’s appearance. You can adjust elements like the chatbot name, image, colors, and layout to match your website’s design and brand, creating a seamless and engaging user experience.
Accessing Chatbot Styling Settings
- Log in to your WordPress dashboard.
- Navigate to WPiko AI Chatbot > Chatbot Style.
Basic Style Settings
Chatbot Identity
- Chatbot Display Name
- Enter the name you want to display for your chatbot.
- This name will appear in the chatbot header.
- Chatbot Image
- Upload or enter the URL of the image for your chatbot.
- Click “Upload Image” to select an image from your media library or upload a new one.
- Recommended size: 50×50 pixels (the image will be displayed as a circle).
- Welcome Message
- Enter a brief welcome message for your chatbot.
- This message will be displayed when the chat is first opened.
- Leave empty to hide the welcome message.
- Input Placeholder
- Enter the placeholder text for the chat input field.
- Default: “Type your message…”
Color Scheme
- Primary Color
- Choose the primary color for the chatbot interface.
- This color is used for the send button and other accent elements.
- Primary Text Color
- Select the text color to be used with the primary color background.
Advanced Style Options
To access advanced styling options:
- Click the “Show Advanced Options” button at the bottom of the basic settings.
Chatbot Container
- Chatbot Background Color
- Set the background color for the entire chatbot container.
- Chatbot Header Color
- Set the color for the chatbot header.
- Chatbot Border Color
- Choose the color for the chatbot’s border.
- Chatbot Name Color
- Select the color for the chatbot’s name in the header.
Message Styling
- User Background Color
- Set the background color for user message bubbles.
- User Text Color
- Choose the text color for user messages.
- Bot Background Color
- Set the background color for bot-message bubbles.
- Bot Text Color
- Choose the text color for bot messages.
Additional Elements
- Icon Color
- Select the color for icons in the chatbot interface.
- Input Background Color
- Set the background color for the message input area.
Best Practices for Chatbot Styling
- Brand Consistency: Choose colors that align with your website’s color scheme and branding.
- Readability: Ensure there’s sufficient contrast between text and background colors for easy reading.
- Distinct User and Bot Messages: Use different colors for user and bot messages to clearly distinguish between them.
- Subtle Backgrounds: Opt for softer background colors to keep the focus on the conversation.
- Professional Image: Choose a professional and friendly chatbot image that represents your brand.
- Concise Welcome Message: Keep the welcome message brief and inviting.
- Test on Multiple Devices: Preview your styling on various devices to ensure it looks good across all screen sizes.
Applying Changes
After making your style adjustments:
- Click the “Save Style Settings” button at the bottom of the page.
- Refresh your website to see the changes in action.
Resetting Advanced Options
If you want to revert the advanced styling options to their default values:
- Click the “Reset Advanced Options” button.
- Confirm the action in the popup dialog.
Troubleshooting
If styles are not applying correctly:
- Clear your browser cache and refresh the page.
- Check for any custom CSS that might be overriding the chatbot styles.
- Ensure you’ve saved your changes after making adjustments.
- Verify that the changes are visible in an incognito/private browsing window.
By carefully customizing your chatbot’s style, you can create a seamless and engaging user experience that complements your website’s design. Remember, the goal is to make the chatbot feel like an integral part of your site, enhancing user interaction and brand consistency.
