Guides
Start typing to search…

Quick Start Using Widgets

Adding the AI Search Box to Your Website

You can enable AI-powered search on your website using the Gist AI Search widget. You can place the widget anywhere on your website, and then choose from one of two ways to display search results:

  • On a new results page (recommended approach)
  • or inline, on the same page

We recommend option 1 since it allows for adequate space for the search results, resulting in an optimal user experience. Choose the option that best fits your website’s layout and user experience needs. See instructions below for the recommended approach. For showing results inline, see Displaying Search Results Inline.

📌 On the main page (e.g., index.html)

Add the search widget script in the header of your page as shown below. Replace "path-to-widget" with either https://cdn.sandbox.gist.ai for the sandbox environment to test or https://cdn.gist.ai for the production environment:

<head>
  <!-- Search Widget script -->
  <script type="module" src="path-to-widget/searchWidget.js" ></script>
</head>

Place the gist-search-widget tag where you want the widget to appear. Replace the placeholders with your actual API key and domain:

<!-- Search Widget Container -->
<gist-search-widget 
	api-key="your-api-key"
	user-id="your-domain"            
	target-url="search-results.html"
 	default-placeholder="Search with AI…"
	sticky-prompt>
</gist-search-widget>

Note the **sticky-prompt ** parameter. This is a recommended setting for optimal user experience. It will keep the search input bar always visible within your window.

📌 On the results page (search-results.html)

Add the chat widget script in the header of your page. Replace "path-to-widget" with either https://cdn.sandbox.gist.ai for the sandbox environment to test or https://cdn.gist.ai for the production environment:

<head>
  <!-- Chat Widget Container -->
  <script type="module" src="path-to-widget/chatWidget.js" /></script>
</head>

Place the gist-chat-widget tag where you want the widget to appear. Replace the placeholders with your actual API key and domain:

<!-- Chat Widget Container -->
<gist-chat-widget
  api-key="your-api-key"
	user-id="your-user-id"
	sticky-prompt
  default-placeholder="Search with AI…">
</gist-chat-widget>

Required Parameters

  • api-key: Your unique ProRata API key.
  • user-id: Your domain or organization identifier.
  • default-placeholder (optional): Customize the default message in the chat box.
  • sticky-prompt (optional): Keeps the search input bar visibile in your window.

Once implemented, users will be able to search from one page and view intelligent results on another.

Updated 2 days ago