messaging-widget
Version:
Widget embebible multi-canal para WhatsApp, Instagram, Messenger y chat interno
1 lines • 4.02 kB
HTML
<html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Messaging Widget Demo</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:1200px;margin:0 auto}.hero{text-align:center;color:#fff;margin-bottom:40px}.hero h1{font-size:3rem;margin-bottom:20px}.demo-section{background:#fff;padding:30px;border-radius:15px;margin-bottom:30px}.config-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:20px}.config-group{background:#f8f9fa;padding:15px;border-radius:8px}.config-group label{display:block;margin-bottom:5px;font-weight:600}.config-group input,.config-group select{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.btn{background:#25d366;color:#fff;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;margin:5px}.btn:hover{background:#128c7e}.code-block{background:#2d3748;color:#e2e8f0;padding:15px;border-radius:6px;font-family:monospace;font-size:14px;overflow-x:auto}</style></head><body><div class="container"><div class="hero"><h1>🚀 Messaging Widget</h1><p>Widget multi-canal para WhatsApp, Instagram, Messenger y chat interno</p></div><div class="demo-section"><h2>🎯 Configurador en Vivo</h2><div class="config-options"><div class="config-group"><label for="position">Posición:</label> <select id="position"><option value="bottom-right">Abajo Derecha</option><option value="bottom-left">Abajo Izquierda</option><option value="top-right">Arriba Derecha</option><option value="top-left">Arriba Izquierda</option></select></div><div class="config-group"><label for="primaryColor">Color:</label> <input type="color" id="primaryColor" value="#25D366"></div><div class="config-group"><label for="whatsappNumber">WhatsApp:</label> <input id="whatsappNumber" value="+1234567890"></div></div><button class="btn" onclick="updateWidget()">🔄 Actualizar</button> <button class="btn" onclick="resetWidget()">↩️ Reset</button> <button class="btn" onclick="addTestMessage()">💬 Mensaje Test</button></div><div class="demo-section"><h2>📥 Instalación Básica</h2><div class="code-block"><script src="messaging-widget.min.js"></script> <script> MessagingWidget.init({ channels: { whatsapp: { enabled: true, number: '+1234567890' }, instagram: { enabled: true, username: 'tu_usuario' }, messenger: { enabled: true, pageId: 'tu_page_id' } }, appearance: { position: 'bottom-right', primaryColor: '#25D366' } }); </script></div></div></div><script src="messaging-widget.min.js"></script><script>function updateWidget(){MessagingWidget.updateConfig({channels:{whatsapp:{enabled:!0,number:document.getElementById("whatsappNumber").value},instagram:{enabled:!0,username:"ejemplo_usuario"},messenger:{enabled:!0,pageId:"ejemplo_page_id"},internalChat:{enabled:!0}},appearance:{position:document.getElementById("position").value,primaryColor:document.getElementById("primaryColor").value}}),alert("✅ Widget actualizado!")}function resetWidget(){document.getElementById("position").value="bottom-right",document.getElementById("primaryColor").value="#25D366",document.getElementById("whatsappNumber").value="+1234567890",updateWidget()}function addTestMessage(){MessagingWidget.addMessageProgrammatically("Mensaje de prueba desde la API","received"),alert("💬 Mensaje añadido al chat")}MessagingWidget.init({channels:{whatsapp:{enabled:!0,number:"+1234567890",message:"¡Hola! Me gustaría más información."},instagram:{enabled:!0,username:"ejemplo_usuario"},messenger:{enabled:!0,pageId:"ejemplo_page_id"},internalChat:{enabled:!0}},hooks:{onInit:()=>console.log("✅ Widget listo"),onChatOpen:e=>console.log(`📱 Abierto: ${e}`),onMessageSend:(e,a)=>console.log(`💬 "${e}" en ${a}`)}})</script><script defer="defer" src="messaging-widget.min.js"></script></body></html>