Web Chat Setup

Who can use this?

Gallabox users with channel management permissions.

Roles: Owners and Admins

Plans: Available on all Gallabox plans.

Plan Availability

Available on all Gallabox plans.

What is Web Chat?

Web Chat is a chat widget you embed on your website. Visitors can message your business directly from the website, and you can review those conversations in the Web Agent’s chat logs. They appear in the shared Inbox only after a WhatsApp handoff. Unlike WhatsApp and Instagram (which are Meta platforms), Web Chat is fully controlled by Gallabox — meaning:

No 24-hour window restriction — there’s no time-based gating on when you can reply to a visitor (unlike WhatsApp/Instagram)
No Meta Business verification needed — just add the code and it’s live
No human agent in the Inbox — only the Chat AI Agent can talk to a Web Chat visitor. There’s no live Inbox view for Web Chat, and no way for a human to take over directly — the only path to a human is a WhatsApp handoff
Auto-open — the widget can automatically open after the visitor has been on the page for a set number of seconds, but the visitor must still send the first message — Gallabox cannot proactively send outbound messages to visitors

Prerequisites

Before starting, make sure you have:

Admin access to your website — you’ll need to add a JavaScript snippet to your site’s HTML.
A Gallabox account with Web Chat available on your plan.
A web developer or CMS access — if you’re using a CMS like WordPress, Shopify, or Webflow, you may need to use their specific widget/embed code injection method.

Web Chat is available on all plans, including the free trial. You can set it up before connecting WhatsApp or Instagram.

How to Set Up

Create a Web Chat widget in Gallabox

Go to AI Agents and Bots in the left navigation of Gallabox.
Click Create New → Chat AI Agent and select Web as the channel, then open Settings → Web Widget Settings.
Fill in the widget details:

Field	Description	Example
Website Name	Your website’s name	”Acme Store”
Website URL	Where the widget will be installed	`https://acmestore.com`
Widget Headline	Title shown at the top of the chat window	”Chat with us”
Status Tagline	Subtitle shown under the headline (max 20 characters)	“Available 24/7”
Welcome Message	First message shown when the widget is opened	”Hi! How can we help you today?”
Away Message	Message shown when no agents are online	”We’re away right now. Leave a message and we’ll reply soon.”
Button Text	Text on the chat trigger button	”Chat with us”
Theme Color	Primary color for the widget	`#3264F9`
Widget Position	Left, Center, or Right — where the widget appears on the page	Right
Auto-open	Toggle on, then set a delay (1–300 seconds) before the widget opens automatically	Off
Contact Capture	Ask for the visitor’s details after a set number of replies, optionally required	Ask after 1 reply, not required
Logo	Your business logo shown in the chat header	Upload your logo

Click Save.

Copy the embed code

In AI Agents and Bots → [Your Agent] → Settings → Web Widget Settings, find the widget you just created.
Click Embed Script to open the embed code modal.
Copy the JavaScript snippet shown there — it comes pre-filled with your widget token and SDK URL, so always copy it from the modal rather than hand-editing a template.

The snippet looks like this:

<script>
  const token = "YOUR_WIDGET_TOKEN";
  (function(w, d, s, u, t) {
    w.Chatty = function(c) { w.Chatty._.push(c) };
    w.Chatty._ = [];
    w.Chatty.url = u;
    w.Chatty.hash = t;
    var h = d.getElementsByTagName(s)[0],
      j = d.createElement(s);
    j.async = true;
    j.src = u + '/chatty-widget-v2.min.js?_=' + Math.random();
    h.parentNode.insertBefore(j, h);
  })(window, document, 'script', 'WIDGET_SDK_URL', token);
</script>

Add the code to your website

Paste the embed snippet into your website’s HTML — right before the closing </body> tag on every page where you want the widget to appear.For specific pages only: If you only want the widget on certain pages (e.g., your pricing page or support page), add the code only to those page templates.

Pro tip: Test on a single page first — your homepage or a test/staging environment — before deploying site-wide. This lets you catch any issues before they affect all visitors.

Content Security Policy (CSP) — If Your Site Has Strict CSP

If your website has a Content Security Policy (CSP) header configured, the Gallabox widget may be blocked. You’ll need to add Gallabox’s widget domain to your CSP allowlist. Add these directives to your CSP header:

script-src https://widget.gallabox.com;
frame-src https://widget.gallabox.com;
connect-src https://widget.gallabox.com;

The widget renders inside an iframe as well as loading a script, which is why both script-src and frame-src are needed.

