🤖 NOXX Chatbot NPM Package

Professional React chatbot component for seamless integration into your applications.

🚀 Installation

npm install noxx-chatbot

📋 Quick Start

ES6 Import

import ChatbotInstance from 'noxx-chatbot';

// Create chatbot instance
const chatbot = new ChatbotInstance({
    branding: { 
        name: "Support Assistant",
        logo: "https://yourdomain.com/logo.png"
    },
    style: { 
        primaryColor: "#1d4ed8",
        secondaryColor: "#3b82f6"
    }
});

// Inject into page
await chatbot.inject();

// Control the chatbot
chatbot.open();
chatbot.sendMessage("Hello!");

CommonJS Require

const { ChatbotInstance } = require('noxx-chatbot');

const chatbot = new ChatbotInstance({
    branding: { name: "Help Assistant" }
});

await chatbot.inject('#chat-container');

⚙️ Configuration

const defaultConfig = {
    webhook: {
        url: 'https://api.chatbot.noxx.agency',
        route: '',
        bookingUrl: 'https://api.chatbot.noxx.agency'
    },
    branding: {
        logo: '',
        name: '',
        poweredBy: {
            text: 'Powered by NOXX Agency',
            link: 'https://noxx.agency'
        }
    },
    style: {
        primaryColor: "#035fdc",
        secondaryColor: "#7d60f4",
        backgroundColor: '#ffffff',
        fontColor: '#333333',
        minWidth: 400,
        minHeight: 700,
        isolateCSS: true, // Enable CSS isolation
        toggleButton: {
            side: 'right', // 'left' | 'right'
            vertical: 'bottom', // 'top' | 'bottom'
            offsetX: 20,
            offsetY: 20
        }
    },
    behavior: {
        resize: true,
        dragable: true,
        showNewConversationButton: true,
        useMedia: true
    },
    ui: {
        header: true,   // Show/hide chat header
        footer: true,   // Show/hide chat footer
        input: true     // Show/hide input area
    },
    injection: {
        targetSelector: null,
        mode: 'floating', // 'floating' | 'embedded'
        embedded: {
            showToggleButton: false,
            alwaysVisible: true,
            fillContainer: true,
            disableDrag: true,
            disableResize: true
        }
    },
    theme: {
        mode: 'auto', // 'auto', 'light', 'dark'
        switcher: true,
        darkMode: {
            primaryColor: "#2563eb",
            secondaryColor: "#8b5cf6",
            backgroundColor: '#1f2937',
            fontColor: '#f3f4f6',
            surfaceColor: '#374151',
            borderColor: '#4b5563'
        },
        lightMode: {
            primaryColor: "#035fdc",
            secondaryColor: "#7d60f4",
            backgroundColor: '#ffffff',
            fontColor: '#333333',
            surfaceColor: '#f9fafb',
            borderColor: '#e5e7eb'
        }
    },
    avatars: {
        user: null, // Custom user avatar URL
        bot: null   // Custom bot avatar URL
    },
    customCSS: '',
    messages: {
        greetings: [
            "How can we support you today?",
            "What would you like to explore?",
            "Type your question to get started",
            "Ready when you are — ask away",
            "What can I help you find?",
            "Your question goes here",
            "Let's solve this together start typing",
            "Looking for something specific?",
            "I'm here to guide you — what's first?",
            "What do you need assistance with?"
        ],
        defaultQuickButtons: [],
        booking: {
            enabled: true,
            formTitle: "📅 Book an Appointment",
            formDescription: "Fill out the form below to schedule your appointment.",
            confirmationTitle: "✅ Booking Confirmed!",
            confirmationMessage: "Thank you! Your appointment has been scheduled for {date} at {time}.",
            emailConfirmationMessage: "You'll receive a confirmation email shortly.",
            fields: {
                fullName: "Full Name",
                email: "Email Address", 
                phone: "Phone Number",
                date: "Preferred Date",
                timeSlots: "Available Time Slots",
                notes: "Additional Notes (Optional)"
            },
            placeholders: {
                fullName: "Enter your full name",
                email: "[email protected]",
                phone: "Your phone number",
                notes: "Any special requests or notes"
            },
            buttons: {
                cancel: "Cancel",
                bookNow: "Book Now",
                done: "Done"
            },
            messages: {
                submitting: "Submitting booking...",
                submitError: "Failed to submit booking. Please try again."
            }
        },
        chatWidget: {
            header: {
                fallbackName: "Assistant",
                onlineStatus: "Online now"
            },
            tooltips: {
                toggleChat: "Toggle chat",
                startNewConversation: "Start new conversation", 
                scrollToBottom: "Scroll to bottom",
                sendMessage: "Send message",
                retryMessage: "Retry message"
            },
            accessibility: {
                userAvatar: "User",
                botAvatar: "Bot", 
                retrySendingMessage: "Retry sending message"
            },
            messages: {
                bookingPrompt: "I'd be happy to help you book an appointment. Please fill out the form below:",
                noResponse: "I apologize, but I didn't receive a proper response. Could you please try again?"
            }
        },
        errors: {
            connection: 'Sorry, I encountered an issue processing your message. Please try again.',
            general: 'Something went wrong. Please try again.',
            startConversation: 'Failed to start conversation. Please try again.'
        }
    }
};

🎯 Usage Examples

Floating Chatbot

import ChatbotInstance from 'noxx-chatbot';

const chatbot = new ChatbotInstance({
    branding: { name: "Support" },
    style: { primaryColor: "#dc2626" }
});

// Inject as floating widget
await chatbot.inject();
chatbot.open();

Embedded in Container

import ChatbotInstance from 'noxx-chatbot';

const chatbot = new ChatbotInstance({
    branding: { name: "Help Assistant" },
    injection: {
        mode: "embedded",
        embedded: {
            showToggleButton: false,
            alwaysVisible: true,
            fillContainer: true
        }
    }
});

// Inject into specific container
await chatbot.inject('#chat-container');

Multiple Instances

import ChatbotInstance from 'noxx-chatbot';

// Support chat
const supportChat = new ChatbotInstance({
    branding: { name: "Support" },
    style: { primaryColor: "#dc2626" }
});

// Sales chat
const salesChat = new ChatbotInstance({
    branding: { name: "Sales" },
    style: { primaryColor: "#059669" }
});

await supportChat.inject();
await salesChat.inject('#sales-container');

📖 API Reference

Constructor

new ChatbotInstance(config)

Instance Methods

• await chatbot.inject(target?) - Inject into DOM
• chatbot.open() - Open the chatbot
• chatbot.close() - Close the chatbot
• chatbot.toggle() - Toggle open/closed state
• chatbot.sendMessage(message) - Send real message (API call)
• chatbot.sendFakeMessage(message) - Add fake user message
• chatbot.receiveFakeMessage(message) - Add fake bot message
• chatbot.updateConfig(newConfig) - Update configuration
• chatbot.getConfig() - Get current configuration
• chatbot.getStatus() - Get instance status
• chatbot.destroy() - Destroy instance and cleanup

🎭 Fake Messages for Demos

import ChatbotInstance from 'noxx-chatbot';

const demo = new ChatbotInstance({
    branding: { name: "Demo Bot" }
});

await demo.inject();

// Create realistic demo conversation
setTimeout(() => demo.sendFakeMessage("I need help with my order"), 1000);
setTimeout(() => demo.receiveFakeMessage("I'd be happy to help! What's your order number?"), 2500);
setTimeout(() => demo.sendFakeMessage("It's ORD-12345"), 4000);
setTimeout(() => demo.receiveFakeMessage("Found it! Your order will arrive tomorrow."), 6000);

🎨 Advanced Styling

Custom Colors

const chatbot = new ChatbotInstance({
    style: {
        primaryColor: "#8b5cf6",
        secondaryColor: "#a78bfa",
        backgroundColor: "#fafafa"
    },
    theme: {
        mode: 'light',
        switcher: false
    }
});

Custom CSS

const chatbot = new ChatbotInstance({
    customCSS: `
        .chat-header { border-radius: 0 !important; }
        .chat-message { font-family: 'Arial', sans-serif !important; }
    `,
    style: {
        isolateCSS: false // Allow external CSS to affect widget
    }
});

🔧 TypeScript Support

import ChatbotInstance from 'noxx-chatbot';

interface ChatConfig {
    branding: {
        name: string;
        logo?: string;
    };
    style: {
        primaryColor: string;
        secondaryColor?: string;
    };
}

const config: ChatConfig = {
    branding: { name: "TypeScript Bot" },
    style: { primaryColor: "#1d4ed8" }
};

const chatbot = new ChatbotInstance(config);
await chatbot.inject();

📄 License

Proprietary software developed by NOXX Agency.

NOXX Agency - Building the future of AI-powered customer engagement.
🌐 noxx.agency | 📧 [email protected]