> ## Documentation Index
> Fetch the complete documentation index at: https://docs.insitechat.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Widget Customization — Colors, Personas, RTL, Localization
> Customize your InsiteChat AI chat widget — brand colors, fonts, icon, auto-open triggers, RTL languages, personas, 14-string localization, and white-label branding.
Customize every aspect of the **InsiteChat** chat widget to match your brand and user-experience needs. All customization is done from the **Embed** tab in your chatbot dashboard — brand color, fonts, icon shape, auto-open behavior, [persona](/concepts/system-prompts), language, RTL layout, and white-label watermark removal (on Growth+ plans).
## Appearance
| Setting | Description |
| --------------------- | --------------------------------------------------------------------------------------------- |
| **Brand color** | Primary color for the header, user bubbles, and send button. 9 presets or custom hex. |
| **Text color** | Color of text on colored backgrounds (header, user messages, send button). Default: white. |
| **Font size** | Base font size for the widget. Range: 12–20px. Default: 14px. |
| **Display name** | Name shown in the chat header. |
| **Greeting message** | First message visitors see. Supports markdown (bold, bullets, links). |
| **Input placeholder** | Placeholder text in the message input field. |
| **Chat icon / logo** | Upload a custom image (PNG, JPG, WebP, SVG, max 2MB) to replace the default chat bubble icon. |
## Position & icon
| Setting | Description |
| ------------------- | ------------------------------------------------------------------- |
| **Widget position** | Bottom-left or bottom-right of the page. |
| **Icon size** | Choose from S (40px), M (48px), L (56px), XL (64px), or 2XL (72px). |
| **Bottom distance** | Pixels from the bottom edge of the screen. |
| **Side distance** | Pixels from the left or right edge. |
## Auto-open
Automatically open the chat widget after a configurable delay.
| Setting | Description |
| --------------------- | --------------------------------------------- |
| **Desktop auto-open** | Toggle on/off with delay in seconds (0–60). |
| **Mobile auto-open** | Separate toggle and delay for mobile devices. |
Auto-open triggers once per browser session (uses `sessionStorage`). Visitors who manually close the widget won't see it auto-open again until they start a new session.
## Chat modes
| Mode | Behavior |
| ---------- | ------------------------------------------------------------------------------ |
| **AI** | Fully automated AI responses. Escalation button appears after 2 messages. |
| **Agent** | All messages routed to human agents via webhook. AI returns a waiting message. |
| **Hybrid** | AI responds, but "Talk to a human" button is always visible. |
## Personas
Define your chatbot's personality:
* **Default** — Neutral, helpful tone
* **Friendly** — Warm, welcoming, empathetic
* **Professional** — Formal, precise, business-appropriate
* **Casual** — Relaxed, conversational, approachable
* **Inspirational** — Enthusiastic, motivational, uplifting
* **Custom** — Write your own personality description
## RTL mode
Enable right-to-left text direction for Arabic, Hebrew, Urdu, and other RTL languages. When enabled, the entire widget layout flips — text alignment, message bubbles, and input direction all adjust automatically.
## Localization
Customize all 14 UI text strings for any language:
| String | Default | Purpose |
| ------------------ | ------------------------------------- | --------------------- |
| Status text | "Online" | Shown in the header |
| Input placeholder | "Type a message..." | Message input field |
| Escalation button | "Talk to a human" | Human handoff |
| Lead form title | "Want us to follow up?" | Lead form header |
| Lead form subtitle | "Leave your details..." | Lead form description |
| Name field | "Name" | Lead form |
| Email field | "Email \*" | Lead form |
| Phone field | "Phone" | Lead form |
| Submit button | "Submit" | Lead form |
| Submitting text | "Sending..." | Submit in progress |
| Success message | "Thanks! We'll be in touch." | After lead submit |
| Escalation success | "Sent! The team will follow up soon." | After escalation |
| Error message | "Sorry, something went wrong." | Generic error |
| Branding prefix | "Powered by" | Watermark |
## Quick prompts (starter questions & links)
Add up to **5 starter items** that appear as clickable buttons before the visitor sends their first message. Each item is one of two types:
* **Question** — clicking sends the text as a message to your chatbot.
* **Link** — clicking opens a URL in a new tab (great for pricing pages, demo bookings, or your contact form).
These reduce the "blank page" problem and guide visitors toward what matters most.
Select your chatbot and open the **Embed** tab, then switch to the **Content** sub-tab.
Scroll to **Starter Questions & Links**.
Choose **Question** or **Link** at the top of the editor.
For a question, type the question and click **Add question**. For a link, type the button label, paste the destination URL, and click **Add link**.
Click the **×** button next to any item to remove it. You can mix questions and links freely up to 5 total.
Click **Save Customization**. Starter items appear immediately in your chat widget.
Starter items appear **only before the first message**. Once the visitor sends their first message, AI-generated follow-up suggestions take over (if Smart Follow-ups are enabled).
### Recommended action items
Fewer than 3 feels under-built; more than 5 overwhelms the visitor and pushes the input field below the fold on small screens. **3 questions + 1 link** is a great starting mix for most sites.
**Good**: "How much does it cost?" or "Do you offer refunds?". **Bad**: "Pricing" or "Refund policy" (those are page titles, not questions). The closer the wording matches what a visitor would actually ask, the more natural the chip-to-conversation flow feels.
Some intents are better served by a destination than by chat — pricing pages, demo bookings, status pages, login. Use **Link** type for those so the visitor doesn't have to wait for the AI to repeat what's already on a page.
Open the **Conversations** tab weekly. If the same question keeps coming up but isn't a starter item, promote it. If a starter item never gets clicked, replace it. Starter items should reflect the *current* top intents, not what you guessed at launch.
Long button labels wrap awkwardly on narrow screens. Keep labels under \~40 characters. After saving, open the live widget on your phone to confirm everything fits — what reads cleanly on a 1440px monitor often breaks on a 375px screen.
Link starter items always open in a new tab so the visitor doesn't lose their chat session. If you need the visitor to *stay* in chat, use a **Question** instead — the AI can answer with a markdown link inline.
Pair starter items with **Smart Follow-ups** (below). Starter items handle the first click; smart follow-ups carry the conversation from there.
## Follow-up buttons (persistent ctas)
Add up to **3 buttons** that appear after **every** bot reply, not just the first message. Use these for the call-to-action you want available throughout the entire conversation. Each button is one of three types:
* **Question** — clicking sends a pre-written message to your chatbot (the message can differ from the visible label, e.g. label "See pricing" → message "What are your pricing plans?").
* **Link** — clicking opens a URL in a new tab.
* **Escalate** — clicking notifies your team and shows a custom confirmation to the visitor.
Unlike starter questions (which only appear before the first message) and smart follow-ups (which the AI invents per-reply), follow-up buttons are **operator-controlled and persistent** — visitors always see them, on every turn.
Open your chatbot's **Embed** tab and switch to the **Content** sub-tab.
Scroll past **Starter Questions & Links** to the **Follow-up Buttons** section.
Choose **Question**, **Link**, or **Escalate** at the top of the editor.
* **Question**: enter the button label and an optional message that gets sent (defaults to the label if blank).
* **Link**: enter the button label and the destination URL.
* **Escalate**: enter the button label and an optional confirmation message shown after escalating.
Click **Add**, then **Save Changes**. Repeat up to 3 buttons total. Each button shows after every bot reply in the live widget.
### When to use which
Set the visible label short ("See pricing") and the sent message specific ("What are your pricing plans for the Growth plan?"). Visitors get a tidy CTA; the AI gets a precise question. This is the cleanest way to push a conversation toward your highest-converting topics without forcing the visitor to phrase the question themselves.
Pricing page, demo booking, status page, login. The AI can summarize, but a real page is faster than a paragraph. Links open in a new tab so the chat session stays alive.
Set the confirmation message to match your real handoff time ("A specialist will reach out within 1 business day" beats the generic default). Pair this with **Lead Capture** so you actually get an email to follow up.
The first button gets the most clicks. Put your **most-converting** action first (usually book-a-demo or escalate, not "see docs"). Three buttons stay readable on mobile; four pushes the input field down too far.
Follow-up buttons are guaranteed to appear and behave the way you set them — they're operator-controlled. **Smart Follow-ups** are AI-generated and contextual to the last reply. Use both: persistent buttons for your top CTAs, smart follow-ups to keep the conversation moving on whatever the visitor just asked.
For a turn-key escalation experience — inline "Connect to an agent" CTA after every reply, multi-recipient email alerts, a dedicated triage dashboard, and analytics — see [Human Support & Escalation](/deployment/human-support).
## Smart follow-ups
When enabled, the AI generates relevant follow-up questions after each response, displayed as clickable suggestion buttons. Configure the number of suggestions (1–5).
## Source citations
Toggle to show clickable source links below bot responses, so visitors can verify answers against the original content.
## Hide feedback
Toggle off the thumbs-up / thumbs-down feedback buttons on bot messages. Useful if you prefer a cleaner interface or don't need per-message feedback.
## Watermark / branding
| Plan | Watermark behavior |
| ----------- | ---------------------------------------------- |
| **Free** | "Powered by InsiteChat.ai" — locked |
| **Starter** | "Powered by InsiteChat.ai" — locked |
| **Growth+** | Customizable text and link, or hidden entirely |
Growth and above can set a custom watermark text (e.g., "Powered by Your Company") and a custom link URL.
## Session timeout
Auto-expire conversations after a period of inactivity (0–1440 minutes). When a visitor returns after the timeout, they start a fresh conversation. Set to 0 to disable.
## Conversation history
When enabled, visitors can see and resume their past conversations via a clock icon in the header. Past sessions are stored in the visitor's browser (localStorage, max 10 sessions).