Widget Configuration

window.NexusChatWidget.init({
  experienceId: "your-experience-id", // Required: Your unique experience ID
  apiUrl: "http://localhost:3001", // Required: Nexus API endpoint
});

{
  button: {
    position: 'bottom-right',        // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
    text: 'Chat with us',            // Button text
    backgroundColor: '#007bff',      // Background color
    textColor: '#ffffff',            // Text color
    hoverBackgroundColor: '#0056b3', // Hover state color
    borderRadius: '50px',            // Border radius (use '50%' for circular)
    size: 'medium',                  // 'small', 'medium', 'large'
    iconUrl: '/path/to/icon.svg'     // Custom icon URL
  }
}

{
  window: {
    width: '384px',                    // Window width
    height: '600px',                   // Window height
    backgroundColor: '#ffffff',        // Background color
    borderRadius: '10px',              // Border radius
    boxShadow: '0 4px 12px rgba(0,0,0,0.15)', // Shadow

    // Sizing modes (allows users to toggle between sizes)
    sizing: {
      showToggle: true,               // Show size toggle button
      rememberSize: true,             // Remember user's size preference
      defaultMode: 'normal',          // Default size mode
      modes: [
        { name: 'normal', width: '384px', height: '600px' },
        { name: 'expanded', width: '600px', height: '800px' }
      ]
    },

    // Header configuration
    header: {
      show: true,                     // Show header
      title: 'Support Chat',          // Header title
      showCloseButton: true,          // Show close button
      showSizeToggle: true,           // Show size toggle
      backgroundColor: '#007bff',     // Header background
      textColor: '#ffffff',           // Header text color
      iconColor: '#ffffff'            // Icon color
    }

}
}

{
  bubbles: {
    // User messages
    user: {
      alignment: 'right',             // 'left' or 'right'
      backgroundColor: '#007bff',     // Background color
      textColor: '#ffffff',           // Text color
      borderRadius: '18px'            // Border radius
    },

    // Assistant messages
    assistant: {
      backgroundColor: '#f0f0f0',     // Background color
      textColor: '#000000',           // Text color
      borderRadius: '18px',           // Border radius
      showAvatar: true,               // Show avatar
      avatarUrl: '/path/to/avatar.png' // Custom avatar
    },

    // Agent messages (for live agent handover)
    agent: {
      backgroundColor: '#e8f5e9',     // Background color
      textColor: '#000000',           // Text color
      showAvatar: true,               // Show avatar
      showAgentBadge: true            // Show "Live Agent" badge
    },

    spacing: '0.75rem',               // Space between messages
    animation: 'fade',                // 'fade', 'slide', or 'none'
    showTimestamps: false             // Show message timestamps

}
}

{
  input: {
    placeholder: 'Type your message...',  // Placeholder text
    backgroundColor: '#ffffff',           // Background color
    textColor: '#000000',                 // Text color
    borderColor: '#e0e0e0',              // Border color
    borderRadius: '24px',                // Border radius
    sendButtonColor: '#007bff',          // Send button color
    micButtonColor: '#007bff',           // Microphone button color
    sendButtonText: 'Send',              // Send button text (if not icon)
    maxRows: 4,                          // Max textarea rows
    minRows: 1                           // Min textarea rows
  }
}

{
  messages: {
    welcomeMessage: 'Hello! How can I help you today?',
    errorMessage: 'Sorry, something went wrong. Please try again.',
    offlineMessage: 'We are currently offline. Please try again later.',
    typingIndicatorText: 'Typing...',
    loadingAnimation: 'typing',          // 'typing', 'dots', 'pulse'
    loadingAnimationColor: '#007bff'
  }
}

{
  events: {
    sessionStart: {
      message: 'Chat session started',
      show: true
    },
    sessionEnd: {
      message: 'Chat session ended',
      show: true
    },
    agentHandover: {
      message: 'Connecting you to a live agent...',
      show: true
    }
  }
}

{
  disclaimer: {
    content: '⚠️ **Disclaimer**: This chatbot provides general information only.',
    collapsible: true,                   // Can be collapsed by user
    defaultExpanded: false,              // Start expanded or collapsed
    acceptButton: true,                  // Require user to accept
    acceptButtonText: 'I understand'     // Accept button text
  }
}