If you’re not sure whether your site has CSP headers, try loading your website after adding the widget. If the chat icon doesn’t appear, check your browser’s developer console (F12 → Console) for CSP errors. If you see Refused to load script or Refused to frame errors pointing to widget.gallabox.com, your site has CSP and needs the allowlist above.

Common Website Platforms

WordPress
Shopify
Webflow
Wix
Squarespace

Go to Appearance → Theme Editor → footer.php and paste the code before </body>. Or use a plugin like WPCode to inject the snippet without editing theme files.

Go to Online Store → Themes → Actions → Edit Code → theme.liquid and paste the code before </body>.

Testing Your Setup

Visit the page where you added the embed code.
Look for the chat widget icon (usually bottom-right corner).
Click it to open the chat window.
Send a test message. It should appear under AI Agents and Bots → [Your Web Agent] → View Chat Logs.
If using a Chat AI Agent, the agent should respond automatically.

If the widget doesn’t appear:

Check the browser console for errors (F12 → Console).
Verify the embed code was copied completely (no truncation).
Confirm the Website URL in Gallabox matches the URL where the widget is installed (including https://).

Multiple Widgets

You can create multiple Web Chat widgets — one per website or per section of your site. Each widget has its own:

Embed code
Chat history

This is useful if you manage multiple brands or want different chat configurations for different parts of your site. To get the right widget on the right page, use the embed code specific to that widget.

Example

Scenario: You run a SaaS company with three websites — a main marketing site (acme.com), a help center (help.acme.com), and a pricing page (acme.com/pricing). You want the chat widget on all three, but with different configurations:

Main site: your branding colors and a sales-focused greeting
Help center: a “Browse our docs first” ice-breaker
Pricing page: Chat with a “Talk to Sales” CTA and aggressive handoff to WhatsApp

Here’s how you’d set it up:

Create 3 separate widgets in Gallabox — one for each site/section.
For the main site: configure branding and set the greeting message.
For the help center: enable ice-breakers with FAQ questions.
For the pricing page: enable WhatsApp handoff and add a CTA button linking to your booking link.
Copy each widget’s unique embed code and add it to the respective website section.
Each widget’s conversations appear in your Gallabox inbox.

FAQs

The widget is not showing on my website — how do I debug?

Open your browser’s developer console (F12 → Console tab).
Look for any Refused to load script or Refused to frame errors — if you see widget.gallabox.com blocked, your site has a CSP that needs to allowlist it (see the CSP section above).
Check the Network tab for failed requests to widget.gallabox.com — if they’re red, the request is being blocked.
Verify the embed code is complete — try copying it from Gallabox again and re-pasting.
Make sure the Website URL in Gallabox exactly matches the page URL (including https:// and no trailing slash mismatch).
Clear your browser cache and try an incognito/private window.

Can I add the widget to only specific pages on my site?

Do I need HTTPS for the widget to work?

Can visitors chat without giving their name or email?

It depends on your Contact Capture setting. By default, a visitor is asked for their details after their first reply, but it isn’t required — they can dismiss it and keep chatting anonymously. If you turn on Forced Capture, the visitor must provide their details before continuing. See Widget Customisation.

Can I customize the widget's appearance beyond colors and logo?

Yes — go to AI Agents and Bots → [Your Agent] → Settings → Web Widget Settings to change fonts, button styles, chat bubble appearance, and more. For advanced customisation (CSS overrides, custom launcher button), contact Gallabox support.

Web Chat Widget Customisation — Colors, fonts, branding options
Web Chat Ice-breakers and CTAs — Pre-set questions and call-to-action buttons
Website Analytics — Dashboard data and WhatsApp handoff
Omnichannel Inbox — Continue a Web Chat conversation through WhatsApp handoff

Getting Started

Concepts

Inbox

Contacts

AI Agents & Bots

WhatsApp

Instagram

Web

Integrations

Analytics

Settings

Privacy & Security

Pricing and Billing

Plan Availability

What is Web Chat?

Prerequisites

How to Set Up

Content Security Policy (CSP) — If Your Site Has Strict CSP

Common Website Platforms

Testing Your Setup

Multiple Widgets

Example

FAQs

​Plan Availability

​What is Web Chat?

​Prerequisites

​How to Set Up

​Content Security Policy (CSP) — If Your Site Has Strict CSP

​Common Website Platforms

​Testing Your Setup

​Multiple Widgets

​Example

​FAQs

​Related Articles

Plan Availability

What is Web Chat?

Prerequisites

How to Set Up

Content Security Policy (CSP) — If Your Site Has Strict CSP

Common Website Platforms

Testing Your Setup

Multiple Widgets

Example

FAQs

Related Articles