Overlay Integration Button Placement

Search Best Practices - Integration
1

Hi team,

For the overlay integration, I was wondering if it is possible to include the search button in a navbar or header, rather than as a stand-alone icon in the bottom left.

I suspect this might mean using a custom button but wanted to run this by the team to see if there was a suggested solution. Thanks!

2

Hi @henry_kremer,

Thanks for reaching out. You’re correct that using a custom button is the best method to accomplish this. By creating a custom button to trigger the overlay rather than our out-of-the-box button, you can place it where you would like in the navbar within the HTML of your existing website.

To have a custom button trigger the overlay, you will create the button and set up two top-level attributes within the overlay snippet as follows:

  • Create the button (within the HTML of your existing website) and give it a custom selector (either class or id): <button id="customOverlayButton"></button>
  • In your overlay init function, specify the custom selector in the customSelector attribute
  • Hide the out-of-the-box button by enabling hideDefaultButton: true in the top-level properties of the overlay snippet.

Visit this module to learn more about the Answers overlay and reach out with any further questions.

Best,
Alyssa

2 Likes