Custom Ask AI Search Button

Open the chat from your own search bar with the shopper's query using LoopsAI.openWithSearch.

When a shopper types in your search bar and clicks Ask AI, open the assistant with that text. The chat starts a fresh product search from the query you pass in.

There is one method for this:

window.LoopsAI.openWithSearch("running shoes for wide feet");

It opens the panel and runs the query as a new search. window.LoopSmartAI.openWithSearch(...) is the same method (legacy alias).

Recommended: call it from your own button

This is the standard pattern — you own the search field and the Ask AI control, and the only Loops AI touchpoint is one function call in your click handler. You keep full control over where the button sits, how it looks, and when it appears.

<form id="site-search" onsubmit="return false;">
  <input id="search-input" type="search" placeholder="Search products" />
  <button type="button" id="ask-ai-btn">Ask AI</button>
</form>

<script>
  const input = document.getElementById("search-input");

  function askAI() {
    const query = input.value.trim();
    if (!query) return; // never send an empty query
    window.LoopsAI?.openWithSearch(query);
  }

  document.getElementById("ask-ai-btn").addEventListener("click", askAI);
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      askAI();
    }
  });
</script>

function AskAiButton({ searchInputRef }) {
  function askAI() {
    const query = searchInputRef.current?.value?.trim() ?? "";
    if (!query) return;
    window.LoopsAI?.openWithSearch(query);
  }

  return (
    <button type="button" onClick={askAI}>
      Ask AI
    </button>
  );
}

Reveal the button when there is a query

A natural pattern is to show the Ask AI action only while the search field has text — it reads as an upgrade from keyword search into the assistant. Always trim and guard against an empty query before calling openWithSearch.

Timing: make sure embed.js is ready

openWithSearch becomes available once embed.js has booted (window.LoopsAI.live === true). For a button the shopper clicks after the page has settled, the optional-chaining guard (window.LoopsAI?.openWithSearch) is all you need.

If a click could land before the script finishes loading, queue the call instead — the queue runs the moment the embed boots:

function askAI(query) {
  if (!query) return;
  if (window.LoopsAI?.live) {
    window.LoopsAI.openWithSearch(query);
  } else {
    (window.LoopsAI = window.LoopsAI || { q: [] }).q.push(["openWithSearch", query]);
  }
}

No-code alternative: let Loops AI inject the button

If you would rather not write any JavaScript, Loops AI can find your search input and inject the Ask AI button for you. Mark the input (or its wrapper) with data-loopsai-search:

<div data-loopsai-search>
  <input type="search" name="q" placeholder="Search products" />
</div>

Then enable the search button for the web channel in the configurator. The embed locates the field, injects the button, and wires openWithSearch automatically. If you can't add the attribute, point the configurator at a custom CSS selector for the input instead.

Use one path, not both

The injected button and your own button call the same method. If you build your own (the recommended path above), keep the built-in injection off so two buttons don't appear — turn it off in the configurator, or pass searchButtonEnabled: false in init. If you rely on the injected button, you don't need any of the code above.

Advanced: postMessage

If you can't reach window.LoopsAI on the host page (rare), post a message into the widget iframe:

interface SearchEscalationMessage {
  action: "searchEscalation";
  query: string;
}

Prefer openWithSearch() — it opens the panel and syncs the query in a single call.

Checklist

Step	Done when
Pick one path	Your own button or the injected button — not both
Your button calls the API	`LoopsAI.openWithSearch(trimmedQuery)` on click / Enter
Empty query guarded	No call when the field is blank
Built-in injection off (if using your own)	`searchButtonEnabled: false`, or off in the configurator

Troubleshooting

Nothing happens on click — Check typeof window.LoopsAI?.openWithSearch === "function". If it's undefined, embed.js hasn't loaded or init failed (verify agentId and CSP).
Two Ask AI buttons — Both paths are active. Turn off the built-in injection (configurator, or searchButtonEnabled: false).
Query missing in chat — Make sure the string is non-empty after trim().

See also JavaScript API and Host Integration API.