This guide explains how to add Site Search to your website.

Airgentic support will provide your account ID and service ID. You will need access to edit your website templates or CMS pages.

Before you start

Confirm you have:

• [ ] Your Airgentic account ID and service ID
• [ ] Inline search enabled for your service (contact Airgentic support if unsure)
• [ ] Permission to create or edit pages on your website
• [ ] A staging or test environment (recommended for Phase 1)

Choose your integration path

Most customers use inline search — a dedicated search results page on your website (for example /search).

This guide focuses on inline search, which is the recommended setup for most websites. Overlay search is covered in a separate section below.

What you are adding (at a glance)

Inline search involves three small HTML changes:

Plus one script attribute for autocomplete on existing fields:

Do not confuse these:

How a search works (visitor journey)

Once integrated, this is what happens when a visitor searches:

1. Visitor types in your existing search field (homepage, header, etc.).
2. Airgentic shows autocomplete suggestions as they type.
3. Visitor presses Enter or clicks Search.
4. Browser opens your search page, for example /search?query=engineering.
5. Airgentic reads query from the URL and renders results, scopes, filters, and the AI summary.

Phase 1: Try it on a test page

Goal: Confirm search works end-to-end before changing your live homepage or site template.

Step 1.1 — Create a test search page

Create a page on staging (for example /search-test).

Paste this HTML where you want the search experience to appear:

<div data-airgentic="search"></div>

<script id="airgentic-script"
        src="https://chat.airgentic.com/_js/airgentic-1.4.js"
        data-account-id="YOUR_ACCOUNT_ID"
        data-service-id="YOUR_SERVICE_ID"
        defer></script>

Replace YOUR_ACCOUNT_ID and YOUR_SERVICE_ID with your values.

Note: On the test page, include the script tag even if you plan to add it site-wide later. This keeps the test self-contained.

Ask Airgentic support to confirm inline search is enabled if the container stays empty.

Step 1.2 — Add a simple test form on the same page

Add a basic search form above the container so you can submit queries manually:

<form action="/search-test" method="get">
  <input type="search" name="query" placeholder="Search">
  <button type="submit">Search</button>
</form>

The form must use:

• method="get"
• name="query" on the search input

Step 1.3 — Run your first search

1. Open /search-test in your browser.
2. Type a query (for example engineering) and submit.
3. Confirm the URL becomes /search-test?query=engineering.
4. Confirm Airgentic renders search results below the form.

Phase 1 checklist

• [ ] Search container appears on the test page
• [ ] Submitting a query updates the URL to ?query=...
• [ ] Results, scopes, and filters render correctly
• [ ] AI summary appears (if enabled for your service)
• [ ] Pagination and scope tabs work

If everything passes, proceed to Phase 2.

Phase 2: Roll out across your site

Goal: Connect your real search fields to a production search page.

Step 2.1 — Create your production search page

Create your live search page (for example /search).

Add only the search container — the script tag will be site-wide from Step 2.2:

<div data-airgentic="search"></div>

Step 2.2 — Add the script tag to your site template

Add this to your global site template so it loads on every page, usually before the closing </body> tag:

<script id="airgentic-script"
        src="https://chat.airgentic.com/_js/airgentic-1.4.js"
        data-account-id="YOUR_ACCOUNT_ID"
        data-service-id="YOUR_SERVICE_ID"
        data-autocomplete-input-id="site-search"
        defer></script>

Replace:

• YOUR_ACCOUNT_ID and YOUR_SERVICE_ID with your values
• site-search with the ID of your existing search input (see Finding your search field ID)

For more script tag options, see Website Integration: Script Tag.

Step 2.3 — Update every site search form

Update each search form that should use Airgentic (header, homepage, mobile menu, etc.).

Before (typical CMS form):

<form action="/old-search-path" method="get">
  <input id="site-search" name="search_api_fulltext" type="search" ...>
  <button type="submit">Search</button>
</form>

After (Airgentic):

<form action="/search" method="get">
  <input id="site-search" name="query" type="search" placeholder="Search">
  <button type="submit">Search</button>
</form>

Three things must change:

When a visitor searches for engineering, the browser must open:

/search?query=engineering

Step 2.4 — Test the full visitor journey

