Web Widget Configuration

​

🎛️ Overview of Your Widgets

• 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)

​

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 🪝)

• 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 📝

• 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 🤓)

• 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

• 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.

​

🎨 Custom CSS — The Designer’s Guide

​

⚙️ How it works under the hood

1. Your CSS is saved alongside the widget configuration.
2. When the widget loads on the visitor’s website, your CSS is injected as a <style> tag inside the widget itself.
3. It loads after our default styles, so your rules have the final say (they win ties).

🎯 Important — Scope: Custom CSS only affects the inside of the widget chat, not the rest of your web page. You can’t use it to restyle your site; only the widget. And vice versa: your site’s styles don’t leak into the widget, so you start from a clean canvas.

💪 My rule isn’t applying? Because our base styles are specific, sometimes your rule “ties” and doesn’t win. If a change has no effect, add !important to the end of the property (e.g. border-radius: 0 !important;) or use a more specific selector.

​

🧩 Selectors you can use

​

💡 Practical examples

.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}

.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}

.widget_chat_window_footer {
  padding: 14px !important;
}

🧪 Always test it in the Playground (see below) before publishing. A forgotten } can break several styles at once.

​

🧪 Test Drive (Playground)

• Does the colour clash?
• Is the Agent being polite?
• Does the form work?