> For the complete documentation index, see [llms.txt](https://docs.gallabox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gallabox.com/web-agent/web-agent-configuration.md).
# Web Agent Configuration
> **Who can use this?**
>
> * Gallabox users with **Admin** role.
> * Plans: Available on all Gallabox plans.
{% hint style="info" %}
Every setting on this page — appearance, welcome message, ice-breakers, CTA buttons, and contact capture — lives inside **one scrollable panel**: your agent's **Web Widget** tab. There is no separate screen per setting; you open the tab once and scroll to the section you need.
{% endhint %}
### Getting to the Web Widget Panel
#### Step 1 — Open Web Agent from the left menu
#### 
#### Step 2 — Create your Web Chat agent/ Select your Agent
Create your agent if its your first time creating the channel, else you can select the agent you wish to edit. Select medium as Web. \
\
\
{% hint style="info" %}
Build from Scratch in Agent type , and Short description is currently not supported for Web Agent Creation
{% endhint %}
#### Step 3 — Open the Web Widget tab
Inside the agent, click **Web Widget**. Tabs run in this order: Instructions → Actions → Knowledge → **Web Widget** → Settings → Analyze\
***
### Appearance
| Setting | What it does |
| ------------------ | ----------------------------------------------------------------------- |
| **Brand Name** | Name shown in the widget header (max 32 characters) |
| **Status tagline** | Subtitle under the brand name, e.g. "We are online" (max 24 characters) |
| **Brand Logo** | Logo shown in the widget header |
| **Brand Color** | Primary color used across the widget |
| **Launcher Icon** | Select one of 4 preset , or upload your own icon |
| **Style** | Expanded ( more content) or Compact (lightweight) |
**English / العربية** toggle — switches the widget's display language, and preview language between English and Arabic.
{% hint style="info" %}
If Arabic is enabled, by default the widget position changes to be the opposite of the English settings. Widget language is set to Arabic, the widget switches between LTR and RTL layout based on browser settings. End customer can override this with the 3 dots , if needed.
{% endhint %}
**Margin right** / **Margin bottom** — offsets the widget launcher from the corner of the screen for more customisation.
### Messaging
| Setting | What it does |
| ------------------------- | ------------------------------------------------------------------------------------------------------------- |
| **Welcome Message** | First message shown when a visitor opens the widget (max 128 characters) |
| **Conversation Starters** | Ice-breaker buttons visitors can tap instead of typing (see below) |
| **CTA** | A fixed CTA button to guide all users from any sub-page to a fixed location, like " Book Now" to book a table |
#### Conversation Starters (Ice-breakers)
Ice-breakers are pre-set questions visitors can tap to start a conversation instantly — no typing required.
**To configure:**
1. In the **Messaging** section, find **Conversation Starters**.
2. Click **Add Question** (or edit the existing ones, e.g. "Know More").
3. Enter your question (max **32 characters** — enforced by a counter, e.g. "9/32").
4. Reorder using the drag handle if you have more than one. You can have upto 3 configured in English / Arabic .
5. Click the trash icon next to a question to delete it.
6. Click **Save Widget**.
**Example ice-breakers:**
* "What are your pricing plans?"
* "Do you offer a free trial?"
* "How do I get started?"
**Best practices:**
* Keep each one short — visitors scan, they don't read.
* Match your top real-world questions (check your inbox for what visitors actually ask).
### CTA Buttons
CTA Buttons sit on the same **Web Widget** panel, right below Conversation Starters.
**To configure:**
1. Scroll to **CTA Buttons**.
2. Toggle **Show CTA Buttons** on.
3. Click **Add CTA**.
4. Enter the button text, destination URL, and choose an icon.
5. Click **Save Widget**.
**Example CTAs:**
| Button | Action |
| ---------------- | -------------------------- |
| Start Free Trial | Opens your signup page |
| Book a Demo | Opens your scheduling page |
| View Pricing | Opens your pricing page |
**Best practices:**
* Lead with your single most important action.
* Use short, action-oriented labels.
* Double-check destination URLs before publishing.
### Contact Capture
Contact Capture controls whether and when visitors are asked for their name, email, or phone number.
**To configure:**
1. Scroll to **Contact Capture**.
2. Toggle **Capture contact information** on.
3. Select when to capture fields like Name and Phone Number.
4. Choose **when to ask**: before the chat starts, after the visitor's first message, or never (customise your agent instruction to extract details from the conversation).
5. Click **Save Widget**.
{% hint style="info" %}
Note : The Forced Capture Option removes the "x" mark from the UI, forcing the visitors to fill the form to continue interacting with the Widget. They can move the conversation to Whatsapp.
{% endhint %}
**Anonymous vs. identified visitors:**
* **Anonymous** — visitor hasn't shared contact info yet. Gallabox still shows current page, approximate location, and device type, but doesn't create a contact record.
* **Identified** — visitor has shared contact info (via the capture form or mid-conversation). Gallabox creates or updates a contact and links the conversation history to it.
**Best practice:** Use **After First Message** so visitors can start chatting immediately, without a form blocking the conversation.
### Save and Publish
**Save Widget** and **Publish Agent** control two different things:
* **Save Widget** persists your widget settings (Appearance, Messaging, CTA Buttons, Contact Capture, Handoff Configuration) and pushes them live immediately — if the embed script is already deployed on your website, visitors see the updated widget as soon as you click **Save Widget**, no separate publish step required.
* **Publish Agent** (top-right) pushes the agent's instructions/actions (Role, Goal, Actions, Knowledge) live. It's a separate action from Save Widget.
Editing widget settings alone doesn't require Publish Agent — Save Widget is enough for those changes to go live on the deployed widget.
### Deploying the Script
### Configure and Embed the Widget
Once the agent exists, all widget configuration — appearance, welcome message, ice-breakers, CTA buttons, contact capture, and WhatsApp handoff — happens in one place: the agent's **Web Widget** tab. See for that full flow.
To get your embed snippet:
1. Open your agent → **Web Widget** tab.
2. Click **Copy Script** (top-right of the preview panel).
3. Paste the script into your website's HTML, immediately before the closing `` tag, on every page where the widget should appear.
### Content Security Policy (CSP)
If your website enforces a strict CSP, the widget script may be blocked and you'll need to allowlist Gallabox's domain in your `script-src` / `frame-src` / `connect-src` directives.