🤖 Widget Chatbot UTN

Documentation & Testing Hub

✨ Widget Features

Core Features

  • Shadow DOM isolation for style protection
  • Real-time chat functionality
  • Audio recording and playback
  • Responsive design for all devices
  • Spanish language support
  • Customizable themes

Technical Features

  • Preact-based lightweight framework
  • Socket.io real-time communication
  • IIFE bundle for easy integration
  • Conditional logging system
  • Cross-origin communication
  • Mobile-first responsive design

🌐 Environment Status

Local Development

URL: http://localhost:5173

Status: Available for testing

Command: npm run build:local && npm run serve

Development

URL: https://widget-dev.chatbot.utnba.centrodeelearning.com

Status: Production ready

Command: npm run build:dev

Staging

URL: https://widget-staging.chatbot.utnba.centrodeelearning.com

Status: Production ready

Command: npm run build:staging

Production

URL: https://widget.chatbot.utnba.centrodeelearning.com

Status: Live

Command: npm run build:prod

🧪 Test Functions

Console Commands:
// Full structure with course and phone
window.openChatbot({
  firstName: 'Juan',
  lastName: 'Pérez',
  email: 'juan.perez@example.com',
  customData: {
    courseID: '1478',
    courseName: 'Licenciatura...',
    country: 'Argentina',
    phones: {
      countryCode: 54,
      areaCode: 11,
      number: 12345678
    }
  }
});

// Get current UUID
window.getChatbotUuid();

📚 Documentation

📖 Testing Documentation 📋 Project README