Go to UI Builder section in ReactiveSearch Dashboard and click on Searchbox sub-section

Define Searchbox ID (unique identifier) and description [optional], searchbox ID can be used in ReactiveSearch API to apply the suggestions settings.  Read more at [https://docs.reactivesearch.io/docs/search/reactivesearch-api/reference/elasticsearch/#searchboxid](https://docs.reactivesearch.io/docs/search/reactivesearch-api/reference/elasticsearch/#searchboxid)

Back to Searchboxes
*Searchbox Id
Searchbox Description
*Searchbox Credentials
Choose an existing API credential
Design and LayoutPopular SuggestionsRecent SuggestionsEndpoint Suggestions
Design
Theme
Light
Text color
Accent color
Voice search
Highlight
Display Suggestions
Featured
Popular
Recent
Endpoint
Design elements are only testable with live preview
Add Section

No sections/ suggestions present

Select an existing API credentials or create a new one at 'Dashboard -> API Credentials' section. We recommend using read-only credentials for your public applications. Read more at [https://docs.reactivesearch.io/docs/security/credentials/](https://docs.reactivesearch.io/docs/security/credentials/)

In this step we would create a section, a section is a collection of featured suggestions.

Define section label to be displayed in searchbox UI

Let's create a featured suggestion for `Quick start guide` section

Fill all the fields to define a suggestion to feature react integration with Reactivesearch

Create second suggestion to feature vue integration with Reactivesearch

We have added two featured suggestions, let's have a look at what we build so far by clicking on Live Preview.

You can view all the featured suggestions when searchbox is empty

Let's search with some value, and you can see the relevant suggestions.

React Integration
Step-by-step guide to build search UI with ReactiveSearch React

Configure popular suggestions, popular suggestions are the most searched queries by all the users. Read more at [https://docs.reactivesearch.io/docs/analytics/popular-recent-suggestions/](https://docs.reactivesearch.io/docs/analytics/popular-recent-suggestions/)

Let's check live preview, when we search for same value you can see the popular suggestions with trending icon at bottom

Live Preview
Quick start guide
React Integration
Step-by-step guide to build search UI with ReactiveSearch React
Vue Integration
Step-by-step guide to build search UI with ReactiveSearch Vue
s
s is for silence
nick & norah's infinite playlist

Let's configure recent suggestions. Recent suggestions represent the last searched queries by a particular user. Read more at [https://docs.reactivesearch.io/docs/analytics/popular-recent-suggestions/](https://docs.reactivesearch.io/docs/analytics/popular-recent-suggestions/)

Click on the Live Preview and view recent suggestions in action with history icon.

In this step, we would configure endpoint suggestions. Endpoint suggestions allow you to fetch suggestions from any URL. We would be querying an elasticsearch index named `reactivesearch_docs`  which contents the reactivesearch documents data.

Define endpoint URL and method to fetch suggestions data. Body and headers are optional, if not defined then they would be inherited from the search request.

Define a method in Javascript to transform endpoint response to the suggestions response accepted by ReactiveSearch. Transform response should return an array of suggestions with `label` and `value` propterties.

Define the transform response function in Javascript. You can view the endpoint data in execution context. The transform response method would transform the endpoint data to an array of suggestions with `label` and `value` properties.

Click on the play button to validate transform response method

You can verify the transformed response and save it

Click live preview, you should see the endpoint suggestions after featured suggestions with search icon

Adjust theme settings, in this step we're changing the Searchbox theme to `Dark`.

Step-by-step guide to build search UI with ReactiveSearch React

We have configured our searchbox for document search. Let's save it, so you can embed it in your application.

The final step is to embed the copied snippet in your application.

Netlify

Codepen

Hotjar

Appbase

deploy-preview-596--arc-dashboard.netlify.app

codepen.io

vars.hotjar.com

dash.appbase.io

Step-by-step guide to create a document search experience with featured, popular, recent and popular suggestions using ReactiveSearch dashboard.

SearchBox(ES/OpenSearch) workflow