Back
Step 3: (Optional) Search Snippet Generator
To make the process quick and seamless for adding a search bar, the Search snippet generator will automatically populate the fields below with the variables from your account. The snippets provided in the Yext platform will include all three steps of initializing the library, placing, and styling the search bar. This is currently only available for the static search bar, and not the overlay option. The platform snippet generator will also provide snippets for creating the search results page using the JS Snippet integration option.
Follow the steps below for how to use the Search snippet generator:
Click Search in the navigation bar. Then click on your experience and select Experience Details. On the Experience Details page, click on Integrate Search on your Site under the Integration section.
Add Search Result. Select the site you want to integrate and the integration type you want to use.
If you select the JS Snippet approach, this will provide a code snippet to add the Search experience to your search results page that you can use in the Creating Search Results Page Search Integration Guide. Check out the JS Snippet approach for instructions on where to place this code snippet.
If you select the Subdomain approach, you will not need a code snippet to create your search results page.
- Add Search Bar. Enter the Search Results Page URL - the URL where you will be hosting your search results, or verify the URL indicated.
This will provide two code snippets to add the Yext Search Bar. The Search Bar JS Snippet at the top can be used in Step 1 of this guide to initialize the library. The second Search Bar Markup code snippet can be used in Step 2 of this guide to place the search bar.
Note that the Search snippet generator will not include optional properties by default. If you want to use any optional properties specified in the Appendix, such as the querySource property, you should add it in manually.