Create a search interface with the search widget

The search widget provides a customizable search interface for web applications. It requires minimal HTML and JavaScript to implement and supports common features like facets and pagination. You can also customize the interface with CSS and JavaScript.

If you need more flexibility, use the Query API. See Creating a search interface with the Query API.

Build a search interface

Building the search interface requires these steps:

  1. Configure a search application.
  2. Generate a client ID for the application.
  3. Add HTML markup for the search box and results.
  4. Load the widget on the page.
  5. Initialize the widget.

Configure a search application

Each search interface requires a search application defined in the Admin console. The application provides query settings, such as data sources, facets, and search quality parameters.

To create a search application, see Create a custom search experience.

Generate a client ID for the application

In addition to the steps in Configure access to the Cloud Search API, generate a client ID for your web application.

Configure a project

When configuring the project:

  • Select the Web browser client type.
  • Provide the origin URI of your app.
  • Note the client ID. The widget doesn't require a client secret.

For more information, see OAuth 2.0 for Client-side Web Application.

Add HTML markup

The widget requires these HTML elements:

  • An