Add SearchCue to any site

What this guide covers

This guide adds SearchCue to a site by using a script tag. For a WordPress site, use the WordPress setup guide.

Part 1: Create an account

At searchcue.com, select Start free. Enter your email address. Open the sign-in link that SearchCue sends to you, then add your site.

SearchCue uses email sign-in links instead of passwords. Use the same process each time you sign in.

Part 2: Set up SearchCue

Enter your site URL, such as bobs-watermelons.com. SearchCue then crawls the site and prepares its search index.

Add the SearchCue script to the site so that visitors can use search. SearchCue provides a script for your site after you add it.

If you need help, contact support.

Part 3: Activate the search interface

Use one of these methods to open SearchCue:

• Add a link whose destination is /search.
• Add an input with a type of search.

Link to /search

The simplest method is a link to /search:

<a href="/search">Search</a>

To open SearchCue with a query already filled in, add the preferred mnc-search parameter:

<a href="/search?mnc-search=delivery+times">Search delivery times</a>

/search and ../search links can also use q.

If a link has both parameters, mnc-search takes precedence.

The following destinations open the same query:

• search:delivery%20times
• search://delivery%20times
• http://search:delivery%20times
• https://search:delivery%20times

Style the link to match your site. You can also add a custom SVG icon, such as one from Heroicons.

Add a search input

To add a search input, use this HTML:

<input
  type="search"
  placeholder="Search my site"
  style="width: 300px; border: 1px solid #ccc; padding: 0.5rem; border-radius: 4px"
/>

Programmatic activation

Developers can also activate SearchCue programmatically.

The script exposes the SearchCue object on window. Contact support if you need help with this API.

For example, this code uses an input with the ID search and renders results in an element with the ID results:

<script type="module">
  let searchcueReady = false;

  function tryInitialiseSearch(input) {
    const mount = document.getElementById("results");
    if (!mount || !window.SearchCue)
        return false;

    window.SearchCue.createCustomInterface(input, mount);
    return true;
  }

  function handleFocus(event) {
    const {target} = event;
    if (searchcueReady || target.id !== "search")
        return;

    try {
        searchcueReady = tryInitialiseSearch(target);
        if (searchcueReady)
            document.removeEventListener("focusin", handleFocus);
    } catch (err) {
        console.error("Failed to initialise SearchCue:", err);
    }
  }

  document.addEventListener("focusin", handleFocus);
</script>

Part 4: Customise SearchCue

Use the design and page exclusion editors in the SearchCue admin interface to customise search.

Get help

Contact support if you cannot complete a step or need help with a custom setup.