Quick Start Using Widgets (old)

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:

Replace the placeholders with your actual API key and domain:

<!-- Search Widget Container -->
<div
  id="search-container"
  data-prorata-widget="search"
  data-api-key="...your key here..."
  data-user-id="...your domain here..."
  data-default-prompt="Ask me anything..."
  data-target-url="search-results.html"
></div>

<!-- Include the SearchWidget script -->
<script src="https://prtdevpublicstorage.blob.core.windows.net/gistwidgets/searchWidget.bundle.js"></script>

📌 On the results page (search-results.html), add:

<!-- Chat Widget Container -->
<div
  id="chat-container"
  data-prorata-widget="chat"
  data-api-key="...your key here..."
  data-user-id="...your domain here..."
  data-show-popovers="true"
></div>

<!-- Include the ChatWidget script -->
<script src="https://prtdevpublicstorage.blob.core.windows.net/gistwidgets/chatWidget.bundle.js"></script>

Required Parameters

• data-api-key: Your unique ProRata API key.
• data-user-id: Your domain or organization identifier.
• data-default-prompt (optional): Customize the default message in the chat box.
• data-theme (optional): Choose "light" or "dark" depending on your design (only needed if using inline mode).

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