Winnow
AboutPricingDocumentationSign in
Sign up

Adding Winnow to any site

Goal of this tutorial

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

Part 1: Creating an account

On winnow-sear.ch, click on Sign up in the upper right corner. You will be taken to a page where you can enter your e-mail address. Once done, you will be sent an e-mail with a link that can be used to log in. Once you have logged in, you will be able to add your site.

We only support signing up and in with your e-mail address and the use of so-called "Magic Links" rather than traditional username/password authentication. You will therefore follow the same process when you later want to log in again too.

Part 2: Setting up Winnow

Once you have clicked the link sent to you per e-mail, you will arrive on a page where you can add your site by entering your websites URL (for example: bobs-watermelons.com). We will then go ahead and crawl your website and ready a search index for it that you can then use on your site.

In order to have your website users be able to search your site, you need to add a script to your website that will load the search interface. You will be presented with a script that is tailoer to your since once your site has been added.

If you do not know how to proceed from here, please contact us, and we will do our best to help you out!

Part 3: Activating the search interface

Winnow Search 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 Winnow

The preferred method of activating Winnow Search 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).

Adding 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 a developer, or someone who isn't afraid of writing some code, then you can also use one of our custom ways of activating Winnow Search. With the script tag loaded on your site, you will have the Winnow 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 winnowReady = false;

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

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

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

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

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

With the Winnow Search 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.

Congratulations!

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