Skip to main content

βœ… Setting Up the Chatbot Widget

Shawn avatar
Written by Shawn
Updated over 3 weeks ago

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

  1. In your Shopify admin, open the Convi app.

  2. Click Widget in the main navigation.

  3. You’ll see the Chatbot listed as an available widget.

  4. 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:

  1. At the top of the settings panel, find the Enable Chatbot toggle.

  2. 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.

Did this answer your question?