Manual setup

Goal of this tutorial

This guide helps you add SearchCue to a site by installing the script tag yourself. If you are using WordPress, use the WordPress setup guide instead.

Part 1: Create an account

On searchcue.com, click Start free in the upper right corner. Enter your email address. We will send you an email with a link you can use to sign in. After you sign in, you can add your site.

SearchCue uses email magic links instead of passwords. Use the same process when you want to sign in again.

Part 2: Set up SearchCue

After you click the email link, add your site URL, for example bobs-watermelons.com. SearchCue crawls your website and prepares a search index that you can use on your site.

To let visitors search your site, add the SearchCue script to your website. You will get a script tailored to your site after the site has been added.

If you do not know how to proceed from here, contact us. We will help.

Part 3: Activate the search interface

SearchCue can be activated in a number of different ways:

any link that has the destination of /search, will open up the search interface
any input of type search will automatically be upgraded to use SearchCue

Link to `/search`

The preferred method of activating SearchCue is through a link to /search. The link might look something like this:

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

(you can of course style it as you please, or even add a custom SVG icon, for example from heroicons, to make it match your brand and style).

Add a search input

If you prefer to have a search input on your website, you can add one, with the following HTML:

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

Programmatic activation

If you are comfortable writing code, you can also activate SearchCue programmatically. With the script tag loaded on your site, you will have the SearchCue object available under window. Take a peek at what's available there, and feel free to contact us if you want some guidance.

For example, you can do something like the following, to have any input with the id of search render the search result into a DOM node with 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: Tweak SearchCue

With the SearchCue integration added to your site, make sure you also check out the other features we offer in our administrative interface like the design and page exclusion editors.

You are ready

This concludes our tutorial. Please do not hesitate to contact us if you got stuck anywhere along the process of adding, using, or customizing SearchCue. We love to see people use our search engine in creative ways, and we are happy to help with unusual setups.