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: At the end of this page you can find the technical considerations and troubleshooting.
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!
Technical Considerations & Troubleshooting
Technical Considerations & Troubleshooting
🔒 Website Security Settings (CSP)
Your website needs access to the domain *.storage.googleapis.com to load certain scripts and images (e.g. buttons or icons).
Required action: Ask your developers to update your CSP to include:
script-src: *.storage.googleapis.com img-src: *.storage.googleapis.com
🍪 Cookie Consent Settings
The bubble is only displayed when statistics cookies are accepted by the visitor.
Important note: If all cookies are blocked or rejected by the user, the bubble will not appear.
🏪 Custom Storefront
Create only one Custom Storefront even if you manage multiple stores
Use a single satellite snippet from it for all your stores
Add all store URLs in: Settings → Integrations → Custom Storefront → Advanced CORS Settings
🎨 Advanced Targeting
Page-specific targeting:
Use asterisk (*) for wildcards (e.g.,
hello-charles.com/*)Add specific pages with Add new Page and enter the path
Note: You can include pages but cannot exclude specific pages from a wildcard
📊 Priority Management
When multiple bubbles target the same page, only the highest priority bubble will display.
How ordering works:
If you have multiple enabled bubbles on the same page, the system uses simple priority ordering:
Example scenario:
Bubble A: targets
example.comBubble B: targets
example.com/products/Bubble C: targets
example.com/products/fashion/
If a user visits example.com/products/fashion/t-shirts, all 3 bubbles are valid, but only Bubble A (highest priority) will display.
💡 Tip: Order your bubbles from most general to most specific for best results.
🔧 Troubleshooting
Bubble not appearing?
Check these common issues:
Cookie consent: Are statistics cookies accepted?
CSP settings: Is
*.storage.googleapis.comwhitelisted?Page targeting: Does the current page match your targeting rules?
Priority conflicts: Is another bubble taking priority?
Custom storefront: Are all URLs included in CORS settings?
Performance issues?
Reduce image file sizes
Simplify animations
Check network connectivity
Styling problems?
Verify CSS conflicts with your theme
Test on different devices and browsers
Check z-index conflicts