🎛️ Overview of Your Widgets
This is your widget command centre. Here you can see every chat bubble you’ve created.- Why have more than one? You might want a “Sales Bot” for your pricing page and a “Tech Support” bot for your help centre. Here you manage them all.
- Key Actions per Widget:
- 📋 Copy Script: Grab the magic code to paste onto your website.
- ⚙️ Configure: The fun part. Tweak colours, messages, and behaviour (we’ll get to this in a mo).
- 🗑️ Delete: Bin it if you don’t need it.
🎨 Customising Your Widget (The Art Class)
Click on the gear icon ⚙️ to enter the configuration lab. Let’s make this widget truly yours.1. The Basics
- AI Agent: Which brain is powering this chat? Select one of your agents from the list.
- Languages: Does your site speak English, Spanish, and French? Tell the widget so it doesn’t look silly.
2. Floating Message (The Hook 🪝)
Don’t let your bot hide! Set a catchy message that pops up above the icon.- Boring: “Chat here.”
- Better: “Hi there! Need help with your order? 👋”
⚠️ Heads up: Add translations for all your languages. You don’t want Spanish visitors seeing a blank bubble!
3. Look & Feel (Dress to Impress)
- Header: Choose what shows at the top. Just a title? Your logo? An avatar of a robot wearing a monocle? It’s up to you.
- Colours: Use the eyedropper tool 🖊️ to match your brand exactly.
- Main Colour: The message bubbles and send button.
- Text Colour: Make sure it’s readable! Yellow text on a white background is a crime against eyesight.
4. The Gatekeeper: Data Collection Forms 📝
Do you want to know who you’re talking to before they start chatting? Enable the Form.- Ask for Name, Email, or Phone.
- Make fields “Required” if you’re strict, or “Optional” if you’re chill.
- GDPR / Privacy: Add a link to your policy so you stay legal. 👮♂️
5. Smart Data Collection (Advanced 🤓)
This is for the tech wizards. The widget can peek into your website’s data (localStorage) to see if the user is already logged in.
- How it helps: If logged in, the widget can say “Hello, John!” instead of asking for his name again.
- Configuration: You tell us the “Key” (e.g.,
user_email) and we grab the value automatically.
🛠️ Extra Tweaks & Layout
Fine-tune the experience:- Position: Left or Right? (Right is standard, Left is for rebels).
- Full Screen: Want the chat to take over the whole mobile screen? Toggle this ON.
- Embed (DOM Element): Instead of a floating bubble, stick the chat permanently inside a
<div>on your page. Great for “Contact Us” pages. - Custom CSS: If you know code, you can write your own styles here to override ours. The sky’s the limit.
🧪 Test Drive (Playground)
Before you paste the code on your live site, give it a whirl in the Playground.- Does the colour clash?
- Is the Agent being polite?
- Does the form work?