Install Your Gist AI Search Bar

Your AI search bar is meticulously styled and ready for deployment. The final, exhilarating step is to integrate it into your website, making it accessible to your visitors. Consider this the grand unveiling of the "front door" to your AI assistant on your site.

🔑 1. Secure Your API Key

Before installation, you'll need your unique API key, which acts as the secure bridge between your website and your Gist Console account.

On your screen, locate and copy your distinctive API key.
Example:

pk_f92b10f18ae40885d1d7ee6a9e7c************f0fc23cb333cc2120a880f7
Critical Note: This key is displayed only once. Ensure you copy and store it in a secure location immediately, as it cannot be retrieved later.

💻 2. Embed Code Snippet 1 (Head Section)

Integrate the first code snippet into the <head> section of your website's HTML. This essential step initializes the widget script and gracefully applies your custom style settings, including colors and fonts.

<head>
  <!-- Gist Chat Widget Container -->
  <script type="module" src="path-to-widget/chatWidget.js"></script>
  <style>
    .my-brand {
      --gist-gradient-brand-start: #3b82f6;
      --gist-gradient-brand-mid: #1d4ed8;
      --gist-gradient-brand-end: #1e40af;
      --gist-font-family-base: 'Albert Sans', serif;
    }
  </style>
</head>

🚀 3. Embed Code Snippet 2 (Body Section)

Proceed by pasting the second code snippet within the <body> section of your website. This is the precise location where your AI search bar will visually manifest on the page.

<!-- Gist Chat Widget Container -->
<div class="my-brand">
  <gist-chat-widget
    api-key="pk_daeeb605403b699d0a834486145b824fc81b0bd1960d0b82a591a5c17c44c35a"
    user-id="news.yahoo.com"
    theme="light"
    sticky-prompt
    floating
    default-placeholder="Ask Anything..."
  ></gist-chat-widget>
</div>

✅ 4. Finalize & Publish Your Website

With both crucial snippets successfully integrated, save your modifications and publish your updated website.

Open your website in a browser to witness your AI-powered search bar live and fully operational, poised to assist your visitors!

✨ Congratulations on Your Successful Setup!

You have triumphantly navigated the entire setup journey:

✅ Account creation and verification
🔗 Content connection
📚 Source selection
🎨 Style customization
🌐 Widget installation on your site

Your visitors can now effortlessly pose questions and receive instant, intelligent answers, all powered by your content and Gist’s advanced AI. Welcome to a new era of interactive engagement! 🚀