🎯 Overview
Chat-in bubbles are interactive elements that appear on your website to capture visitor attention and encourage them to start a WhatsApp conversation. They can be configured to appear on specific pages, at precise moments, and with custom branding.
Benefits of bubbles:
✅ Increase visitor engagement
✅ Drive conversion to WhatsApp
✅ Fully customizable to match your brand
✅ Precise targeting by page
⚠️ Important: Check this page BEFORE configuring your bubble to avoid display issues.
🚀 Quick Setup
Follow these 5 essential steps to create your first functional bubble:
1. Configure the bubble
1. Go to Automations > Chat-in bubbles
2. Select Add new bubble and go to the Teaser Message tab
3. Update the teaser message
4. Update the text color and the color of the background
5. Determine when the message will appear by updating Open teaser message after [x] seconds
6. Determine how long it appears for by updating Teaser message duration [x] seconds
7. Check the preview and apply changes if needed.
The teaser message will draw attention to the bubble, make it appealing!
Step 2: Configure basic appearance
Appearance tab:
8. Upload your logo (or another brand element) as the bubble image
9. Adjust the background color & set the bubble size and position on the page
💡 The preview on the right is real-time so you can see exactly how it'll be displayed!
Step 3: Set up main content
Content tab:
10. Write your bubble text (keep it short and simple)
11. Customize the call-to-action (CTA) button
12. Enter your WhatsApp business number (assigned to this Charles instance)
13. Add the Chat-in message (pre-filled in WhatsApp when clicked)
Step 4: Target your pages
Target tab:
14. Choose devices: mobile, desktop, or both
15. Define pages: all pages or specific ones
16. Configure visibility hours: all times or office hours only
Step 5: Save and activate
Select Save Changes
Your bubble is now live!
🎯 Optimization & Best Practices
Content Best Practices
✅ Keep bubble text short and compelling
✅ Use clear, action-oriented CTA buttons
✅ Test different timings for teaser messages
✅ Match your brand colors and style
Targeting Best Practices
✅ Start with broad targeting, then refine based on performance
✅ Consider different messages for mobile vs desktop
✅ Use office hours setting for B2B businesses
✅ Test different positions
Technical Best Practices
✅ Ensure CSP settings are configured before launch
✅ Test with different cookie consent scenarios
✅ Monitor bubble performance and adjust accordingly
🎨 Inspiration & Examples
Need inspiration? Check out what our clients are doing: Bubble inspiration
