Note: Some customization, configuration, or features may be limited on free or lower-tier plans. If you encounter any plan-based restrictions, consider upgrading to unlock the full potential of Convi. Please note that permissions and feature availability may change from time to time based on market research and product improvements.
🛠️ Setting Up the Chatbot Widget
The Chatbot Widget is how customers interact with your AI Assistant on your Shopify store. You can customize its appearance, messaging, and behavior to match 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.
Go to Settings → Widget → Manage.
Here, you’ll find the Chatbot Widget 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). Choose a color that matches 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.
💬 Content
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.
📝 Pre-chat Survey
To collect important customer details right at the start of the chat, you can set up a Pre-chat Survey. This will ask customers for their name and email before they begin the conversation. You can choose whether to make these fields optional or required.
How it works:
When the customer starts a new chat, they will be prompted to enter their name and email.
You can configure whether these fields are optional or required.
This is useful for building your customer database and ensuring that your AI has the necessary contact information for follow-ups.
🎨 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.