Monocle
Guide
Log in Register

End-to-End Tutorial Putting Monocle on my Website

Goal of this tutorial

At the end of this tutorial, we want to have Monocle in the Navigation bar of our Squarespace site. It should include a cool little search icon and enable my visitors to find anything on my site.

Part 1: Signing Up

  1. On monocle-search.com, click on “Register” in the upper right corner.
  2. Enter your email, a password, and any other information the form is asking for, and click on “Create an account”.

Part 2: Setting Up Monocle

  1. You’re in! Now you have to let Monocle know which site you want to have the search feature on. Put your site’s URL in the “URL” field. Attention you can only use sites that are public (and not behind a password)! For the purpose of this tutorial, I’ll be using https://demo.monocle-search.com. Image of the form input for adding a site
  2. Choose your plan – for starters, it’s totally fine to go with the pre-selected Free trial. Just click “Next”.
  3. Success! While you’re digesting the next steps, Monocle is working away in the background and “indexing” your site, which means it’s reading and sorting all available content. You’re only two tasks away from having a blazingly fast search bar on your site now!
  4. First, add the script tag to your site. You should see the following instructions (with a different code in siteid): Image of instructions for how to add a script-tag to your Squarespace site Just click on the little clipboard in the upper right, or mark and copy the script. Now, head over to your Squarespace page and to to Pages → Website Tools → Code Injection. Now, paste the script in the Header sections like so: Image of instructions for how to add a script-tag to your Squarespace site Don’t forget to click “Save” in the upper left after you’re done!

Part 3: Implementing Monocle on your Site

In general, this bit gives you a ton of flexibility for how you want to make search look on your site. The trick is the following: you simply need to link to /search. If a user clicks on this link, the search interface will open immediately in the foreground. Magic!

  1. Since we want to have a Search link in the Navigation bar, we’ll create a “Link” in Squarespace. In the Main Navigation, click on the plus (+) icon and choose “Link”. Image showing how to add a search-link In the window that pops up now, write whatever you want people to click on – in our case, that is “🔎 Search”. Feel free to copy and paste from here! In the “URL” field, simply enter “/search”. It should now look like this: Image showing how to add a search-link Click “Save” in the upper right and you’re done!
  2. If everything worked as intended, you should now see the “🔎 Search” field in your navigation bar. Why don’t you go ahead and click on it? The search interface should pop up and you can find everything on your site! Image showing how the header would look

Congratulations!

This concludes this tutorial.

If you’re the artistic type, you can now style and adjust Monocle as you like, but that will be covered in another tutorial at a later time.