Gabbex logo — AI website assistant for small businesses and online stores

Channels

Deploying the website widget

How to embed the Gabbex chat widget on any website with a single script tag, and the deploy options that control how it looks and where it runs.

The website widget is the most common way to deploy Gabbex. It is a small floating chat button that opens a conversation panel when a visitor clicks it. The whole thing loads from a single script tag.

Getting your embed snippet

  1. Open your assistant and go to Deploy.
  2. Copy the snippet shown on the page. It looks like:
<script src="https://gabbex.com/widget.js"
        data-assistant-id="your-assistant-id"
        async></script>
  1. Paste the snippet into your website’s HTML, just before the closing </body> tag.
  2. Save and visit your site. The widget appears in the bottom corner.

Where to paste it

  • WordPress — use a “Header and Footer Scripts” plugin and paste the snippet into the footer scripts section.
  • Shopify — open your theme code, find theme.liquid, and paste the snippet just before </body>. (Or use the Shopify channel for a deeper integration.)
  • Webflow — Site Settings → Custom Code → Footer Code.
  • Wix — Settings → Custom Code → add new tag, set to “Body — end”.
  • Squarespace — Settings → Advanced → Code Injection → Footer.
  • Custom site — paste it directly into your template.

You only need to add the snippet once. It loads on every page that includes the template.

Allowed domains

For security, an assistant can be configured to run only on a specific list of domains. The widget will refuse to load anywhere else.

To set the allowed domains:

  1. Go to Deploy → Allowed domains.
  2. Add each domain that should be allowed (example.com, www.example.com, app.example.com).
  3. Save.

This prevents anyone who finds your assistant ID from embedding your widget on a site you do not control.

Customising the widget

From the Deploy page you can also configure:

  • Widget colour — usually your brand colour.
  • Widget position — bottom right or bottom left.
  • Opening message — the first message the assistant sends when a visitor opens the chat.
  • Welcome bubble — an optional small message that appears next to the chat button to invite a click.
  • Avatar and name — what the assistant calls itself in the conversation.

Changes take effect on the next page load.

Mobile behaviour

The widget is responsive and works the same on mobile. On small screens it expands to fill the viewport when opened, and collapses to the chat button when closed. There is nothing extra to configure.

Performance

The script is loaded asynchronously so it does not block your page render. The widget is hidden and lazy-loaded — it does not fetch the full chat interface until the visitor clicks the button. On a typical page, the impact on Lighthouse score is negligible.

Removing the widget

Delete the script tag from your template. The widget disappears immediately on the next page load. Conversation history and analytics are preserved in the dashboard.

Common issues

  • “The widget is not appearing.” Check that the snippet is on the page (right-click → View source). Check that the current domain is in the allowed list. Check the browser console for errors.
  • “It works on my staging site but not production.” Add the production domain to the allowed domains list.
  • “The button is overlapping with other content.” Change its position (left vs. right) from the deploy settings.

Next steps