← Back to Conversation Form

🔌 Conversation Widget Plugin

Easy-to-integrate JavaScript widget for AI conversations

📋 Overview

The Conversation Widget is a self-contained JavaScript plugin that provides a complete AI chat interface. It can be easily integrated into any website with just a few lines of code.

💡 Key Features

  • ✅ Self-contained - no external dependencies
  • ✅ Customizable themes (dark/light)
  • ✅ Conversation history management
  • ✅ Token usage tracking
  • ✅ Error handling with helpful messages
  • ✅ Responsive design

📥 Download & Setup

Step 1: Download the Widget

Download the JavaScript file:

📦 Download conversation-widget.js

Step 2: Include in Your HTML

Add the widget script to your HTML page:


<script src="conversation-widget.js"></script>


<div id="my-chat-widget"></div>

Step 3: Initialize the Widget

Initialize the widget with your configuration:

🎮 Live Demo

See the widget in action with different themes:

Dark Theme (Default)

Light Theme

⚙️ Configuration Options

Required Configuration

{
    apiUrl: 'https://your-domain.com/api/v1/llm',  // Your API endpoint (normalized LLM API)
    apiKey: 'your-api-key',                              // Your API key
    containerId: 'widget-container'                      // HTML element ID
}

Complete Configuration

{
    // API Configuration
    apiUrl: 'https://your-domain.com/api/v1/llm',  // Normalized LLM API endpoint
    apiKey: 'your-api-key',
    defaultModel: 'openai/gpt-3.5-turbo',
    temperature: 0.7,
    maxTokens: 1000,
    systemPrompt: 'You are a helpful assistant.',
    
    // UI Configuration
    containerId: 'widget-container',
    theme: 'dark', // 'dark' or 'light'
    showSettings: true,
    maxHeight: '500px',
    
    // Behavior Configuration
    maxHistoryLength: 20,
    autoResize: true,
    showTokenCount: true,
    
    // Callbacks
    onLoad: (widget) => { /* widget loaded */ },
    onMessage: (message, role) => { /* new message */ },
    onError: (error) => { /* error occurred */ }
}

🔧 Advanced Usage

Programmatic Control

// Initialize widget
const widget = new ConversationWidget({
    apiUrl: 'https://your-api.com/api/v1/llm',  // Normalized LLM API endpoint
    apiKey: 'your-api-key',
    containerId: 'chat-widget'
});

// Programmatic control
widget.setSystemPrompt('You are a coding assistant.');
widget.setModel('openai/gpt-4');
widget.addMessage('user', 'Hello!');
widget.clearConversation();

// Get conversation history
const history = widget.getConversationHistory();

Framework Integration

React Component

import { useEffect, useRef } from 'react';

function ChatWidget() {
    const containerRef = useRef(null);
    
    useEffect(() => {
        if (containerRef.current) {
            new ConversationWidget({
                containerId: containerRef.current.id,
                theme: 'light',
                onMessage: (message, role) => {
                    // Handle messages in React
                }
            });
        }
    }, []);
    
    return <div id="chat-widget" ref={containerRef}></div>;
}

Vue Component

<template>
    <div id="chat-widget"></div>
</template>

<script>
export default {
    mounted() {
        new ConversationWidget({
            containerId: 'chat-widget',
            theme: 'light'
        });
    }
}
</script>

🎨 Styling & Customization

Theme Options

// Dark theme (default)
theme: 'dark'

// Light theme
theme: 'light'

Custom CSS

You can override the widget's default styles with custom CSS:

/* Custom styling for the widget */
.conversation-widget {
    border-radius: 15px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

.widget-header h3 {
    color: #your-color !important;
}

🔧 API Integration

Authentication

The widget uses API key authentication. Make sure your domain is registered in the Jobsolve portal.

⚠️ Domain Registration Required

If you get a 401 error, your domain needs to be registered in the Jobsolve portal to enable chat functionality.

API Endpoint

The widget communicates with the normalized LLM API endpoint:

POST /api/v1/llm/respond
Headers:
  Content-Type: application/json
  x-api-key: your-api-key

Body:
{
    "messages": [...],
    "model": "openai/gpt-3.5-turbo",
    "temperature": 0.7,
    "max_tokens": 1000,
    "stream": false
}

Response:
{
    "provider": "openrouter",
    "model": "openai/gpt-3.5-turbo",
    "finish_reason": "stop",
    "usage": {
        "prompt_tokens": 123,
        "completion_tokens": 45,
        "total_tokens": 168
    },
    "message": {
        "role": "assistant",
        "content": "Response text here..."
    }
}

📱 Complete Example

Here's a complete HTML page example:




    
    
    My Website with AI Chat


    
Welcome to My Website

    
This is my website content...

🛠️ Troubleshooting

Common Issues

401 Unauthorized Error

Problem: "This domain is not authorized for chat usage"

Solution: Register your domain in the Jobsolve portal

Widget Not Loading

Problem: Widget doesn't appear on the page

Solution: Check that the container ID exists and the script is loaded

API Connection Issues

Problem: "Failed to fetch" errors

Solution: Verify your API URL and key are correct

📞 Support

For additional help or questions about the Conversation Widget: