Chat Widget Overview

The Nexus Chat Widget is a lightweight, embeddable component that brings AI-powered chat to your website or application.

Features

Core Capabilities

Floating Button Mode - Non-intrusive chat button in the corner
Embedded Mode - Integrate chat directly into your page layout
Customizable Themes - Match your brand with colors, fonts, and styling
Multi-language Support - Voice input in multiple languages
Rich Content - Support for markdown, HTML, images, and links
Feedback System - Collect user ratings and feedback
Event Tracking - Monitor all user interactions

Advanced Features

Message Interceptor - Intercept and handle messages before they reach the backend
Voice Input - Speech-to-text for hands-free interaction
Text-to-Speech - Audio output for accessibility
Session Management - Persistent conversations across page loads
Agent Handover - Seamless transition to human agents
Custom Disclaimers - Display terms, privacy policies, or warnings

Installation

CDN (Recommended)

Include the widget script in your HTML:

<script src="http://localhost:3001/widget.umd.js"></script>

Self-Hosted

Download the widget files and host them on your own server:

# Download widget files
curl -O http://localhost:3001/widget.umd.js

Then reference them in your HTML:

<script src="/path/to/widget.umd.js"></script>

Basic Usage

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website</h1>

    <!-- Load widget script -->
    <script src="http://localhost:3001/widget.umd.js"></script>

    <!-- Initialize widget -->
    <script>
      window.NexusChatWidget.init({
        experienceId: "your-experience-id",
        apiUrl: "http://localhost:3001",
        theme: "light",
      });
    </script>

  </body>
</html>

<div id="chat-container" style="width: 400px; height: 600px;"></div>

<script src="http://localhost:3001/widget.umd.js"></script>

<script>
  const container = document.getElementById("chat-container");

  window.NexusChatWidget.init({
    experienceId: "your-experience-id",
    apiUrl: "http://localhost:3001",
    theme: "light",
    embedded: true,
    container: container,
  });
</script>

Configuration

The widget supports extensive configuration options. See the Configuration Guide for complete details.

Common Options

window.NexusChatWidget.init({
  // Required
  experienceId: "your-experience-id",
  apiUrl: "http://localhost:3001",

// Appearance
theme: "light", // or 'dark'

// Button configuration
button: {
position: "bottom-right",
text: "Chat with us",
backgroundColor: "#007bff",
textColor: "#ffffff",
},

// Window configuration
window: {
width: "384px",
height: "600px",
header: {
title: "Support Chat",
showCloseButton: true,
},
},

// Messages
messages: {
welcomeMessage: "Hello! How can I help you today?",
errorMessage: "Sorry, something went wrong. Please try again.",
},

// Features
features: {
voice: { enabled: true },
tts: { enabled: false },
feedback: { enabled: true },
},
});

Next Steps

Configuration Guide - All configuration options
Events System - Track widget interactions
Message Interceptor - Custom message handling
Interactive Demos - See live examples

Browser Support

The Nexus Chat Widget supports all modern browsers:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

The widget is optimized for fast loading and minimal impact on your page performance.