{
  branding: {
    show: false,                         // Show "Powered by Nexus" branding
    text: 'Powered by Nexus',            // Custom branding text
    url: 'https://your-company.com'      // Link URL
  }
}

{
  features: {
    // Voice input
    voice: {
      enabled: true,                     // Enable voice input
      language: 'en-US'                  // Voice recognition language
    },

    // Text-to-speech
    tts: {
      enabled: false,                    // Enable TTS
      defaultOn: false,                  // Start with TTS on
      synthesisConfig: {
        engine: 'browser',               // 'browser' or 'aws'
        voiceId: 'default',
        rate: 1.0,                       // Speech rate (0.5 - 2.0)
        pitch: 1.0,                      // Speech pitch (0.5 - 2.0)
        volume: 1.0                      // Volume (0.0 - 1.0)
      }
    },

    // File upload
    fileUpload: false,                   // Enable file attachments

    // Emoji picker
    emoji: false,                        // Enable emoji picker

    // Message format
    format: 'markdown',                  // 'markdown' or 'html'

    // Copy button
    copyButton: true,                    // Show copy button on messages

    // Feedback system
    feedback: {
      enabled: true,                     // Enable feedback
      style: 'thumbs',                   // 'thumbs', 'stars', or 'emoji'
      position: 'inline',                // 'inline' or 'modal'
      positive: {
        label: 'Helpful'                 // Custom label
      },
      negative: {
        label: 'Not helpful',
        requireComment: true             // Require comment for negative feedback
      }
    }

}
}

{
  advanced: {
    // User identification
    userId: 'unique-user-id',            // Identify users across sessions

    // Widget ID
    widgetId: 'custom-widget-id',        // Custom widget identifier

    // Store persistence
    persistStore: true,                  // Remember conversations
    storeKey: 'nexus-chat-session',      // Storage key

    // Initial events (pre-populate conversation)
    initialEvents: [
      {
        kind: 'message',
        role: 'assistant',
        content: 'Welcome back! How can I help you?',
        timestamp: new Date()
      }
    ],

    // Read-only mode
    readOnly: false,                     // Disable user input

    // Message interceptor
    messageInterceptor: async (message, context) => {
      // Custom message handling
      return null; // or return custom response
    },

    // Interceptor timeout
    interceptorTimeout: 5000             // Timeout in milliseconds

}
}

{
  embedded: true,                        // Enable embedded mode
  container: document.getElementById('chat-container'), // Container element

// In embedded mode, these are typically different:
window: {
borderRadius: '0', // No rounded corners
boxShadow: 'none', // No shadow
header: {
showCloseButton: false, // No close button
showSizeToggle: false // No size toggle
}
}
}

window.NexusChatWidget.init({
  // Required - replace with your actual experience ID
  experienceId: "f2dc12a9-080e-47a3-b6d6-13e32bfaf83e ",
  apiUrl: "http://localhost:3001",

// Theme
theme: "light",

// Button
button: {
position: "bottom-right",
text: "Chat with us",
backgroundColor: "#4CAF50",
textColor: "#ffffff",
size: "medium",
},

// Window
window: {
width: "400px",
height: "700px",
header: {
title: "Customer Support",
backgroundColor: "#4CAF50",
textColor: "#ffffff",
},
},

// Bubbles
bubbles: {
user: {
backgroundColor: "#4CAF50",
textColor: "#ffffff",
},
assistant: {
showAvatar: true,
avatarUrl: "/images/bot-avatar.png",
},
},

// Input
input: {
placeholder: "Ask us anything...",
sendButtonColor: "#4CAF50",
},

// Messages
messages: {
welcomeMessage: "Hi! How can we help you today?",
},

// Features
features: {
voice: { enabled: true },
feedback: {
enabled: true,
style: "thumbs",
},
},

// Disclaimer
disclaimer: {
content:
"This chatbot provides automated responses. For urgent matters, please contact support.",
collapsible: true,
defaultExpanded: false,
},
});