JavaScript Integration Guide

Overview

This guide shows you how to add Airgentic to any website. Airgentic supports three modes:

Hover widget (classic UI) – appears on every page (bottom-right launcher).
Service Hub UI (classic UI) – a full-width chat experience you add to selected pages.
Search UI – a unified site search + chat experience presented in a semi-transparent overlay.

You’ll add one script tag and set your Account ID and Service ID once.
You can optionally activate Search UI by providing the HTML element ID of your site’s search input and/or search button.
If you choose to use the Service Hub, you’ll also add a one-line placeholder where you want it to appear.

Step 1. (Optional) Add the Hover Widget to the Site Template

To add the chat widget that hovers in the bottom-right corner of your website, place the following script tag into your site header:

<head>
...

src="https://chat.airgentic.com/_js/airgentic-1.4.js"

data-account-id="[ACCOUNT ID]"

data-service-id="[SERVICE ID]" defer></script>
</head>

Contact the Airgentic team to find out what your account ID and service ID are.

Step 2. (Optional) Add the Service Hub to the Selected Pages

The Airgentic Service Hub is a great addition to your site's home page or contact page to encourage customers to self service before reaching out to the contact centre.

To add the Service Hub, first ensure you've added the Hover Widget to the site template as per the above instructions.

Once that's done, place the following div into the HTML page content where the Service Hub should appear:

This div acts as a placeholder where your JavaScript code will render the service hub UI component.

Tip: Place it near the top of your content area if you want it to be the primary focus of the page.

Step 3. (Optional) Activate the Search UI

If you want Airgentic’s Search UI (a unified site search + chat overlay), provide the ID(s) of your existing search elements as data-* attributes on the same script tag. You may provide one or both:

data-search-input-id="..." – the ID of your site’s search input element

data-search-button-id="..." – the ID of your site’s search button

Example (with both):

Notes

Use element IDs only (no # prefix, not class names).
You can provide either input or button ID; Airgentic will bind to whichever you provide.

Troubleshooting

Script not loading / widget not visible

Confirm the script is present in page source with id="airgentic-script".
Ensure Content-Security-Policy (if used) allows script-src https://chat.airgentic.com.
Check that Account ID and Service ID are correct.

Search UI not triggering

Verify the IDs you provided actually exist in the DOM (e.g., document.getElementById('searchInput')).
Don’t use # or class names; IDs only.
Ensure there aren’t duplicate IDs.

Service Hub not rendering

Ensure <div id="airgentic"></div> is present on the page.
Avoid placing it inside conditionally hidden containers if you want it visible on load.

CDN / cache

After first install or changes, purge page caches and any CDN (e.g., Cloudflare) so the updated attributes ship.

Duplicates

Only include the Airgentic script once per page. Remove any older, hard-coded versions.

Removing the integration

Remove the <script id="airgentic-script" ...> tag from your template and delete any <div id="airgentic"></div> placeholders.

Airgentic