Introduction
Welcome to the comprehensive guide on customizing the appearance of your AI-powered chatbot widget using the new Widget Icon Picker and Appearance Tab features. These enhancements allow you to personalize your chatbot's presence on your website or application, ensuring it aligns with your brand's aesthetics. Whether you want to select a pre-designed icon or upload a custom avatar, and fine-tune the widget's styling, this guide will walk you through everything you need to know.
Prerequisites
Before you begin customizing your widget, ensure that you have:
How It Works
The Widget Icon Picker allows you to select an avatar for your chatbot from over 20 pre-designed options or upload your own image to better represent your brand. The Appearance Tab offers a range of styling options including color customization, border radius adjustments, positioning, and the ability to input custom CSS. These features ensure that both regular and platform bots have identical styling capabilities, giving you full control over the visual presentation of your chatbot.
Step-by-Step Guide
Follow these steps to customize your chatbot widget:
- Navigate to the AI Chat For Business platform and log in with your credentials.
- Go to the Bot Configuration section from the main menu.
- Click on the Appearance tab within the bot configuration page.
- Use the Widget Icon Picker to choose an icon from the available options or upload your custom avatar by clicking the Upload button.
- Adjust the colors, border radius, and position using the available options.
- For advanced styling, enter your custom CSS in the provided field.
- After customizing, click Save to apply the changes to your widget.
Configuration Options
Best Practices
Troubleshooting
Related Articles
By following this guide, you can effectively customize your chatbot widget to create a seamless and visually appealing customer service experience. For further assistance, refer to our support team.
Welcome to the comprehensive guide on customizing the appearance of your AI-powered chatbot widget using the new Widget Icon Picker and Appearance Tab features. These enhancements allow you to personalize your chatbot's presence on your website or application, ensuring it aligns with your brand's aesthetics. Whether you want to select a pre-designed icon or upload a custom avatar, and fine-tune the widget's styling, this guide will walk you through everything you need to know.
Prerequisites
Before you begin customizing your widget, ensure that you have:
- Access to the AI Chat For Business platform with appropriate permissions to configure bots.
- An active subscription on any plan — Starter, Growth, or Professional.
- A basic understanding of CSS if you plan to apply custom styles.
How It Works
The Widget Icon Picker allows you to select an avatar for your chatbot from over 20 pre-designed options or upload your own image to better represent your brand. The Appearance Tab offers a range of styling options including color customization, border radius adjustments, positioning, and the ability to input custom CSS. These features ensure that both regular and platform bots have identical styling capabilities, giving you full control over the visual presentation of your chatbot.
Step-by-Step Guide
Follow these steps to customize your chatbot widget:
- Log in to your Dashboard
- Navigate to the AI Chat For Business platform and log in with your credentials.
- Access Bot Configuration
- Go to the Bot Configuration section from the main menu.
- Open Appearance Tab
- Click on the Appearance tab within the bot configuration page.
- Select Widget Icon
- Use the Widget Icon Picker to choose an icon from the available options or upload your custom avatar by clicking the Upload button.
- Customize Widget Style
- Adjust the colors, border radius, and position using the available options.
- For advanced styling, enter your custom CSS in the provided field.
- Save Changes
- After customizing, click Save to apply the changes to your widget.
Configuration Options
- Icon Selection: Choose from 20+ icons or upload a custom avatar.
- Color Customization: Modify the primary and secondary colors of your widget.
- Border Radius: Adjust the curvature of the widget corners to match your site’s design.
- Positioning: Set the widget’s position on the page (e.g., bottom right, bottom left).
- Custom CSS: Enter custom CSS for unique styling needs, such as special fonts or animations.
Best Practices
- Consistent Branding: Ensure that the widget’s appearance aligns with your overall brand identity. Use colors and icons that reflect your brand’s theme.
- Responsive Design: Test the widget on various devices to ensure it displays correctly across different screen sizes.
- Simple Interface: Avoid overly complex custom CSS that might affect the widget’s performance or readability.
Troubleshooting
- Icon Upload Issues: Ensure that the uploaded image is in a supported format (JPEG, PNG) and within the size limit.
- CSS Errors: If custom CSS is not applying correctly, validate your CSS code for errors.
- Appearance Not Updating: Clear your browser cache or try refreshing the page if changes do not appear immediately.
Related Articles
By following this guide, you can effectively customize your chatbot widget to create a seamless and visually appealing customer service experience. For further assistance, refer to our support team.