Deploy Your Chat Widget
Install Chatlo's AI-powered chat widget on your website in minutes. Engage visitors with intelligent conversations and provide instant customer support.
Performance Optimized
Asynchronous Loading
Chatlo widgets load asynchronously, so they will not slow down your page
Mobile Optimization
Widgets automatically adapt to mobile screens with touch-friendly interfaces
SEO Friendly
Installation doesn't affect your SEO rankings or page load speed scores
Lightweight Code
Minimal code footprint ensures fast loading and optimal performance
Complete Installation Guide
Navigate to Agent Deploy Section
Access the deployment settings for your AI agent.
From your Chatlo dashboard, go to your agent's settings and click on the 'Deploy' or 'Installation' tab. This section contains all deployment options for your AI agent.
Select Chat Widget Option
Choose the website chat widget deployment method.
Click on 'Chat Widget' from the available deployment options. This will open the widget configuration interface where you can customize appearance and behavior.
Customize Widget Appearance
Design your widget to match your website's branding and style.
Configure colors, position, size, welcome messages, and chat bubble design. Upload your logo, select brand colors, and write engaging welcome text that represents your company voice.
Configure Widget Behavior
Set up how and when your widget appears to visitors.
Choose trigger conditions (time on page, scroll percentage, exit intent), set business hours, configure offline messages, and define user targeting rules based on page URLs or visitor behavior.
Generate Installation Code
Get the JavaScript code snippet for your website.
Click 'Generate Code' to create a unique JavaScript snippet. This code includes your agent ID, configuration settings, and loads the Chatlo widget asynchronously for optimal performance.
Install on Your Website
Add the code to your website's HTML.
Copy the generated code and paste it into your website's HTML, preferably just before the closing </body> tag. The code works with any website platform including WordPress, Shopify, custom sites, and more.
Test the Installation
Verify that your widget is working correctly.
Visit your website in a new browser window to see the chat widget in action. Test the welcome message, ask sample questions, and ensure the agent responds appropriately to customer inquiries.
Monitor and Optimize
Track performance and make improvements.
Use Chatlo analytics to monitor conversation volume, response accuracy, and customer satisfaction. Make adjustments to your knowledge base, conversation flows, and widget settings based on real usage data.
Customization Options
Appearance
- Chat bubble color and position
- Welcome message text and timing
- Agent avatar and company logo
- Font family and text size
- Border radius and shadow effects
Behavior
- Auto-open on page load or user interaction
- Business hours and offline messaging
- Page-specific targeting rules
- Exit intent detection
- Mobile vs desktop behavior
Content
- Welcome greeting and conversation starters
- Quick reply buttons and suggested questions
- Offline message and contact alternatives
- Privacy policy and terms links
- Custom CSS for advanced styling
Platform-Specific Instructions
WordPress
- 1Install a header/footer plugin or access theme files
- 2Paste code in footer section before </body> tag
- 3Clear cache and test the widget
- 4Consider using a plugin for easier management
Shopify
- 1Go to Online Store > Themes > Edit Code
- 2Find theme.liquid file in Layout folder
- 3Paste code before closing </body> tag
- 4Save and preview your store
Custom HTML
- 1Open your website's HTML files
- 2Locate the closing </body> tag
- 3Paste the Chatlo code just before it
- 4Upload updated files to your server
Wix
- 1Go to Settings > Tracking & Analytics
- 2Click 'New Tool' and select 'Custom'
- 3Paste code and set to load on all pages
- 4Place in body-end position
Testing Checklist
Before going live, ensure your widget is working correctly:
Next Steps
After successfully installing your chat widget, here's how to maximize its effectiveness:
Ready to Install Your Widget?
Follow this guide to get your AI-powered chat widget running on your website in minutes.