messaging-widget
Version:
Widget embebible multi-canal para WhatsApp, Instagram, Messenger y chat interno
277 lines (261 loc) • 8.69 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Configuración Avanzada - Messaging Widget</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.feature-card {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #007bff;
}
.feature-card h3 {
margin-top: 0;
color: #007bff;
}
.controls {
background: #e9ecef;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.controls h3 {
margin-top: 0;
}
.btn-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 10px 0;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-primary {
background: #007bff;
color: white;
}
.btn-primary:hover {
background: #0056b3;
}
.btn-success {
background: #28a745;
color: white;
}
.btn-success:hover {
background: #1e7e34;
}
.btn-warning {
background: #ffc107;
color: #212529;
}
.btn-warning:hover {
background: #e0a800;
}
.btn-danger {
background: #dc3545;
color: white;
}
.btn-danger:hover {
background: #c82333;
}
code {
background: #f8f9fa;
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<div class="container">
<h1>🔧 Configuración Avanzada del Widget</h1>
<p>Este ejemplo demuestra todas las características avanzadas del widget de mensajería.</p>
<div class="feature-grid">
<div class="feature-card">
<h3>🎨 Personalización Visual</h3>
<p>Colores personalizados, posición configurable y tamaño del botón adaptable.</p>
</div>
<div class="feature-card">
<h3>🔗 Hooks de Eventos</h3>
<p>
Callbacks para <code>onInit</code>, <code>onChatOpen</code>,
<code>onMessageSend</code> y <code>onChatClose</code>.
</p>
</div>
<div class="feature-card">
<h3>📊 Analítica Integrada</h3>
<p>Seguimiento automático de eventos y métricas de interacción del usuario.</p>
</div>
<div class="feature-card">
<h3>💬 Chat WebSocket</h3>
<p>Soporte para chat en tiempo real con reconexión automática.</p>
</div>
</div>
<div class="controls">
<h3>🎮 Controles de Demostración</h3>
<div>
<strong>Cambiar Posición:</strong>
<div class="btn-group">
<button class="btn btn-primary" onclick="changePosition('bottom-right')">
Abajo Derecha
</button>
<button class="btn btn-primary" onclick="changePosition('bottom-left')">
Abajo Izquierda
</button>
<button class="btn btn-primary" onclick="changePosition('top-right')">
Arriba Derecha
</button>
<button class="btn btn-primary" onclick="changePosition('top-left')">
Arriba Izquierda
</button>
</div>
</div>
<div>
<strong>Cambiar Tema:</strong>
<div class="btn-group">
<button class="btn btn-success" onclick="changeTheme('#25D366', '#128C7E')">
WhatsApp
</button>
<button class="btn btn-primary" onclick="changeTheme('#007bff', '#0056b3')">
Azul
</button>
<button class="btn btn-warning" onclick="changeTheme('#ffc107', '#e0a800')">
Amarillo
</button>
<button class="btn btn-danger" onclick="changeTheme('#dc3545', '#c82333')">Rojo</button>
</div>
</div>
<div>
<strong>Acciones del Chat:</strong>
<div class="btn-group">
<button class="btn btn-success" onclick="addCustomMessage()">Añadir Mensaje</button>
<button class="btn btn-primary" onclick="openInternalChat()">Abrir Chat</button>
<button class="btn btn-warning" onclick="showAnalytics()">Ver Analítica</button>
<button class="btn btn-danger" onclick="clearChat()">Limpiar Chat</button>
</div>
</div>
</div>
<div
style="
background: #d4edda;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #28a745;
"
>
<strong>💡 Tip:</strong> Abre la consola del navegador para ver los eventos en tiempo real.
</div>
</div>
<script src="../js/messaging-widget.js"></script>
<script>
MessagingWidget.init({
channels: {
whatsapp: {
enabled: true,
number: '+1234567890',
message: '¡Hola! Vengo desde la demo avanzada.',
},
instagram: { enabled: true, username: 'ejemplo_usuario' },
messenger: { enabled: true, pageId: 'ejemplo_page_id' },
internalChat: { enabled: true, socketUrl: null },
},
appearance: {
position: 'bottom-right',
primaryColor: '#007bff',
secondaryColor: '#0056b3',
buttonSize: 65,
},
internalChat: {
title: 'Soporte Avanzado',
placeholder: 'Escribe tu consulta aquí...',
welcomeMessage: '¡Bienvenido al chat avanzado!',
},
hooks: {
onInit: () => console.log('🚀 Widget avanzado inicializado'),
onChatOpen: channel => console.log(`📱 Canal abierto: ${channel}`),
onMessageSend: (message, channel) =>
console.log(`💬 Mensaje en ${channel}: "${message}"`),
onChatClose: channel => console.log(`❌ Chat cerrado: ${channel}`),
},
analytics: { enabled: true, trackClicks: true, trackMessages: true },
});
function changePosition(position) {
MessagingWidget.updateConfig({
appearance: {
position,
primaryColor: '#007bff',
secondaryColor: '#0056b3',
buttonSize: 65,
},
});
console.log(`📍 Posición cambiada a: ${position}`);
}
function changeTheme(primaryColor, secondaryColor) {
MessagingWidget.updateConfig({
appearance: { position: 'bottom-right', primaryColor, secondaryColor, buttonSize: 65 },
});
console.log(`🎨 Tema cambiado - Primario: ${primaryColor}`);
}
function addCustomMessage() {
const messages = [
'Mensaje automático del sistema',
'Gracias por usar el widget',
'El soporte ha sido notificado',
];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
MessagingWidget.addMessageProgrammatically(randomMessage, 'received');
console.log(`🤖 Mensaje añadido: "${randomMessage}"`);
}
function openInternalChat() {
MessagingWidget.openChannelDirectly('internal');
console.log('💬 Chat interno abierto programáticamente');
}
function showAnalytics() {
const analytics = MessagingWidget.getAnalytics();
console.log('📊 ANALÍTICA DEL WIDGET:', analytics);
alert(`📊 ${analytics.length} eventos registrados. Ver consola para detalles.`);
}
function clearChat() {
MessagingWidget.clearChatHistory();
console.log('🧹 Chat limpiado');
alert('✅ Chat limpiado correctamente');
}
// Demo automática
setTimeout(() => addCustomMessage(), 5000);
</script>
</body>
</html>