How to Add AI Answers to Your Existing Website Search Box

You can add AI answers to your website without replacing your search box. Install the SiteGPT widget, then pass the visitor's text to it with one line of JavaScript: window.$sitegpt.push(['do', 'message:send', query]). It is a small code change. The query opens a chat answer, with no results page.

Your search engine keeps working. Visitors with a question get a direct answer, and visitors who want a list still have one.

What will the visitor actually see?

The visitor sees a chat window open, with their query as the first message and an answer below it. They can ask follow-up questions in the same window, because SiteGPT uses the recent conversation to rewrite each search.

SiteGPT answers in a chat window. It returns no page of ranked links and has no documented search bar widget. If a visitor wants to scan ten results, they still need your search page.

What do you need before you start?

You need three things: a trained chatbot, the install snippet on the page, and permission to edit the page's JavaScript. The code itself is short.

1. A chatbot trained on what your search covers. Add your website or sitemap as a source. How to create an AI chatbot covers training from scratch.
2. The widget on the page. In your chatbot's sidebar, open Installation, then copy the JavaScript Embed. Paste it in the <head> or just before </body>. On WordPress, follow how to add a chatbot to WordPress.
3. The Manager role or higher on the chatbot, which the install page requires.

The snippet creates the window.$sitegpt command queue, and your code pushes commands onto it. Always copy the code from your Installation page, because it contains your real chatbot ID. The general form from the install docs is:

<script type="text/javascript">window.$sitegpt=[];(function(){d=document;s=d.createElement("script");s.src="https://sitegpt.ai/widget/YOUR_CHATBOT_ID.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>

The widget SDK docs say to push commands after this snippet, because commands pushed before it are lost. Place your search code after it in the page.

Before you write any code, test ten real queries from your search logs in the dashboard preview. If the answers are weak, fix the content first. A new entry point will only send more visitors to the same weak answers.

Which pattern should you use?

Pick the pattern that matches how much of your search traffic is questions. If you do not know yet, start with the Ask AI button.

Conversational search vs site search shows how to classify a sample of your queries first. That takes under an hour and tells you which row you are in.

How do you add an Ask AI button beside the search box?

Add a button next to your existing submit button, then send the input's value when it is clicked. The form still submits to your results page as before.

Your markup will differ. Here is a typical form with one addition, the type="button" element:

<form id="site-search" role="search" action="/search">
  <input id="site-search-input" type="search" name="q" placeholder="Search" />
  <button type="submit">Search</button>
  <button type="button" id="ask-ai">Ask AI</button>
</form>

The button needs type="button", or a click will also submit the form. Then add this script after the install snippet:

<script>
  document.getElementById('ask-ai').addEventListener('click', function () {
    var query = document.getElementById('site-search-input').value.trim();
    if (!query) return;
    window.$sitegpt.push(['do', 'message:send', query]);
  });
</script>

The message:send command sends the text as the visitor and opens the chat if needed. It can run as soon as the widget script loads, so you do not have to wait for the chat window.

If the visitor clicks with an empty box, you may prefer to open the chat with the cursor ready. Replace return with this line, which uses the documented focus option:

window.$sitegpt.push(['open', { focus: true }]);

How do you add a zero-results fallback?

Show an offer on your results page when your search finds nothing. This spends the fewest messages. It reaches visitors right after a search finds nothing.

Add this block to the empty state of your results template. How you detect zero results depends on your platform, and most templates already have a branch for it:

<div id="no-results">
  <p>No pages matched your search.</p>
  <button type="button" id="ask-instead">Ask the assistant instead</button>
</div>

<script>
  document.getElementById('ask-instead').addEventListener('click', function () {
    var query = new URLSearchParams(window.location.search).get('q');
    if (!query) return;
    window.$sitegpt.push(['do', 'message:send', query]);
  });
</script>

Change 'q' to the parameter your site uses. WordPress uses s, for example, so check your own results URL.

Wait for a click before sending. An automatic send would spend a message on every failed search, including typos and bot traffic. It would also open a chat the visitor did not ask for.

How do you send every search to chat?

Intercept the form's submit event and pass the query to the widget. Use this only when your traffic is mostly questions. Visitors lose the results list.

<script>
  document.getElementById('site-search').addEventListener('submit', function (event) {
    var query = document.getElementById('site-search-input').value.trim();
    if (!query || !window.$sitegpt) return;
    event.preventDefault();
    window.$sitegpt.push(['do', 'message:send', query]);
  });
</script>

The return line keeps your normal search working. If the box is empty or the widget snippet is missing from the page, the form submits normally and the visitor reaches your results page.

Each new query continues the current conversation by default, which suits follow-ups. If you want each search to begin clean, the SDK documents ['open', { reset: true }], which starts a new conversation as the window opens. Test that order on your own site before you rely on it.

Can the chat sit on the page instead of floating?

Yes. The inline container places the chat in a box on your page, which suits a dedicated help or search page. On the Installation page, copy Inline Container and paste it where you want the chat:

<div class="sitegpt-chat-widget" data-sitegpt-id="YOUR_CHATBOT_ID" style="width: 100%; height: 600px;"></div>

The inline snippet loads the script with ?hideBubble=true, which hides the floating icon. Remove the normal JavaScript embed from that page, or the icon can still show. To keep the floating window while hiding the icon, the hideButton=true option lets your own button open the chat through the SDK.

Should you send the query or prefill it?

Send it when the query reads like a complete question. Prefill it when the visitor may want to add detail.

// Sends at once and the chatbot answers
window.$sitegpt.push(['do', 'message:send', query]);

// Fills the message box and waits for the visitor
window.$sitegpt.push(['set', 'message:text', query]);

Short keyword queries are the main reason to prefill. "Refund" works in a search box, but a visitor may get a better answer from "How long do refunds take on annual plans?" Prefilling gives them the chance to write that.

What are the limits to plan for?

Plan for five limits before launch. They all come from the SiteGPT docs.

It uses your message allowance. Each query you send counts against your plan, so full handover on a busy site can use it quickly. Starter includes 4,000 GPT-4.1 mini messages a month, or 400 GPT-4.1 messages. Check your search volume against the pricing page before you choose a pattern.

Exact codes can rank lower. Retrieval works by meaning. The docs say exact codes or rare names can rank lower than passages with similar meaning, so part numbers and error codes should stay on keyword search.

It has no live data. SiteGPT takes no actions on live systems during a chat. It cannot check order status, stock levels, or customer accounts. Point those queries to the page where the visitor can see the information.

Source links are broad. The widget can show links to matching web pages. The docs say a link can appear even if the AI did not use that page, and files and custom responses have no links.

Page rules still apply. Commands do nothing if the install snippet is missing or the page is in Excluded Pages, and the widget will not load on a domain outside Allowed Domains. Visitor messages are limited to 4,000 characters, and longer text shows an error.

Plan for one more thing: some queries will have no answer in your content. SiteGPT then sends your fallback message and logs the question as unanswered. Edit that message so it points back to your search page.

How do you test it before launch?

Run these checks on a staging page, then again in production.

• Open the page in a private window and confirm the widget loads.
• Submit a real question and confirm the chat opens with the query as the first message.
• Press Enter in the box and confirm the expected path runs.
• Click Ask AI with an empty box and confirm nothing is sent.
• Remove the snippet on a test page and confirm the form still reaches your results page.
• Test on a phone, where the chat covers more of the screen.
• Check that any page in Excluded Pages behaves as you expect.

To measure use, the SDK offers events such as message_sent and conversation_started. Attach a listener and send them to your analytics:

function trackAskAi() {
  // Send an event to your own analytics tool here
}
window.$sitegpt.push(['on', 'message_sent', trackAskAi]);

After launch, read the unanswered questions weekly. They show which pages to write next, and chatbot metrics explains what else to track.

Still choosing between tools? Algolia alternatives and Coveo alternatives compare answer tools and search engines by job.

Frequently asked questions

Can I add AI answers without replacing my site search? Yes. Keep your search box and your search engine. Install the SiteGPT widget, then pass the visitor's text to it with the widget SDK command window.$sitegpt.push(['do', 'message:send', query]). It is a small code change. The query opens a chat answer, with no results page.

Does SiteGPT return a search results page? No. SiteGPT is a chat window. The query appears as the visitor's message, and the answer appears in the chat. SiteGPT has no documented search bar widget or results page. Your own search box stays in place.

What is the difference between message:send and message:text? ['do', 'message:send', text] sends the text as the visitor, so the chatbot answers at once. ['set', 'message:text', text] fills the message box without sending, so the visitor can edit first. Both open the chat if needed.

Do I need the API or a paid developer plan? No API token is involved. The widget SDK is the window.$sitegpt command queue that the install snippet creates. API v2, the CLI, MCP, and the SDK packages need the Growth plan or above. The widget SDK page names one plan requirement: identifying signed-in visitors needs Growth or above.

Will this use up my message allowance? Yes. Every query you send to the chat counts as a message on your plan. A busy search box can use an allowance quickly, so an Ask AI button or a zero-results fallback spends fewer messages than sending every search.

Is there a length limit on the query? Yes. Visitor messages in the chat widget are limited to 4,000 characters, and longer text shows an error. A search box query will rarely reach that limit.

Can the chat appear on the page instead of as a floating window? Yes. The inline container places the chat in a box on your page. Add a div with the class sitegpt-chat-widget and your chatbot ID, and load the script with hideBubble=true. Copy the code from the Installation page.

Will this work with Algolia, Coveo, or my CMS search? Yes, as long as you can run JavaScript on the page and read the input's value. The pattern reads text from your own input element, so it does not depend on the search engine behind it.

Can the chatbot look up orders or stock from the search box? No. SiteGPT takes no actions on live systems during a chat. It cannot check order status, stock levels, or customer accounts. It can link visitors to the page where they can see that information.

Sources

• Widget SDK, SiteGPT documentation. Commands, sequencing, events, and limits.
• Add to website, SiteGPT documentation. Install snippet and script options.
• Control where the chat appears, SiteGPT documentation. Inline container, Excluded Pages, and Allowed Domains.
• How answers work, SiteGPT documentation. Retrieval, sources, fallback messages, and live systems.
• Plans and limits, SiteGPT documentation, and SiteGPT pricing.