Skip to content

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:

<script type="module" src="https://embed.direqt.ai/embed.js?id=YOUR_BOT_ID" async></script>

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:

<direqt-search-results></direqt-search-results>
That's it! Your search results page is ready for use.

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:

<direqt-search></direqt-search>