How to integrate a search bar using the Search Snippet Generator and React?

Search Best Practices - Integration
1

First and foremost, I’d like to thank you for taking the time to delve into this topic.
Currently, we are deeply involved in an integration project, leveraging React. To illustrate this process, let me provide you with a concrete example. Imagine a scenario in which a user interacts with the following search bar:

MicrosoftTeams-image (10)
MicrosoftTeams-image (10)1121×316 19.4 KB

Our goal is to redirect the user to the search bar on the main page.

Essentially, we’re looking for a way to guide the user from one search bar to another while maintaining consistency in design and functionality. In this context, we are exploring how to achieve this using React and the Search Snippet Generator. If you have any ideas or suggestions on how to tackle this task, we would greatly appreciate your input.

2

Hey Kendal,

Thanks for posting in the community!

Unfortunately our React libraries do not support the iframe snippet integration method yet, though we are planning on building support for this in the upcoming months.

In the meantime there are a few options:

  1. If the site you are integrating on is already built in React, you should be able to just insert the Search code directly into the page.

  2. Assuming that’s not the case, you can also use the “subdomain” method outlined here where Yext can host the search results page, and build that in React to easily integrate with the Search experience you’ve already built.

  3. If neither of these approaches work for you, you can choose to build the frontend using the Hitchhiker Theme instead of with React. This method supports the JS Snippet integration method you are asking about.

I hope this helps!

Best,

Daniel

3

Thank you for your assistance! We appreciate your guidance on this topic. Do you have any documentation or guide to implement point 1 you mentioned? We look forward to exploring these options. Thanks again!

4

Point 1 above is just building the search experience directly into the page. The guides we have for this are as follows:

1 Like
5

Hi Daniel, thank you so much for all the answers!

I’m currently working with Kendal on this project, and what we need is basically a search bar that redirects to a search page already hosted by Yext with the subdomain option search.page.com for example. The thing is investigating the component seems that does not have a prop for redirecting to a URL as the js snippet code does with redirectUrl: “{$url}”.

Do you know if there is any way to make this possible?

Thank you so much again! Appreciate your help!

6

Hey Joseph,

You’re correct in that I don’t believe our Search UI React components have the ‘redirectUrl’ property like the JS Snippet code does.

What I recommend doing is if you are using the SearchBar component, you can make use of the onSearch prop and build your own routing logic to handle your use case. Here is some external documentation on how you might do that.

1 Like