Customize your widget's appearance, behavior, and functionality through the configuration system.
All widget settings are managed through the widget configuration in your dashboard. The configuration includes appearance settings, behavioral options, and content customization.
Think of the configuration as your widget's DNA—it defines everything from colors and fonts to conversation flows and initial messages. The best part? Changes to your configuration take effect immediately without requiring any code changes on your website.
🎨 Live Customization
Use our visual configuration editor in the dashboard to see your changes in real-time. No need to guess how colors will look or how buttons will behave—preview everything before publishing.
Visual appearance is crucial for making the widget feel like a natural part of your website. Our appearance settings give you complete control over every visual aspect.
Choose colors that match your brand identity. All color values should be in hex format (e.g., #FF5733).
Pro tip: Use a color contrast checker tool to ensure your text remains readable against your chosen backgrounds. This is especially important for accessibility compliance.
Size your widget appropriately for your use case and audience. Larger dimensions provide more conversation context, while smaller dimensions feel less intrusive.
Mobile consideration: The widget automatically scales on mobile devices, but test your configuration on various screen sizes to ensure a good experience for all users.
Behavioral settings control how the widget interacts with users and responds to different contexts.
⚠️ Recommendation
Most sites should start with the widget collapsed (<code>start_open: false</code>) to avoid being intrusive. Users who need help will naturally click the button. For dedicated help/support pages, starting open can be beneficial.
The greeting message is the first thing users see when they open the widget. Make it welcoming, clear, and actionable. You can include interactive buttons to guide users to common tasks.
A good greeting message should:
Example: "Hi there! 👋 I'm here to help with questions about our products, pricing, or account. How can I assist you today?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Conversation flows are predefined paths that guide users through common scenarios. They're perfect for FAQs, troubleshooting, or multi-step processes like returns or bookings.
Flows are triggered by specific keywords or button clicks. When triggered, they display a series of responses with optional action buttons, creating a guided conversation experience without requiring AI processing.
Best practices for flows:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Configure text for multiple languages:
Add custom CSS for advanced styling:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Configure external API endpoints for enhanced functionality: