How to add AI summaries to your site search

Overview

Summairize installs like any other embedded widget. You add a lightweight script that hooks into your existing search form or the results container you render today. It sends the visitor's query to the Summairize API and injects a summary module above or beside the native list of links.

Basic integration steps

1. Sign up and verify your domain. Use DNS or meta tag verification so we know which public content belongs to you.
2. Let Summairize crawl your public content. Point us at your sitemap or provide include/exclude paths. We only index the pages you approve.
3. Add a JS snippet to your search results page. The snippet listens for queries, calls the API with your publishable key, and renders summaries where you want them.

• data-api-key- Use the publishable key from the Keys page. It scopes requests to the domains you approved.
• data-input-selector- Point this at the text box where visitors type their search. When we know the typed query, we can tailor the summary to that phrase instead of guessing from the results.
• data-results-selector- Target the container that holds your list of search-result links. We scan those links to understand which pages were surfaced and to cite them in the summary.
• data-summary-selector- Set this to the wrapper element where you want the generated summary to render. By specifying the class, you can apply custom styles or layout rules to the block.

Calling the API directly

Prefer to manage rendering yourself? Call the Search Summary API straight from your front end. Provide the visitor's query plus the list of links you surfaced so the response can cite those sources.

const searchInput = document.querySelector("#site-search");
const resultsList = document.querySelector("#search-results");
const summaryMount = document.querySelector("#search-summary");

async function fetchSummary({ searchTerm, urls }) {
  const response = await fetch("https://api.summairize.ai/search/summary", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Publishable-Key": "YOUR_PUBLISHABLE_KEY",
    },
    body: JSON.stringify({ searchTerm, urls }),
  });

  if (!response.ok) throw new Error("Failed to fetch summary");
  return response.json();
}

searchInput?.addEventListener("input", async (event) => {
  const searchTerm = event.target.value.trim();
  const urls = Array.from(resultsList.querySelectorAll("a")).map((link) =>
    link.href
  );

  if (!searchTerm || urls.length === 0) {
    summaryMount.innerHTML = "";
    return;
  }

  summaryMount.innerText = "Generating answer...";

  try {
    const { summary } = await fetchSummary({ searchTerm, urls });
    summaryMount.innerHTML = summary;
  } catch (error) {
    console.error(error);
    summaryMount.innerHTML = "Sorry, we couldn't load a summary.";
  }
});

Best practices

• Debounce user input if you fire summaries while the visitor is typing.
• Show a lightweight loading state inside your summary container so users know the request is in flight.
• Handle API errors gracefully and fall back to your default search experience.

Next steps

Ready to wire it up? Talk with our team to scope your rollout or see the experience in our live demo.