Quick Start To Install

You can enable AI-powered search on your website using widgets, an easy no-code or low-code way to implement Gist Answers.

There are three ways ways in which you can impelement the design (see Widget Usage Options under UX Best Practices for considerations that can help you decide which option is optimal for your site):

Gist AI search box is floating, and the answer is displayed in a modal window
Gist AI search box is floating, and the answer is displayed on a new standalone page
Gist AI search box is inline, and the answer is displayed on a new standalone page

"Floating" Gist AI search box implies that the search box placement is not fixed on the page, but rather it floats above the page such that the search box remains pinned to the bottom center of the browser window even as the user scrolls the page itself. This Quick Start guide explains how to implement option #1 above - a "floating" chat widget and display of AI answers in a modal window. This is the easiest way to implement Gist Answers. For instructions on how to implement options #2 and #3 above, see Displaying search results on new page.

Adding the AI search box to Your Website

Add the chat widget script in the head section of your page HTML. Replace "path-to-widget" with either https://cdn.sandbox.gist.ai if you are testing and want to connect to the sandbox environment to test. Replace "path-to-widget" with https://cdn.gist.ai for the production environment.

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

Insert the <gist-chat-widget> tag into the <body> section of the HTML on the web page where you want the AI Search experience to appear.

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

Important Notes: • Replace your-api-key and your-domain with your actual values. • The floating attribute is essential. It ensures that the Gist AI search box remains fixed in a single location on the screen, even as the user scrolls the page.

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.
floating (optional): Keeps the search box "floating", i.e. not fixed within the page itself but pinned to the bottom center of the browser window. Setting this parameter will also have the AI answer appear in a modal window.
sticky-prompt (optional): This parameter controls the search box that is shown on the AI Results page. It keeps the search box "floating", i.e. not fixed to the page but pinned to the bottom center of the browser window.

Have an API Key?

Generate Your Widget Code

Configure your search widget by selecting options below.

API Key *

Domain *

Search Placeholder (Optional)

Where should search results appear? *

Modal Window

Results appear in a popup modal on the same page

New Page

Results are displayed on a separate search results page

Sharing Page URL (Optional)

Specifies where users are directed when clicking shared links. If not provided, shared links will direct to gist.ai by default.

Where should the search box appear? *

Floating

Search box floats as an overlay on your page

Inline

Inline option is only available with "New Page" results

Widget Code

<!-- Add this script tag to your page head -->
<script type="module" src="https://cdn.gist.ai/chatWidget.js"></script>

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

Next steps: Copy the generated code above and paste it into your HTML file. The script tag should go in your <head> section, and the widget tag can go wherever you want the search widget to appear on your page.