Google Tag Manager (GTM)
Integration Guide

Overview

What this is:
The simplest way to add Airgentic’s Hover widget (floating launcher) or Search UI overlay to any site—without logging into the CMS.
What it’s not:
This does not place the in‑page Service Hub. To embed the Service Hub, you’ll still need to follow the JavaScript Integration Guide section that describes adding the one‑line placeholder <div id="airgentic"></div> in your site’s template or page content.

Airgentic supports three modes:

Hover widget (classic UI) – a bottom‑right launcher on every page.
Service Hub UI (classic UI) – a full‑width chat experience you embed in‑page (requires <div id="airgentic"></div> in the CMS).
Search UI – a semi‑transparent overlay that binds to your site’s existing search input/button.

With GTM you’ll deploy one Custom HTML tag that loads the Airgentic script and sets your Account ID and Service ID, plus optional attributes for the Search UI.

Compatibility: This guide applies to Google Tag Manager Web containers (standard and 360). It does not apply to GTM AMP containers (which don’t support arbitrary Custom HTML/JS) or Server‑side containers (which run on a tagging server and cannot inject code into the page DOM).

Step 1 — Open the right GTM container (Web)

Go to tagmanager.google.com and sign in.
Select your Account and Container for the website. Confirm the Container Type is Web (left nav → Admin → Container Settings).
In the left nav, click Tags → New. In Tag Configuration, choose Custom HTML.

Step 2 — Add the Airgentic loader (Custom HTML tag)

Paste this into the Custom HTML editor:

(function () {
var s = document.createElement('script');
s.id = 'airgentic-script';
s.src = 'https://chat.airgentic.com/_js/airgentic-1.4.js';
s.defer = true;
s.setAttribute('data-account-id', 'YOUR_ACCOUNT_ID');
s.setAttribute('data-service-id', 'YOUR_SERVICE_ID');
document.head.appendChild(s);
})();

</script>

Replace YOUR_ACCOUNT_ID and YOUR_SERVICE_ID with values from the Airgentic team.
Leave defer in place so the browser loads the script without blocking rendering.

(Optional) Enable the Search UI overlay by adding one or both attributes, pointing to your site’s existing search element IDs or class names:

s.setAttribute('data-search-input-id, 'SEARCH_INPUT_ID');

s.setAttribute('data-search-button-id, 'SEARCH_BUTTON_ID');
document.head.appendChild(s);
})();

</script>

Notes for Search UI

You can use element IDs or class names for the search input & button
You can provide either input or button ID; Airgentic will bind to whichever you provide.

Step 3 — Choose when it fires

In GTM, go to Tags → (your Airgentic tag) → Triggering → + (Add).
Choose Trigger Configuration → Page View.
In the “This trigger fires on” section, select DOM Ready → All DOM Ready events.
Name it “Airgentic — DOM Ready — All Pages” and Save.

You can add Exceptions (e.g., exclude checkout pages).

Step 4 — Preview, then Publish

Click Preview (top‑right) to open Tag Assistant, enter your site URL, and connect.

Browse a few pages; in Tag Assistant confirm your Airgentic tag fired.

Back in GTM, click Submit (top‑right), add a version name/description, and Publish.

Step 5 — (Only if you want the Service Hub)

GTM can load the script, but the Service Hub needs a placeholder in the page content:

Add that line once per page where you want the full‑width hub to appear—typically via your CMS template or page editor—following the JavaScript Integration Guide. GTM alone can’t “place” a div into a specific content region. (Advanced: you could inject a div via a GTM Custom HTML tag and DOM manipulation, but it’s brittle and not recommended for production.)

Verification Checklist

Script loaded: In your browser DevTools Network tab, filter for airgentic-1.4.js. It should load once per page.
Hover widget visible: You should see the bottom‑right launcher.
Search UI (if configured): Typing or clicking your search element should open the overlay.
Tag Assistant: Shows your Custom HTML tag firing on the intended pages.

Troubleshooting

Nothing appears

Confirm the GTM container snippet is correctly installed on the site and the right Web container is selected.
In Tag Assistant, check whether the Airgentic tag fired.
Ensure CSP allows loading third‑party scripts; if you use a Content‑Security‑Policy, add https://chat.airgentic.com to script-src (and connect-src if needed).

Search UI not triggering

Verify the IDs you provided actually exist (document.getElementById(...) should return an element).
Use DOM Ready trigger if elements are injected late.
Avoid duplicate IDs.

Service Hub not rendering

Ensure the page contains <div id="airgentic"></div> (add via CMS/template).

Don’t nest it inside elements hidden on initial load.

Worried about iframes?

GTM’s noscript iframe only runs when JavaScript is disabled. Your Custom HTML tag executes in the main page when JS is enabled—the normal case.

Removing the GTM integration

In GTM, go to Tags, open your Airgentic Custom HTML tag, and Delete (or disable it), then Submit/Publish to push the change live. Remove any <div id="airgentic"></div> placeholders from the CMS if you’re no longer using the Service Hub.

FAQs

Which GTM “versions” does this support?
All current Google Tag Manager Web containers (free and 360). AMP containers don’t support arbitrary Custom HTML/JS, and Server‑side containers run on a tagging server (they don’t modify the page DOM), so neither is suitable for injecting the Airgentic script.

Will this run inside a GTM iframe?
No—under normal conditions (JavaScript enabled), your tag runs in the page context. The noscript iframe is a fallback when JS is disabled and won’t execute Custom HTML/JS.

Where do I find the screens you mentioned?

Tags → New → Tag Configuration → Custom HTML to create the tag.
Triggering to set All Pages, DOM Ready, or a conditional trigger.
Preview (top‑right) to test in Tag Assistant; Submit (top‑right) to publish.

Airgentic

Google Tag Manager (GTM) Integration Guide