Site Search Website Integration

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

Start with the standard Airgentic script tag. Airgentic support will provide your account and service IDs.

Standard Script Tag

Add the Airgentic script tag to your website, 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"
        defer></script>

Replace:

YOUR_ACCOUNT_ID
YOUR_SERVICE_ID

with the values for your Airgentic service.

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

Overlay Search

Overlay search can use an existing search input or button on your website.

Example:

<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>

When a visitor clicks the existing search input, Airgentic opens the search overlay.

Add Autocomplete to an Existing Search Field

If your website already has a styled header search field, you can keep that field and add Airgentic autocomplete suggestions to it.

Option 1: Target an Existing Field from the Script Tag

This is the recommended approach when your CMS does not let you add custom attributes to the search input.

Keep your existing search form:

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

Then point Airgentic autocomplete at that input using data-autocomplete-input-id:

<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>

Airgentic first looks for an element with that ID. If no ID matches, it treats the value as a class name, so data-autocomplete-input-id="site-search" can also target elements with class="site-search". You can also pass a class with a leading dot, such as data-autocomplete-input-id=".site-search".

If your CMS uses a separate search button instead of a normal form, add data-autocomplete-button-id to the script 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"
        data-autocomplete-button-id="site-search-button"
        defer></script>

Airgentic first treats data-autocomplete-button-id as an element ID, then as a class name.

Option 2: Mark the Input Directly

Mark the existing input with data-airgentic-autocomplete="true":

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

Then add data-search-autocomplete="true" to the Airgentic script 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-search-autocomplete="true"
        defer></script>

When the visitor types, Airgentic shows suggested searches from your indexed content. Selecting a document-title suggestion opens the indexed page directly when that suggestion includes a URL. Query-only suggestions fill the search field and then use the page's normal search behaviour: Airgentic submits the closest form, clicks the configured autocomplete button if one is provided, or dispatches an Enter key event for CMS widgets such as Wix.

Do not use data-search-input-id for autocomplete. data-search-input-id is for overlay search, where clicking a field opens the Airgentic overlay. Use data-autocomplete-input-id when you want the existing field to remain editable on the page.

Optional settings:

data-search-autocomplete-min-chars="3" changes how many characters are required before suggestions appear. The default is 2.
data-search-autocomplete-submit-on-select="false" fills the input without opening a direct URL, submitting a form, clicking a button, or dispatching Enter when a visitor selects a suggestion.
The autocomplete dropdown follows the service's Search UI theme. Use data-autocomplete-theme="dark" or data-autocomplete-theme="light" only when a page needs to override that setting.

You can enable autocomplete on more than one field by either using a shared class with data-autocomplete-input-id, or by adding data-airgentic-autocomplete="true" to each input.

Inline Search Page

Inline search embeds search results directly into a page.

Create a search results page on your website, such as /search, and point site-wide search forms to that page using standard URL parameters:

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

When a visitor searches for engineering, the browser opens /search?query=engineering. Airgentic reads that query, renders the results, and keeps the page URL updated as the visitor changes scopes, filters, sort order, or pagination.

Add a container where the search UI should appear:

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

Then include the standard Airgentic script tag on the same page:

<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>

Inline search must be enabled for your service before the container will render a search experience.

If the service has Search Fields configured as filters in Search Configuration > Fields, the inline search page can show those filters alongside results. Use Search Configuration > Filters to tune filter behaviour, Scopes to control which category tabs appear and which filters each tab shows, and Result Cards to control result layouts and metadata badges. This is the recommended setup for larger search pages that need category tabs, multiple filters, and richer result cards.

Airgentic search uses a single migration-friendly DOM with stable Airgentic classes and common search/Bootstrap-style classes. If your existing website already has search styles, Airgentic support can load that stylesheet into the search experience and then use the Airgentic-managed style.css for any final overrides. See Styling Site Search.

Advanced Per-Slot Layouts

Some websites may need to place search elements in separate parts of the page.

Future/advanced layout example:

<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 optional and is only used when the Ask tab is enabled in Search Configuration. This approach is advanced and may require Airgentic support. It uses the same bookmarkable URL parameters as the single-container inline search page, so existing search forms can still submit to /search?query=.... For most services, start with the single search container and configure categories, filters, Ask tab behaviour, AI answer behavior, and search styling in the admin console.

Testing Notes

When testing on localhost, current-site filtering may behave differently because your browser URL is not the same host as the indexed website.

For example, local testing might use:

http://localhost:8001

while indexed pages use:

www.example.com

Use staging or production URLs when testing This site search context behaviour.

Help