Overview

The Smart Agents SDK allows you to easily integrate Smart Agents' AI-powered chatbots and voice assistants into your website. Whether you want to add customer support, lead generation, or any other conversational AI functionality, this SDK provides a seamless way to connect your website visitors with Smart Agents' intelligent virtual assistants. Visit smartagents.in to learn more.

Key Features

  • Pre-built chat widget with customizable UI
  • Voice-enabled AI assistants
  • Real-time WebSocket communication
  • Audio visualization for voice interactions
  • Automatic reconnection handling
  • Mobile-responsive design

Quick Example


const chat = new AgentChat({
  agentId: 'your-agent-id',  // Get this from Smart Agents dashboard
  primaryColor: '#3B82F6',
  title: 'AI Assistant',
  welcomeMessage: 'Hello! How can I help?',
  position: 'bottom-right'
});

Full Quick Example

Complete HTML Implementation


<!DOCTYPE html>
<html>
<head>
    <title>Smart Agents Chat Test</title>
    <!-- Required dependency -->
    <link href="https://cdn.jsdelivr.net/npm/protobufjs@7.X.X/dist/protobuf.min.js" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Smart Agents SDK files -->
    <script src="https://app.smartagents.in/sdk/AudioVisualizer.js"></script>
    <script src="https://app.smartagents.in/sdk/voice-chat.js"></script>
    <script src="https://app.smartagents.in/sdk/text-chat.js"></script>
    <script src="https://app.smartagents.in/sdk/agent-chat.js"></script>
</head>
<body>
    <h1>Smart Agents Chat Test Page</h1>
    <p>The chat widget will appear in the bottom-right corner.</p>

    <script>
        $(document).ready(function() {
            const chat = new AgentChat({
                agentId: 'YOUR_AGENT_ID',  // Replace with your agent ID from Smart Agents dashboard
                primaryColor: '#2563EB',
                title: 'Smart Agent',
                welcomeMessage: 'Hi! How can I help you today?',
                position: 'bottom-right',
                chatEnabled: true,
                voiceEnabled: true
            });
        });
    </script>
</body>
</html>

Installation

1. Include Required Dependencies


<!-- Required dependency -->
<link href="https://cdn.jsdelivr.net/npm/protobufjs@7.X.X/dist/protobuf.min.js" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- GSAP for animations (automatically included) -->
<!-- Tailwind CSS (automatically included) -->

2. Include SDK Files


<script src="AudioVisualizer.js"></script>
<script src="voice-chat.js"></script>
<script src="text-chat.js"></script>
<script src="agent-chat.js"></script>

Important Note

Ensure all dependencies are loaded before initializing the SDK. The SDK will automatically inject required CSS and additional scripts.

Configuration

Basic Configuration

Option Type Default Description
agentId string null Unique identifier for your agent
position string 'bottom-right' Widget position ('bottom-right' or 'bottom-left')
primaryColor string '#3B82F6' Primary color for UI elements
textColor string '#FFFFFF' Text color for buttons and headers

Feature Toggles

chatEnabled

Enable/disable text chat functionality

Default: true

voiceEnabled

Enable/disable voice chat functionality

Default: true

Methods

toggleChat()

Opens or closes the text chat window with smooth animations.


chat.toggleChat();  // Toggles the chat window

toggleVoice()

Opens or closes the voice chat window with animations.


chat.toggleVoice();  // Toggles the voice chat window

sendMessage(message)

Sends a text message through the chat interface.


chat.sendMessage('Hello, how can you help me?');

toggleMute()

Toggles the microphone mute state during voice chat.


chat.toggleMute();  // Toggles microphone mute state

Events & UI Updates

Connection Status Updates


// Update connection status
chat.updateConnectionStatus('connected');    // 'connected', 'connecting', 'disconnected', 'error'

// Handle WebSocket disconnection
chat.handleWebSocketDisconnection('chat');   // 'chat', 'voice', or 'both'

Message Handling


// Add messages to the chat
chat.addMessage('Hello!', true);            // User message
chat.addMessage('Hi there!', false);        // Agent message

// Scroll to bottom of chat
chat.scrollToBottom();

Voice Chat Updates


// Update voice chat timer
chat.updateTimer(duration);                 // Updates the recording duration display

// Update audio visualizer
chat.updateVisualizer(dataArray);           // Updates the audio visualization bars

Browser Support

The SDK supports all modern browsers including:

Chrome

Latest

Firefox

Latest

Safari

Latest

Edge

Latest