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

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.