Prerequisites

The.com BasicsCSS

Intro

Search.io makes adding a site search feature to your website fast to set up and easy to implement. Their custom AI search engine ensures accurate results with real-time search, making a delightful search experience for your customers.

It is free to get started and you can select from their pricing plans to suit your needs. If you just want to experiment and play around with their product, signing up puts you into the free trial.

Why Use Search.io

The main use case for using Search.io is if you want to add search functionality to your website. Examples of this include searching over blog articles, product listings, job postings, etc. 

Basically, Search.io crawls your website so that you can search across all pages on your website.

Getting Started

To get started, sign in or sign up with Search.io.

If you don't have any domains connected, you will see something like this. Click to get started under the "Crawl your website" section and follow the prompts to set up search.

1. Click "Get started" under the "Crawl your website" section.
2. Type in your collection's name. This name must be at least 2 characters, start with a letter and contain only lower case letters, numbers or hyphens.
3. Type in your domain name. 
4. Choose a language and click "Choose language and finish."

Search.io will the crawl your site for pages. This make take some time, once it is finished, click "Go to collection" and you'll be taken to your dashboard.

You can preview your search results by clicking on "Preview" on the left-hand menu.

This will show all the pages that Search.io was able to scrape on your domain. In the example above, you can see that there are 47 results and it shows the page title and description (based on the page's meta elements information) and the URL.

The next step is to make this search accessible on your site. 

Adding Search on your Site

After setting up your collection, you will be adding 

On the left-hand menu, click the "Search Interface" option under the "Integrations" header. There are two ways to show this search feature, both of which can be access here.

The first is by a results page, where the search will take you to a distinct page. 

The second is by displaying the search results as a overlay on the current page.

Both ways are similar to set up though there are slight differences in configuring their settings. 

Results Page

Configuring the Results Page

After clicking on "Search interface" you'll be brought to this page where you can configure your search results page on the left of the screen and see a preview of it on the right side of the screen. 

You can add filters, change how search results are sorted, change the page's URL, and change some basic color styles.

Type in a value for the page URL like "/search" or something. The search will redirect here once submitted. This is important for setting up the embed codes later.

Once you have configured this page, click the "Install" button in the bottom left corner of this page. You will be shown two code snippets. 

1. Embed Search Input

1. Copy the snippet.
2. In The.com, choose a place to add this snippet. I'd recommend doing it in a block that appears on all pages of your site. For this demo, I chose to use the Nav block.
3. Create a Div to act as a container element for this snippet.
4. Create a nested Raw HTML element inside that Div and paste the snippet.
5. Create a Stylesheet element and copy and paste in the CSS below to remove unwanted elements. Feel free to edit this CSS to customize the search element. Note: the CSS classes that are generated from Search.io may be different. If so, you can find them through your browser's inspect element tool. Simply replace the classes in the CSS snippet below.

The CSS code to remove and style elements:

/* Margin fix so the search is inline with the other links */
.css-3on4s {
  margin-bottom: 0px;
}

 /* Fix to remove certain elements from view */
 .css-3on4s label, .css-1mup3vt, .css-18oddtn, .css-3on4s h6, .css-3on4s ul, .css-3on4s footer {
  display: none;
 }

 /* Fix embed container styles */
 div[role="combobox"] {
  display: flex;
  align-items: center;
  border: none;
 }

 /* Styles for the input field */
 input[type="search"] {
  padding: 5px;
  margin-left: 5px;
  font-size: inherit;
  font-family: inherit;
  text-transform: uppercase;
  border: solid black 1px;
  position: relative;
  width: auto;
  height: auto;
 }

Once you do this, if you deploy any pages that include this update block, the search functionality will not work because we have to set the second code snippet.

2. Embed Search Results

1. Copy the second code snippet.
2. Create a new page on your The.com site and give it a name like "Results Page."
3. In this page, add the Block that contains the code snippet from part one. If you don't do this, the results page will not work. In this demo, I've added the Nav Block to this new page.
4. Create a Div to act as a container for the code snippet.
5. Create a nested Raw HTML element inside this new Div. You will see an error message appear. This is because the editor's domain is different from the domain you specified in Search.io. If you deploy this page and open it, you will see the results show up. 
6. You can style the container div to give the results section some more space along the sides.

Remember to deploy all your pages! You should then have a functioning search feature on your site.

Overlay

1. Type in an HTML element selector that you want to trigger the overlay search (use CSS syntax). In this example, our triggering element is a link (<a>) tag with the class of "search-trigger."
2. Click the "Install" button in the bottom left of this page.
3. Copy the code snippet.
4. In The.com, choose a place to add this snippet. I'd recommend doing it in a block that appears on all pages of your site. For this demo, I chose to use the Nav block.
5. Create a Div to act as a container element for this snippet.
6. Create a nested Raw HTML element inside that Div and paste the snippet.
7. Now, we need to create the triggering element. For the purpose of this demo, we will be adding a link on the right side of the main nav links. Navigate to the right-most link in the editor and duplicate it.
8. Replace the link text to "Search" and the href attribute to "#". 
9. Click to open the link's corner menu and then click "Attributes."
10. Type in "search-trigger" into the link's class attribute cell.
11. Deploy all pages.

Once your site has been deployed, clicking on that link will open the overlay, where you and customers will be able to search the site.

Conclusion

Now that you've successfully installed Search.io on your website, your users will be able to seamlessly search through your site for items, keywords, other pages, etc.