1. Open your homepage (or any page with a search field).
2. Type a query — autocomplete suggestions should appear.
3. Press Enter.
4. Confirm the browser opens /search?query=....
5. Confirm the full search experience renders on the search page.

Phase 2 checklist

• [ ] Script tag is in the site template
• [ ] data-autocomplete-input-id matches your search field's ID
• [ ] All site search forms submit to /search (or your chosen path)
• [ ] All search inputs use name="query"
• [ ] Production search page has <div data-airgentic="search"></div>
• [ ] Homepage → search → results flow works on desktop and mobile

Finding your search field ID

You need the search input's id attribute for data-autocomplete-input-id.

1. Open your website in a browser.
2. Right-click the search field and choose Inspect.
3. Look for the id on the <input> element, for example id="edit-search-api-fulltext".
4. Use that value in the script tag: data-autocomplete-input-id="edit-search-api-fulltext".

If your field has no id, you can use a class name instead (with a leading dot), for example data-autocomplete-input-id=".header-search".

CMS-specific notes

Many CMS platforms (Drupal, WordPress, Squiz, etc.) generate search forms automatically. You may need to change settings in the CMS admin, not just HTML:

Drupal example: A search field might use name="search_api_fulltext" and submit to a Drupal search path. For Airgentic, update it to submit to /search with name="query".

If you cannot change the parameter name, ask Airgentic support about URL redirect options.

Autocomplete options

Autocomplete is enabled via data-autocomplete-input-id on the script tag (Phase 2, Step 2.2). These are optional refinements.

Separate search button

If your CMS uses a button that does not submit the form normally, add data-autocomplete-button-id:

<script id="airgentic-script"
        ...
        data-autocomplete-input-id="site-search"
        data-autocomplete-button-id="site-search-button"
        defer></script>

Mark inputs directly (alternative)

If you can edit the input HTML, add data-airgentic-autocomplete="true" to each field and data-search-autocomplete="true" to the script tag instead of data-autocomplete-input-id.

Optional settings

When a visitor selects a suggestion, Airgentic either opens the document URL directly (for title matches) or submits the form with the query filled in.

Overlay search (alternative)

Overlay search opens Airgentic in a popup when a visitor clicks an existing search field. You do not need a separate /search page.

<input id="site-search" type="search" placeholder="Search">

<script id="airgentic-script"
        src="https://chat.airgentic.com/_js/airgentic-1.4.js"
        data-account-id="YOUR_ACCOUNT_ID"
        data-service-id="YOUR_SERVICE_ID"
        data-search-input-id="site-search"
        defer></script>

Use data-search-input-id (not data-autocomplete-input-id) for overlay search.

Most customers use inline search instead. See Configuring Search Layout and UI Modes for when to choose each option.

Common issues

For more help, see Troubleshooting Site Search.

Configure search in the admin console

After the website integration works, tune the search experience in the Airgentic admin console:

See Site Search Overview for links to each area.

Styling

Airgentic search uses stable CSS classes that work alongside common website frameworks. If your site already has search styles, Airgentic support can load your stylesheet into the search experience and apply final overrides via style.css.

See Styling Site Search.

Advanced per-slot layouts

Some websites place search elements in separate parts of the page layout. This is an advanced option that may require Airgentic support.

<div data-airgentic="search-input"></div>
<div data-airgentic="search-scopes"></div>
<div data-airgentic="search-facets"></div>
<div data-airgentic="search-sort"></div>
<div data-airgentic="search-ai-answer"></div>
<div data-airgentic="search-ask"></div>
<div data-airgentic="search-results"></div>
<div data-airgentic="search-pagination"></div>

The search-ask slot is only used when the Ask tab is enabled. Per-slot layouts use the same ?query=... URL parameters as the single-container setup. For most services, start with <div data-airgentic="search"></div> and configure everything else in the admin console.

Testing notes

When testing on localhost, This site search context filtering may behave differently because your browser URL does not match the indexed website host.

For example, local testing might use http://localhost:8001 while indexed pages use www.example.com. Use staging or production URLs when testing site-scoped search behaviour.

See also Testing and Previewing Site Search.

Related guides

• Site Search Overview — What Site Search includes and recommended rollout
• Website Integration: Script Tag — All script tag options
• Styling Site Search — Customise the search page appearance
• Troubleshooting Site Search — Fix common problems