Widget Customization

Widget Customization

Accessing Widget Settings

Go to Messenger > Settings > Widget to customize your chat widget's appearance and behavior.

Colors & Theme

• Primary Color — The main color of the widget button and header (e.g., `#2563eb`)
• Text Color — Automatically adjusted for contrast
• The widget supports both light and dark backgrounds

Set via dashboard or the embed code attribute:

data-color="#2563eb"

Position

Choose where the widget appears on your site:

• Bottom Right (default) — `data-position="bottom-right"`
• Bottom Left — `data-position="bottom-left"`

Greeting Message

The first message visitors see when opening the widget:

data-greeting="Hi! How can we help you today?"

Set a greeting that matches your brand voice. Keep it short and friendly.

Company Name & Persona

• Company Name — Shown in the widget header
• Agent Name — The AI agent's display name (e.g., "Aini")
• Agent Avatar — Upload a custom avatar for the AI

Conversation Starters

Pre-defined buttons visitors can click to start common topics:

1. Go to Widget Settings > Conversation Starters
2. Add up to 4 starter prompts, e.g.:

- "What are your pricing plans?"

- "How do I get started?"

- "I need help with my account"

1. Each starter maps to a pre-written AI response flow

Pre-Chat Form

Collect visitor information before the conversation starts:

1. Enable Pre-Chat Form in widget settings
2. Configure fields:

- Name (required/optional)

- Email (required/optional)

- Phone (optional)

- Custom field (e.g., company name, order number)

1. Form data is attached to the conversation in the inbox

Mobile Optimization

The widget automatically adapts to mobile screens:

• Full-screen chat on small viewports
• Touch-friendly buttons and inputs
• Respects safe area on notched devices