Help

No results found

AI Question Input Fields

Airgentic Help

Add question input fields to your website pages. When a visitor types a question and submits, Airgentic answers it — either on the current page or after redirecting to a dedicated AI support page.

Setup

1. Add Input Fields

Add a text input and button with these class names:

<input type="text" class="ai-question-text" placeholder="Ask a question..." />
<button type="button" class="ai-question-submit">Ask AI</button>

The visitor can click the button or press Enter to submit.

Multiple inputs: Use the same class names for each pair. Each button automatically finds its nearest text input:

<input type="text" class="ai-question-text" placeholder="Ask about products..." />
<button type="button" class="ai-question-submit">Ask</button>

<input type="text" class="ai-question-text" placeholder="Ask about shipping..." />
<button type="button" class="ai-question-submit">Ask</button>

2. Choose Submission Behaviour

Option A: Answer in hover widget (default)

If no target URL is set, the hover widget opens on the current page and answers the question. This keeps the visitor on the same page.

Option B: Redirect to a dedicated AI page

Set a target URL to redirect visitors to your AI support page (typically with a service hub). Use either method (meta tag takes priority):

Meta tag (in <head>):

<meta name="airgentic-question-target-url" content="/ai-support">

Or data attribute (on the Airgentic script):

<script id="airgentic-script"
        src="https://chat.airgentic.com/_js/airgentic-1.4.js"
        data-account-id="[ACCOUNT ID]"
        data-service-id="[SERVICE ID]"
        data-airgentic-question-target-url="/ai-support"
        defer></script>

When redirecting, the question is passed in the URL and submitted automatically on the target page. The URL parameter is then removed for privacy.

Notes

  • Empty questions are ignored (no action taken)
  • Fallback: If a button can't find a nearby input, it uses any non-empty ai-question-text on the page
  • Styling: Use your own CSS — the input and button are plain HTML
  • Accessibility: Consider adding <label> or aria-label for screen readers

Full Example (with redirect)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="airgentic-question-target-url" content="/ai-support">
  <title>Your Page</title>
</head>
<body>
  <h1>Product name</h1>
  <p>Have a question? Ask our AI assistant.</p>

  <input type="text" class="ai-question-text" placeholder="Ask a question..." />
  <button type="button" class="ai-question-submit">Ask AI</button>

  <script id="airgentic-script"
          src="https://chat.airgentic.com/_js/airgentic-1.4.js"
          data-account-id="[ACCOUNT ID]"
          data-service-id="[SERVICE ID]"
          defer></script>
</body>
</html>

Full Example (hover widget on current page)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Your Page</title>
</head>
<body>
  <h1>Product name</h1>
  <p>Have a question? Ask our AI assistant.</p>

  <input type="text" class="ai-question-text" placeholder="Ask a question..." />
  <button type="button" class="ai-question-submit">Ask AI</button>

  <!-- No target URL set, so hover widget opens to answer -->
  <script id="airgentic-script"
          src="https://chat.airgentic.com/_js/airgentic-1.4.js"
          data-account-id="[ACCOUNT ID]"
          data-service-id="[SERVICE ID]"
          defer></script>
</body>
</html>
You have unsaved changes