# Chat as Search — Technical Implementation Guide

This guide provides step-by-step instructions to implement Chat as Search on your website. Each step includes an explanation and code.

## Step 1: Add the Chat Widget Script

Add this `<script>` tag to your page — replace `XXXX` with the client's `popupId` from the Satisfi console. The embed bootstraps asynchronously via manifest.json → then injects `satisfipopup.1.0.119.js`.

```
<script id="satisfiScript"
src="https://chat.satis.fi/popup/embedder?popupId=XXXX">
</script>
```

## Step 2: Create a Search Interface

Build a simple input field and button to allow users to enter queries directly.

```
<div class="chat-search">
  <input type="text" id="chatInput" placeholder="Ask us anything..." />
  <button id="chatBtn">Search</button>
</div>
```

## Step 3: Connect the Search to Chat

Use JavaScript to send the user’s query into the chat using sendMessage(). This will open the chat and trigger the AI response.

```
const input = document.getElementById('chatInput');
const btn = document.getElementById('chatBtn');

SatisfiApp.Global.chatButtonHide();

function launchSearch() {
  const q = input.value.trim();
  if (!q) {
    SatisfiApp.Global.chatPopupOpen();
    return;
  }
  SatisfiApp.Global.sendMessage(q);
  input.value = '';
}

btn.addEventListener('click', launchSearch);
input.addEventListener('keydown', e => {
  if (e.key === 'Enter') launchSearch();
});
```

## Step 4: Quick Topic Buttons (Pre-Canned Queries)

These buttons send predefined queries to the chat and improve user engagement.

```
<div class="quick-topics">
  <button onclick="SatisfiApp.Global.sendMessage('What are today\'s hours?')">Hours</button>
  <button onclick="SatisfiApp.Global.sendMessage('Where can I park?')">Parking</button>
  <button onclick="SatisfiApp.Global.sendMessage('How do I buy tickets?')">Tickets</button>
  <button onclick="SatisfiApp.Global.sendMessage('What\'s on the menu?')">Food & Drink</button>
  <button onclick="SatisfiApp.Global.chatPopupOpen()">More Questions</button>
</div>
```

## Implementation Patterns by Use Case

<figure><img src="/files/tuPxxwCMVllYMkV2RrpZ" alt=""><figcaption></figcaption></figure>

## Pre-Launch Checklist

* Correct `popupId` from Satisfi console in embed URL
* Embed `<script>` loads before any custom button JS
* Default launcher hidden if using custom search bar
* Enter key triggers search (keyboard accessibility)
* Empty-input edge case handled (`chatPopupOpen()` fallback)
* Tested on mobile viewport (tap targets ≥ 44px)
* Tested in staging (`env=staging` URL param) before go-live
* Quick-topic labels match AI's trained intents
* `sendMessage()` confirmed available with Satisfi team
* Validated against reference demo: `?popupId=7662`

## Step 5: Test and Validate

Ensure everything works correctly, including mobile responsiveness, Enter key functionality, and correct popupId configuration.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.satisfilabs.com/resource-center/ai-agent-engine/features-and-integrations/features/agent-as-search-client-resource-guide/chat-as-search-technical-implementation-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.