Skip to content

Latest commit

 

History

History
273 lines (205 loc) · 6.69 KB

File metadata and controls

273 lines (205 loc) · 6.69 KB

🚀 Inicio Automático de Modo Único - AI Widget

Nueva Funcionalidad Implementada

El widget ahora inicia automáticamente el modo de interacción cuando solo hay uno habilitado, sin necesidad de mostrar los botones pequeños.


🎯 Comportamiento del Widget

Caso 1: Solo Modo VOZ Habilitado

Configuración:

  • ✅ Voz: Habilitada
  • ❌ Texto: Deshabilitada

Comportamiento:

  1. Usuario hace clic en el orbe principal
  2. Se inicia automáticamente la llamada de voz
  3. No se muestran botones pequeños
  4. El widget comienza a conectar con VAPI inmediatamente

Ventajas:

  • Un solo clic para iniciar conversación por voz
  • Experiencia más directa y rápida
  • Ideal para asistentes de voz puros

Caso 2: Solo Modo TEXTO Habilitado

Configuración:

  • ❌ Voz: Deshabilitada
  • ✅ Texto: Habilitada

Comportamiento:

  1. Usuario hace clic en el orbe principal
  2. Se abre automáticamente la ventana de chat
  3. No se muestran botones pequeños
  4. El usuario puede empezar a escribir inmediatamente

Ventajas:

  • Un solo clic para abrir el chat
  • No hay confusión con múltiples opciones
  • Ideal para chatbots de solo texto

Caso 3: Ambos Modos Habilitados (Comportamiento Original)

Configuración:

  • ✅ Voz: Habilitada
  • ✅ Texto: Habilitada

Comportamiento:

  1. Usuario hace clic en el orbe principal
  2. Se muestran los botones pequeños (voz y chat)
  3. Usuario elige el modo de interacción
  4. Se inicia el modo seleccionado

Ventajas:

  • Flexibilidad total para el usuario
  • Puede elegir entre voz o texto según preferencia

⚙️ Configuración en WordPress Admin

Para habilitar/deshabilitar modos:

  1. Ve a AI WidgetGeneral
  2. Encuentra la sección "Modos de Interacción"
  3. Activa o desactiva:
    • 🎤 Modo de Voz: Permite llamadas de voz con VAPI
    • 💬 Modo de Texto: Permite chat escrito con OpenAI

Ejemplos de Configuración:

Asistente Solo por Voz:

✅ Modo de Voz: Habilitado
❌ Modo de Texto: Deshabilitado

Resultado: Clic en orbe → Inicia llamada automáticamente

Chatbot Solo Texto:

❌ Modo de Voz: Deshabilitado
✅ Modo de Texto: Habilitado

Resultado: Clic en orbe → Abre chat automáticamente

Asistente Híbrido (Completo):

✅ Modo de Voz: Habilitado
✅ Modo de Texto: Habilitado

Resultado: Clic en orbe → Muestra opciones (voz/chat)


🔍 Verificación de Límites

Modo Solo Voz:

Cuando se inicia automáticamente, el sistema:

  1. Verifica límites de voz antes de conectar
  2. Si hay límites disponibles → Inicia llamada
  3. Si se alcanzó el límite → Muestra mensaje de error
  4. No consume recursos si no hay límites

Modo Solo Texto:

Cuando se abre automáticamente:

  1. Abre la ventana de chat
  2. Usuario escribe mensaje
  3. Al enviar → Verifica límites de texto
  4. Si hay límites → Envía mensaje
  5. Si no hay límites → Muestra upgrade prompt

💡 Casos de Uso Recomendados

1. Asistente de Voz para Call Center

Configuración: Solo Voz
Ideal para: Atención telefónica automatizada

2. Chatbot de Soporte Técnico

Configuración: Solo Texto
Ideal para: FAQ, tickets, documentación

3. Asistente de Ventas Completo

Configuración: Voz + Texto
Ideal para: Flexibilidad total, el cliente elige

4. Asistente para Personas con Discapacidad Visual

Configuración: Solo Voz
Ideal para: Accesibilidad, navegación por voz

5. Widget para Entornos Ruidosos

Configuración: Solo Texto
Ideal para: Oficinas, lugares donde no se puede hablar

🎨 Experiencia de Usuario (UX)

Antes (Siempre mostraba botones):

1. Usuario: Clic en orbe
2. Sistema: Muestra botones pequeños
3. Usuario: Clic en botón de voz/chat
4. Sistema: Inicia modo seleccionado

Total: 2 clics

Ahora (Con un solo modo):

1. Usuario: Clic en orbe
2. Sistema: Inicia automáticamente

Total: 1 clic

Mejora: 50% menos de interacciones


🔧 Detalles Técnicos de Implementación

Código Relevante:

Archivo: public/js/widget-vapi.js
Función: attachEventListeners()
Líneas: Event listener del ai-logo-button

Lógica Implementada:

// Detectar configuración
const voiceOnly = aiWidgetData.voiceEnabled && !aiWidgetData.textEnabled;
const textOnly = !aiWidgetData.voiceEnabled && aiWidgetData.textEnabled;

if (voiceOnly) {
    // Iniciar voz automáticamente
    await checkVoiceLimits();
    vapiInstance.start();
    
} else if (textOnly) {
    // Abrir chat automáticamente
    toggleChatWindow(true);
    
} else {
    // Mostrar menú de opciones
    toggleMenu();
}

Variables Usadas:

  • aiWidgetData.voiceEnabled - Configuración de modo voz
  • aiWidgetData.textEnabled - Configuración de modo texto
  • this.currentMode - Modo actual activo
  • this.isCallActive - Estado de llamada de voz
  • this.isChatOpen - Estado de ventana de chat

✅ Testing y Validación

Para verificar que funciona correctamente:

  1. Test 1: Solo Voz

    • Deshabilitar modo texto en configuración
    • Hacer clic en orbe
    • Verificar que inicia llamada automáticamente
    • Verificar que no aparecen botones pequeños
  2. Test 2: Solo Texto

    • Deshabilitar modo voz en configuración
    • Hacer clic en orbe
    • Verificar que abre chat automáticamente
    • Verificar que no aparecen botones pequeños
  3. Test 3: Ambos Modos

    • Habilitar voz y texto en configuración
    • Hacer clic en orbe
    • Verificar que aparecen botones pequeños
    • Probar clic en cada botón
  4. Test 4: Límites en Modo Único

    • Agotar límites de voz
    • Con solo voz habilitado, hacer clic
    • Verificar mensaje de límite alcanzado

🚨 Consideraciones Importantes

⚠️ ATENCIÓN:

  • Si ambos modos están deshabilitados, el widget no hará nada al hacer clic
  • Recomendación: Siempre tener al menos un modo habilitado

🔐 Seguridad:

  • Las validaciones de límites se mantienen intactas
  • No se puede bypassear el sistema de freemium
  • Los checks de límites son async y se esperan antes de iniciar

📊 Analytics:

  • El tracking de uso funciona igual
  • Se registra correctamente qué modo se usó
  • Las estadísticas reflejan el uso real

📞 Soporte y Dudas

Si tienes problemas con esta funcionalidad:

  1. Verifica la configuración en AI Widget → General
  2. Comprueba la consola del navegador (F12)
  3. Busca logs como:
    • 🎤 Solo modo voz habilitado - Iniciando automáticamente...
    • 💬 Solo modo chat habilitado - Abriendo automáticamente...

© 2024-2025 Workfluz. Funcionalidad de inicio automático.