Kodey AI Chat Widget: Installation Guide

This guide provides instructions on how to install and configure the Kodey AI Agent Chat widget on your website or web application.

Table of Contents

Standard Installation

Follow these steps to embed the Kodey AI Chat widget on any website or web application:

  1. Copy the widget code from your Kodey Settings
  2. Paste the code into your website or web app's HTML

Example Code

<!-- Container for the chat widget -->
<div id="kodey-chat-container"></div>

<!-- Load the widget script -->
<script src="https://cdn.dev.kodey.ai/chat-widget.bundle.js"></script>

<!-- Initialize the widget -->
<script>
  ChatWidgetLibrary.initChatWidget('kodey-chat-container', {
    connectionUrl: "wss://pooled.dev.ws.kodey.ai",
    apiKey: "your-api-key",
    serverUrl: 'https://7mstm8acr8.execute-api.us-east-1.amazonaws.com/prod',
    userId: 'user-id'
  });
</script>

Important: Replace "your-api-key" with your actual API key and "user-id" with a unique identifier for the user.

WordPress Installation

For WordPress websites, you can use the following embed code that automatically detects the current logged-in user:

  1. Make sure the WordPress API is enabled on your site
  2. Copy the code below
  3. Paste it into your WordPress theme or using a custom HTML block

WordPress Embed Code

<div id="kodey-chat-container"></div>
<script src="https://cdn.dev.kodey.ai/chat-widget.bundle.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Check if wpApiSettings is available
    if (typeof wpApiSettings === 'undefined') {
      initChatWithUser('guest');
      return;
    }
    
    // Fetch the current user data with proper authentication
    fetch(wpApiSettings.root + 'wp/v2/users/me', {
      credentials: 'same-origin',
      headers: {
        'X-WP-Nonce': wpApiSettings.nonce,
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      if (!response.ok) {
        return { id: 'guest' };
      }
      return response.json();
    })
    .then(userData => {
      // Get user ID and log it
      const userId = userData && userData.id ? userData.id.toString() : 'guest';
      console.log('WordPress User ID:', userId);
      
      // Initialize the chat widget with the user ID
      initChatWithUser(userId);
    })
    .catch(error => {
      initChatWithUser('guest');
    });
    
    function initChatWithUser(userId) {
      ChatWidgetLibrary.initChatWidget('kodey-chat-container', {
        connectionUrl: "wss://pooled.dev.ws.kodey.ai",
        apiKey: "your-api-key",
        serverUrl: 'https://7mstm8acr8.execute-api.us-east-1.amazonaws.com/prod',
        userId: userId
      });
    }
  });
</script>

Note: This code automatically uses the WordPress user ID or defaults to 'guest' for non-logged-in users.

Configuration Options

The Kodey AI Chat widget can be configured with the following options:

OptionTypeDescription
connectionUrlstringWebSocket connection URL for real-time chat communication
apiKeystringAPI key for authentication with Kodey services
serverUrlstringServer URL for API calls to process chat interactions
userIdstringUnique identifier for the user, used for continuity between sessions

Best Practices

  1. Security: Keep your API key secure and never expose it in client-side code in production environments
  2. User IDs: Use consistent user IDs to maintain chat history for returning users
  3. Container Styling: The widget will adapt to the size of its container, so you can style #kodey-chat-container to control its appearance

For further customization options or support, please refer to the Kodey AI documentation or contact support.