← Back to Documentation

Embeddable Widgets

Add AI-powered chat and search to your website with simple JavaScript widgets

Overview

Krylos provides two embeddable widgets that can be easily integrated into any website:

  • Chat Widget: An AI-powered chat interface that answers questions based on your indexed content
  • Search Widget: A semantic search interface that finds relevant content across your site

Quick Start

Both widgets require just a single JavaScript file that automatically loads the necessary styles. You'll also need your API key from the Krylos dashboard.

Chat Widget

Installation

Add the following code to your HTML, preferably before the closing </body> tag: 

<!-- Load Chat Widget JavaScript -->
<script src="https://embed.krylos.io/v1/chat.js"></script>

<!-- Initialize Chat Widget -->
<script>
  window.addEventListener('DOMContentLoaded', function() {
    if (window.Krylos && window.Krylos.initChat) {
      window.Krylos.initChat({
        apiKey: 'your-api-key-here'
      });
    }
  });
</script>

Configuration Options

Option Type Description
apiKey string Your krylos API key (required)

Search Widget

Installation

Add the following code to your HTML. The search widget will be embedded in a container element you specify: 

<!-- Add a container for the search widget -->
<div id="krylos-search"></div>

<!-- Load Search Widget JavaScript -->
<script src="https://embed.krylos.io/v1/search.js"></script>

<!-- Initialize Search Widget -->
<script>
  window.addEventListener('DOMContentLoaded', function() {
    if (window.Krylos && window.Krylos.initSearch) {
      window.Krylos.initSearch({
        apiKey: 'your-api-key-here'
      });
    }
  });
</script>

Configuration Options

Option Type Description
apiKey string Your krylos API key (required)

Using Both Widgets

You can use both widgets on the same page. Here's a complete example: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site with krylos</title>
</head>
<body>
  <!-- Your page content -->
  <header>
    <h1>Welcome to My Site</h1>
  </header>
  
  <!-- Search Widget Container -->
  <div id="krylos-search"></div>
  
  <main>
    <!-- Your content here -->
  </main>
  
  <!-- Load Widget Scripts -->
  <script src="https://embed.krylos.io/v1/chat.js"></script>
  <script src="https://embed.krylos.io/v1/search.js"></script>
  
  <!-- Initialize Widgets -->
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      const config = {
        apiKey: 'your-api-key-here'
      };
      
      // Initialize Chat Widget
      if (window.Krylos && window.Krylos.initChat) {
        window.Krylos.initChat(config);
      }
      
      // Initialize Search Widget
      if (window.Krylos && window.Krylos.initSearch) {
        window.Krylos.initSearch(config);
      }
    });
  </script>
</body>
</html>

Getting Your API Key

To use the embeddable widgets, you'll need an API key:

  1. Log in to your krylos dashboard
  2. Navigate to your site settings
  3. Copy your API key
  4. Replace the placeholder value in the code examples above

Browser Support

The krylos widgets support all modern browsers:

  • Chrome/Edge (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Troubleshooting

Widget not appearing?

  • Check that the JavaScript file is loaded correctly
  • Verify your API key is correct
  • Check the browser console for any error messages
  • Ensure the initialization code runs after the DOM is loaded

Search results not showing?

  • Verify your site has been indexed in the krylos dashboard
  • Ensure your API key has the correct permissions

Need More Help?

For additional support or questions: