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.kodey.ai/chat-widget.bundle.js"></script>

<!-- Initialize the widget -->
<script>
  ChatWidgetLibrary.initChatWidget('kodey-chat-container', {
    connectionUrl: "wss://pooled.ws.kodey.ai",
    apiKey: "your-api-key",
    serverUrl: 'https://pooled.api.kodey.ai',
    userId: userId,
    theme: 'dark',
    size: 'compact'
  });
</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 and use the below WordPress function
  2. Copy the code below
  3. Paste it into your WordPress theme or using a custom HTML block

WordPress Function

// Secured REST API for Kodey chat
function kodey_chat_localize_script() {
  // Make sure jQuery is enqueued
  wp_enqueue_script('jquery');
  
  // Localize the script with our data
  wp_localize_script('jquery', 'wpApiSettings', array(
      'root' => esc_url_raw(rest_url()),
      'nonce' => wp_create_nonce('wp_rest'),
      'isLoggedIn' => is_user_logged_in(),
      'userId' => is_user_logged_in() ? get_current_user_id() : 0
  ));
}
add_action('wp_enqueue_scripts', 'kodey_chat_localize_script');

WordPress Embed Code

<div id="kodey-chat-container"></div>
<script src="https://cdn.kodey.ai/chat-widget.bundle.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Check if wpApiSettings is available
    if (typeof wpApiSettings === 'undefined') {
      initChatWithUser('guest');
      return;
    }
    
    // Check if user is logged in
    if (wpApiSettings.isLoggedIn) {
      // User is logged in, so call the REST API to get their ID
      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) {
          throw new Error('API request failed');
        }
        return response.json();
      })
      .then(userData => {
        const userId = userData && userData.id ? userData.id.toString() : 'guest';
        console.log('WordPress User ID:', userId);
        initChatWithUser(userId);
      })
      .catch(error => {
        console.log('Error fetching user data, using guest ID');
        initChatWithUser('guest');
      });
    } else {
      // User is not logged in, use guest ID without making API call
      console.log('WordPress User ID: guest (not logged in)');
      initChatWithUser('guest');
    }
    
    function initChatWithUser(userId) {
      // Ensure userId is either a valid ID or 'guest' string
      const finalUserId = userId || 'guest';
      
      // Initialize the chat widget
      ChatWidgetLibrary.initChatWidget('kodey-chat-container', {
        connectionUrl: "wss://pooled.ws.kodey.ai",
        apiKey: "your-api-key",
        serverUrl: 'https://pooled.api.kodey.ai',
        userId: finalUserId,
        theme: 'dark',
        size: 'compact'
      });
    }
  });
</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
themestringSelect either light or dark mode
sizestringSelect either full or compact size

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.