Search Widget

The Search widget offers a great solution for users who need to search your site or database. Search criteria such as titles, descriptions and tags are managed in a single Google spreadsheet.

Demo: https://demo.wocode.com/site-search

The Search widget can also be used with Dynamic Pages. For more information see our Dynamic Pages – Integrating Search Functionality document.

Tutorial Video

Setup

WIDGET PLACEMENT

Place the Search widget on your page where you would like the search field to appear. There are several search types, such as dropdown, results below search input field, and results on a new page. The search type you require may impact where you would like the widget to be placed on the page.
Only the search input field will be seen in the editor.
The search field will appear full width by default. To resize, use the blue grab handle on the bottom right of the widget container.
If you choose to make the search field more narrow than the default sizing, you may move the search field left or right by using the white grab handle on the left side of the container, or by right-clicking the widget and using the alignment tool.

WIDGET OPTIONS (CONTENT PART 1)

Unique ID: Unique IDs are required when multiple instances of the Search widget will be used on the same site.
Data Source: There are two options for data source – Google Sheets and Airtable. The sections below explain how to link each option…

ACQUIRING GOOGLE SPREADSHEET URL

Note that your Google Sheet will need to be published in order to function with the Search widget. See the Search Criteria Spreadsheet Setup section below for additional information.

To acquire your Google Spreadsheet URL, click Share in the upper right corner.
Copy the link. If no link has been created, you may need to create a sharable link.
Paste the link in the Google Spreadsheet URL field in the widget options in the Without Code builder.

ACQUIRING AIRTABLE TOKEN AND AUTHENTICATION URL

You will need two things to connect the Search widget to an Airtable. The following instructions will demonstrate how to acquire your Airtable Token and Airtable Authentication URL.

Airtable Token:

Go to your Airtable account page.
Copy your personal API key.
Paste this key into the widget option field Airtable Token.

Airtable Authentication URL:

Now to acquire your Airtable Authentication URL, visit https://airtable.com/api (make sure you are logged in beforehand).
Select the correct Airtable.
Click the Authentication link in the side menu (or simply scroll down the page).
Copy the curl URL.
Be sure to copy the URL only, and nothing before or after it.
Paste this URL into the Airtable Authentication URL field in the widget options.

SEARCH TYPES

Dropdown Search: This search type displays search results in a dropdown window. This is a simple display type that is great for smaller sites or databases. When large numbers of search results are likely, it is advised to use other search types.

Regular Search: This search type offers more options and significantly more power and flexibility. Use this search type if you wish to show search results on a new page or below the input field. Setting these search options is described below.

Search Form + Results Below Form: This search option displays all search results below the search input field. Any page content (text, images, etc) below the search field will be pushed downward to allow the search results to appear, regardless of the number of results. To set up this search type, simply place the widget on the page where you would like the search input field and results to appear. When considering page layout, keep in mind that search results will always appear below the search field.

Search Results on a New Page: This search type requires the use of 2 instances of the widget: one on the page where you want your search input field to appear, and one on a new page where you would like your results to appear. Setup is simple:

Search Input Field: Place a Search widget where you would like the search input field to appear. Select Search Type > Regular Search, then Regular Search Options > Search Input Only.
Linked to Page: Use the link option to link the widget to your search results page. This page must be another page on your site, and must contain a 2nd instance of the Search widget. In the Results Page window, select Existing Page > then select the page where your 2nd Search widget will be placed.
Search Results Widget: On the search results page, place the additional instance of the Search widget where you would like the search results to appear. In the widget options, select Search Type > Regular Search, then Regular Search Options > Results Container Only
The Search Results Placeholder represents the placement where your search results will appear on this page. The placeholder will not be seen when the page is published.

WIDGET OPTIONS (CONTENT PART 2)

Search Input Configuration: This opens a window with additional options…
Search Input Placeholder Text: This is the text that will appear in the search input field. You may use custom text here for other languages.
Display Submit Button: This option enables the button that is seen next to the search input field (this uses a magnifying glass icon by default).
Button Label: Choose from Icon, Label, or Icon + Label. The label options allow you to place custom text in the button area (with or without an icon)
The remaining settings in this section allow you to enter the custom Button Label text and custom Icon.
Search Results Configuration: This opens a window with additional options…
Result Columns: This sets the number of columns that the search results will appear in. Consider using more columns for potentially larger searches.
Number of Items Per Page: The total number of search result items displayed on the page.
Number of Description Words to Display: As the title implies, this sets the number of words that will appear in the search results. Consider using less words for searches that may require extensive space or number of results.
Show Results URLs: This toggle allows search result links to be displayed within the search results.

SEARCH CRITERIA SPREADSHEET SETUP

All the search data that the widget will utilize will be placed into the search criteria spreadsheet. The search is not “automatic”, meaning anything that you would like to appear in the search will need to be entered into the spreadsheet.

While you could enter all of the text from your entire site into the spreadsheet, it is likely more useful to use the search widget for a portion of your site, such as a staff directory, a list of vacation rentals, a product database or similar.

Here’s how to set up your spreadsheet:

Open the spreadsheet template.
Make a copy: Go to File > Make a copy. Name the copy and click OK (all default settings can be left alone).
You may edit this copy of the template as needed. This will become your master search criteria spreadsheet. Enter new titles, descriptions, tags, etc.
Note that images to be used in the search must be hosted on the web. An easy way to host your own images are to upload them to your site content. See the Uploading Images for Hosting section below for more information.
Publish to the web: Go to File > Publish to the web.
Leave all default settings as they are and click Publish.

UPLOADING IMAGES FOR HOSTING

Images used in the search must be hosted on the web. URLs for these images will be used in the spreadsheet to display in search results (this is optional). You may host images anywhere you like, such as Flickr or Dropbox. However, an easy way to host images is to upload them to your site content. Here’s how to do it:

Click Content in the sidebar menu, then click Manage Images.
Click Upload Images.
You may now upload images to your site content, in bulk if you like. Additionally, you may utilize folders for your images if you wish to keep things organized.
Once you’ve uploaded images, you will need to acquire the image URLs. Click any image. Next, click on the image name link below the image preview on the far right.
This will open the image in the browser. Copy the image URL.
Use this URL in the search criteria “Image” field.

WIDGET OPTIONS (DESIGN)

The design section offers extensive styling options for all aspects of the search – including fonts, icons, colors, etc. These settings will not be discussed here, as they are self-explanatory, and do as they are named.