Overlay
Display search results in a pop-up window
This guide will show you how to install AI Search in overlay layout. Search results will be displayed in a Direqt-provided pop-up window within the browser that dims everything behind it.
Add Your Embed Script
The first step is to add Direqt's embed script to your site.
Go to the Installation page of the dashboard to copy your personalized embed script, which will look something like this:
<script async src="https://embed.direqt.ai/embed.js?id=YOUR_BOT_ID"></script>Paste your personalized script in either the <head> or <body> section of your HTML file.
This snippet varies from project to project, so make sure you use your own embed script from the dashboard rather than paste the one from this guide to your website.
Configure Your Search Bar
To run search on your site, you'll need a search bar for user queries. You can use Direqt with your existing search bar, or we can add one for you if you don't have one. To configure your search bar, follow the instructions below based on your scenario:
Great! Follow the instructions below to run Direqt through your existing search bar. Your search bar's appearance will remain unaltered, but queries will be redirected to the Direqt interface.
All you'll need to do is add a new CSS class of direqt-search-input to your search bar. This will look something like this:
<input type="text" placeholder="Search">
<input type="text" placeholder="Search" class="direqt-search-input">
Not a problem! We have a pre-built search bar you can add to your site.
To embed the Direqt search bar on your site, place the element below into your site's HTML wherever you want the search bar to appear:
<direqt-search></direqt-search>If successful, the Direqt overlay window should pop up when you enter a search query in your search bar.
Last updated