Widget Customization

Customize the appearance and behavior of your chatbot to match your brand identity. All changes are reflected automatically on the widget without any code changes.

✅ All design changes are instantly reflected on the widget embedded in your site. No code changes needed!

Enterprise Design Studio

The Agent Design studio provides a professional 3-zone interface: a tabbed settings panel, a live interactive preview, and quick tools. Every change appears instantly in the preview before you save.

Theme presets: pick from eight ready-made themes (Midnight, Ocean, Emerald, Sunset, Royal, Graphite, Rose, or Custom) plus light/dark mode.
Pro preview: toggle desktop/mobile, light/dark, and different chat states to test the design thoroughly.
WCAG contrast checker: automatically verifies text colors are readable over backgrounds and warns you when contrast is too low.
Import/Export: save your design as a JSON file or import it to reuse the same identity across multiple bots.
Reset to defaults: the "Reset" button restores all design settings to Searj defaults in one click, without affecting your bot content or conversations.

🔒 Agent Designer customization (colors, logo, fonts, and saving your design) is available on paid plans. On the Free plan you can preview the controls, but the Save button is disabled with an upgrade prompt. Existing bots keep their appearance through backward-compatible defaults.

Chat Launcher

Full control over the floating chat button that appears on your site:

Position: bottom-right or bottom-left
Size: from 44 to 84 pixels
Default: a circular 55×55px button positioned 16px from the viewport edge
Optional text inside the launcher beside its icon or image (e.g., "Need help?")
Gradient fill, a chosen icon, or an uploaded image

Chat Header

Fully customize the chat window header:

Desktop: 406px wide, responsive height up to 824px, with a 20px default radius
Mobile: a true edge-to-edge full-screen window without side gaps for easier typing and keyboard handling
When the mobile keyboard opens, the full-height window moves upward with it instead of shrinking, then returns when the keyboard closes
The overflow menu (…) beside Close contains New Chat, Chat History, End Chat, and language switching
End-chat confirmation appears as a centered overlay without shifting the conversation content
A subtitle line below the bot name
A clear 16px bot title with an optional subtitle
Avatar shape: circle, rounded, or square
Header avatar: upload an image or choose a built-in icon
Header gradient fill

Typography, Messages & Proactive Greeting

Font size: 12 to 18 pixels
Default messages: 16px type with 24px line height and 12×16px bubble padding
Composer: 51px high with a 24px radius and circular 32×32px microphone and send controls
Bubble shadow: none, soft, or medium
Message spacing: compact, cozy, or spacious
Background pattern: none, dots, or grid
Proactive greeting bubble: appears automatically after a set delay (0–30 seconds) with a custom message to invite the visitor to chat.

Primary Color

The primary color is used for the chat window header, send button, and the floating chat button. Choose a color that matches your brand colors.

Go to Agent Design

From the bot page, open the "Agent Design" tab.

Choose the color

Use the color picker or enter a hex color code (e.g., #D4A853).

Save changes

The widget will update automatically.

💡 Tip: Choose a color dark enough so that white text remains readable on it.

Welcome Message

The welcome message is the first message shown to the customer when they open the chat window. Make it friendly and helpful.

Examples of effective welcome messages:

"Hello! 👋 How can I help you today?"
"Welcome to [Company Name]! Ask me anything about our services."
"Hi! I'm your AI assistant. I can help with orders, pricing, or any other questions."

Bubble Message

The bubble message is the short text that appears next to the floating chat button to attract visitor attention. It appears as a small text tooltip above the button.

Examples:

"💬 Need help?"
"👋 Ask me!"
"🤖 Your AI assistant is here"

Bubble Icon

You can customize the floating chat button icon. You can use the default icon or upload a custom icon that represents your brand.

Default icon: chat bubble
You can upload a custom image (PNG or SVG)
Recommended size: 48×48 pixels

Language

You can choose the widget interface language. This affects UI text like "Type your message...", "Send", and other interface elements.

Language	Direction	Note
Arabic	Right-to-Left (RTL)	Default setting
English	Left-to-Right (LTR)	For English websites

RTL Support

The widget fully and automatically supports Right-to-Left (RTL) direction. When Arabic is selected, all elements are automatically adjusted:

Text alignment from the right
Message bubbles appear in the correct direction
Input field supports Arabic typing
Arabic fonts optimized for readability

How to Update Design

Go to Agent Design

From the dashboard, open the bot and navigate to Agent Design.

Modify the desired design

Change colors, icon, logo, or visual style as you wish.

Save changes

Click "Save" and changes will be instantly reflected on the widget on your site.

💡 You don't need to modify the embed code on your site when changing design. The widget automatically reads the new design from the server.

Customization Examples

Here are some customization examples for different business types:

🏪 Online Store

Setting	Value
Primary Color	#2563EB (Blue)
Welcome Message	"Hello! 🛍️ How can I help you shop?"
Bubble Message	"💬 Ask about products"
Language	Arabic

🏢 Service Company

Setting	Value
Primary Color	#0F172A (Slate-900)
Welcome Message	"Welcome! I'm your AI assistant. Ask me about our services."
Bubble Message	"🤖 Your AI assistant"
Language	Arabic

🍕 Restaurant

Setting	Value
Primary Color	#DC2626 (Red)
Welcome Message	"Hi! 🍽️ Want to know about the menu or place an order?"
Bubble Message	"🍕 What would you like to eat?"
Language	Arabic

⚠️ When changing the language, make sure to also update the welcome message and bubble message to match the new language.