Direqt | Implementing AI Search¶

This guide will show you how to integrate an AI search experience onto your site in minutes. When complete, your users will receive AI summaries and search results generated solely from your content through Direqt's AI Search UI.

Locating Your Bot ID¶

To begin, you'll need to locate the unique bot ID for your project. Your bot ID can be found in the Direqt console under the "Chatbot Settings" tab.

Adding The Embed Script¶

Next, add Direqt's embed script to your site's HTML.

Simply place the following script tag in either the <head> or <body> section of your HTML file:

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

Note

Remember to replace YOUR_BOT_ID with your actual bot ID.

Selecting Your Search Input¶

There are two ways to integrate AI Search on your site:

With your site's pre-existing search bar
With Direqt's search bar

Using Your Own Search Bar¶

Already have a search bar on your site that you'd like to keep? You can redirect user's queries to AI search with a small change to your existing search bar. Your search bar UI will remain unaltered (except for the placeholder text), but will now send users to Direqt's AI Search interface.

To redirect user queries to AI search, add a new CSS class of direqt-search-input to your existing search bar.

Existing	New
`<input type="text" placeholder="Search">`	`<input type="text" placeholder="Search" class="direqt-search-input">`

Direqt will use this class to identify the existing search input and take over the search functionality. You'll know the change was successful when the placeholder text of your search bar has been replaced with "Ask [Your Bot Name]".

Using Direqt's Search Bar¶

Don't have a search bar on your site yet? You can use Direqt's pre-built search bar for quick and easy setup.

To embed the Direqt search bar on your webpage, place the element below into your site's HTML wherever you want the search bar to appear:

<direqt-search></direqt-search>

Once the search bar appears on your page, AI Search is ready for use.

You can customize the font size, font color, font family, and background color of the search bar using specific style attributes.

For example:

<direqt-search font-size="15px" font-family="Arial" font-color="blue"></direqt-search>

will change the text color to blue, the font size to 15px, and the font family to Arial.

Displaying Search Results¶

Search results will be automatically displayed through our AI Search interface. There’s no additional configuration needed — our system processes the queries, retrieves the most relevant results based on your indexed content, and displays them to users.