> For the complete documentation index, see [llms.txt](https://docs.satisfilabs.com/resource-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

# 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="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FDH8JxxueBc2XIdE6p1Hg%2Fimage.png?alt=media&amp;token=4c510704-6544-43fe-bddc-62f747710f13" 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.