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 pop-up window in the browser that dims everything behind it.

1. 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".

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¶

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>

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.

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.