Displaying search results on new page

This section describes how to implement Gist Answers with the search box fixed at a location within the page content and the results page are shown on a new page.

📌 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:

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

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="http://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.

Tip: if you want to make the search box float at a fixed location on the screen while user is scrolling the page, add the 'floating' parameter to the <gist-seach-widget>

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

This is a new page you will need to create on your site for showing the search results. The page will have your site's standard header and footer, in addition to the search results that are implemented as follows.

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:

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

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.