The Chatbot Widget is how customers interact with your AI Assistant on your Shopify store. You can customize its appearance, messaging, and behavior to fit your brand perfectly.
Follow this guide to set it up and start using it.
π οΈ How to Access the Widget Settings
In your Shopify admin, open the Convi app.
Click Widget in the main navigation.
Youβll see the Chatbot listed as an available widget.
Click Manage to open the customization panel.
π¨ Customization Options
You can fully tailor how the widget looks and what it says. Hereβs a breakdown of each section:
π¨ Widget Style
Control the overall color theme of your chatbot:
Primary Color
Sets the main accent color (e.g., header background, button color).Secondary Color
Sets the secondary elements (e.g., message bubbles, icons).
Choose colors that match your brand to create a seamless experience.
π§ Launcher Position
Decide where the chatbot launcher button appears on your site:
Position
Choose bottom-right or bottom-left corner.Side Spacing
Set how far the launcher is from the edge of the screen horizontally (in pixels).Button Spacing
Adjust the vertical spacing between the launcher and the bottom of the screen (in pixels).
This ensures the button doesnβt cover important elements of your site.
π¬ Welcome Message
Customize the first impression customers see when they open the chat:
Header
The title at the top of the chat window (e.g., Need Help?).Greeting
A friendly message shown before the chat starts (e.g., Hi there!).Introduction
A longer introduction explaining how the assistant can help (e.g., Ask me anything about your order or our products.).Placeholder
Text that appears inside the chat input box before the customer types (e.g., Type your question here...).
π Predefined Inquiries
Set up quick-action buttons for common questions so customers can start faster.
Examples:
Where is my order?
What is your return policy?
Do you offer discounts?
When a customer clicks one of these, the question is automatically sent to the AI.
π¨ Custom CSS
If you want even more control, you can add custom CSS to further style the widget.
For example, you could:
Change font sizes
Adjust padding
Customize hover effects
Tip: This is optional and recommended only if youβre comfortable with CSS.
π’ Enabling the Widget
Once you finish customizing:
At the top of the settings panel, find the Enable Chatbot toggle.
Switch it On.
β Your chatbot will now appear live on your storefront.
β Testing Your Chatbot
After enabling the widget:
Visit your storefront and refresh the page.
Click the chat launcher to confirm your greeting and styling appear correctly.
Test sending a few sample questions to check AI replies.
π§ Best Practices
β
Keep your welcome message clear so customers know what the bot can help with.
β
Use contrasting colors for visibility while matching your brand.
β
Add predefined inquiries for your top support topics.
β
Test on desktop and mobile to confirm placement looks good on all devices.