AI Search | Overlay¶

This guide will show you how to integrate AI Search onto your website in an overlay layout. In this configuration, search results will render in a modal window in the browser that dims everything behind it.

1. Add Your Embed Script¶

Paste your Direqt embed script into either the <head> or <body> section of your HTML file. Your bot ID is a required parameter of the embed file, and can be found in the Direqt console under "Chatbot Settings".

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>

Warning

While Direqt Webchat can use a bot ID other than the one provided to the embed script, AI Search can only use the bot ID specified in the embed script. If you want to use AI Search with a different bot, you will need to change the bot ID in the embed script.

2. Configure Your Search Input¶

To run AI Search on your site, you'll need a search bar. Direqt provides a pre-built search bar you can add to your site, or you can integrate AI Search with your existing search input.

Using The Direqt Search Bar¶

To use Direqt's pre-built search bar on your webpage place the element below into your site's HTML where you want the search bar to appear:

<direqt-search-bar></direqt-search-bar>

Using Your Own Search Bar¶

If you already have a search bar on your site that you'd prefer to use, you can do so with only one small change. Your search bar UI will remain unaltered, but will now redirect users to the AI Search results interface after being submitted.

To run AI Search through your native search bar, add a new CSS class of direqt-search-input to the search bar.

For example:

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

That's it! Once your search input is configured, AI Search is ready for use.