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)

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.