Customize the chat widget to match your brand
The instructions below are for desktops and laptops only.
How to Customize Your AI Chat Widget
1. Accessing Chat Widget Settings
- Once you’ve created and trained your AI, click on "Customize" to open the chat widget settings.
- On the right, you’ll see a preview of the widget, and you can toggle between different AIs to view their default color schemes.
2. Adjusting Widget Colors
- To match the widget colors to your brand, use the color customization options provided.
- You can manually select colors or use the eyedropper tool for precision.
3. Using the Eyedropper Tool for Brand Consistency
- Drag your logo or website into view and use the eyedropper tool to select specific colors from your logo or website design.
- For example, set the header and AI message colors to match your logo and use a complementary color from your website’s navigation bar for user messages.
4. Ensuring Brand Consistency
- Adjust the colors so the chat widget seamlessly integrates with your website design, creating a cohesive brand experience.
5. Saving and Previewing Changes
- Once satisfied, save your changes and preview how the widget looks on your website.
This approach ensures your chat widget reflects your brand identity, enhancing professionalism and user experience.
1. Accessing Chat Widget Settings
- Once you’ve created and trained your AI, click on "Customize" to open the chat widget settings.
- On the right, you’ll see a preview of the widget, and you can toggle between different AIs to view their default color schemes.
2. Adjusting Widget Colors
- To match the widget colors to your brand, use the color customization options provided.
- You can manually select colors or use the eyedropper tool for precision.
3. Using the Eyedropper Tool for Brand Consistency
- Drag your logo or website into view and use the eyedropper tool to select specific colors from your logo or website design.
- For example, set the header and AI message colors to match your logo and use a complementary color from your website’s navigation bar for user messages.
4. Ensuring Brand Consistency
- Adjust the colors so the chat widget seamlessly integrates with your website design, creating a cohesive brand experience.
5. Saving and Previewing Changes
- Once satisfied, save your changes and preview how the widget looks on your website.
This approach ensures your chat widget reflects your brand identity, enhancing professionalism and user experience.