AI Search | Search Results Page¶
This guide will show you how to integrate AI Search onto a dedicated search results page on your site (e.g., example.com/search). Direqt will automatically redirect user queries to your specified URL and display search results on that page.
To set up AI Search on a dedicated search page, follow the steps below:
1. Create A Search Results Page¶
Use of this layout requires the existence of a search page on your website. If you don't yet have one, refer to your CMS documentation for creating a new page, or use an existing search results template if available.
2. Specify Your Search Page URL¶
In the Direqt console, go to Chatbot Settings < Customize. Locate the "Search Page URL" input box, and enter the URL of your website's search page in the box.
3. Add Your Embed Script¶
Paste your personalized Direqt embed script into either the <head>
or <body>
section of your HTML file.
This script will look something like this, with your unique bot ID in the id field:
Note
Your bot ID can be found in the Direqt console under "Chatbot Settings".
4. Add The Direqt Search Container¶
On your search results page, paste the following code where you want the AI Search interface to appear:
That's it! Your search results page is ready for use.(Optional) Using Your Own Search Bar¶
If you have an existing search bar on your site you'd like to use in conjunction with your search results page, add a new CSS class of direqt-search-input
to the search input.
For example:
Existing | New |
---|---|
<input type="text" placeholder="Search"> |
<input type="text" placeholder="Search" class="direqt-search-input"> |
All queries submitted to your search bar will now be redirected to your search results page.
(Optional) Adding Additional Search Bars¶
Your search results page will have a Direqt-provided search bar at the top of the page. If you wish to add an additional Direqt search bar to any other location on your site, e.g., your site header, place the element below into your site's HTML wherever you want the search bar to appear: