Your chat widget is the face of your AI assistant and a key interaction point on your Shopify store. Customizing its appearance to match your brand's look and feel creates a seamless, trustworthy experience for your customers. This guide will walk you through all the available options to make the widget truly yours.
To start customizing your widget, navigate to Settings → Widgets from your Convi panel and click the Manage button on the "Bubble widget chatbot" card.
Widget Style
This section allows you to customize your brand's colors, logos, and icons to ensure the widget feels like a native part of your store.
ℹ️ Note: As you make changes, a live preview of the widget will update in real-time on the right side of the screen, allowing you to see your customizations instantly. |
Primary Color: Set the main color for the widget's header and buttons. You can use the color picker or enter a specific hex code (e.g., #4e44e5) to perfectly match your brand palette.
Bubble Icon Size: Choose the size of the chat bubble icon that appears on your storefront. Options are Small, Medium (default), and Large.
Bubble Logo: Upload a custom icon to be displayed inside the chat bubble.
Avatar Logo: Upload a logo or image to be used as the AI assistant's avatar within the chat conversation.
Show "powered by" trademark: You can choose to show or hide the "Powered by Convi" branding in the widget.
Launcher Position
Control where the chat widget launcher appears on your storefront for both desktop and mobile visitors.
Position: Choose whether the launcher appears on the Left or Right (default) side of the screen.
Side Spacing: Adjust the horizontal distance from the edge of the screen. The default is 20px.
Bottom Spacing: Adjust the vertical distance from the bottom of the screen. The default is 20px.
Advanced Customization
For those who need more granular control, Convi offers advanced options to fine-tune the widget's appearance.
⚠️ Important: The Custom CSS feature is intended for users comfortable with web development. Incorrect CSS can break the widget's appearance or functionality. |
Custom CSS: Add your own CSS rules to override the default widget styles. This allows for nearly unlimited customization, from changing fonts to adjusting the size and shape of specific elements.
Related Articles