Añade IA conversacional inteligente a tu sitio web en solo unos minutos con nuestra guía de integración fácil y editor de temas en vivo.
Encuentra tu clave de chat única en tu panel de control
<script> (function() { const CHAT_KEY = 'chat-ChaxiAI-1750700934457'; const THEME = { primaryColor: '#00d4ff', primaryHover: '#1d4ed8', headerBg: '#00d4ff', userMessageBg: '#2563eb', botMessageBg: '#1e293b', containerBg: '#0f172a', inputBorderColor: '#00d4ff', backgroundColor: '#020617', headerTextColor: '#ffffff', userMessageTextColor: '#ffffff', botMessageTextColor: '#e0e0e0', inputTextColor: '#ffffff', generalTextColor: '#e0e0e0', placeholderColor: '#9ca3af' }; const LOCALE = 'en'; const CHATBOT_NAME = 'Zero'; const STRINGS = (function(){ var locales = { en: { welcome: "Hi there! 👋", intro: "My name is {CHATBOT_NAME}. How can I assist you today?", startChat: "Start a chat. We're here to help you 24/7.", placeholder: "Type your question...", sorry: "Sorry, I couldn't process your request.", error: "Sorry, there was an error connecting to the server. Please try again.", openChat: "Open chat", closeChat: "Close chat", sendMsg: "Send message" }, de: { welcome: "Hallo! 👋", intro: "Mein Name ist {CHATBOT_NAME}. Wie kann ich Ihnen heute helfen?", startChat: "Starten Sie einen Chat. Wir helfen Ihnen 24/7.", placeholder: "Stellen Sie Ihre Frage...", sorry: "Entschuldigung, ich konnte Ihre Anfrage nicht verarbeiten.", error: "Entschuldigung, beim Verbinden mit dem Server ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.", openChat: "Chat öffnen", closeChat: "Chat schließen", sendMsg: "Nachricht senden" }, es: { welcome: "¡Hola! 👋", intro: "Me llamo {CHATBOT_NAME}. ¿En qué puedo ayudarte hoy?", startChat: "Inicia un chat. Estamos aquí para ayudarte 24/7.", placeholder: "Escribe tu pregunta...", sorry: "Lo siento, no pude procesar tu solicitud.", error: "Lo siento, hubo un error al conectar con el servidor. Por favor, inténtalo de nuevo.", openChat: "Abrir chat", closeChat: "Cerrar chat", sendMsg: "Enviar mensaje" }, it: { welcome: "Ciao! 👋", intro: "Mi chiamo {CHATBOT_NAME}. Come posso aiutarti oggi?", startChat: "Avvia una chat. Siamo qui per aiutarti 24/7.", placeholder: "Scrivi la tua domanda...", sorry: "Spiacente, non sono riuscito a elaborare la tua richiesta.", error: "Spiacente, si è verificato un errore di connessione al server. Riprova.", openChat: "Apri chat", closeChat: "Chiudi chat", sendMsg: "Invia messaggio" }, fr: { welcome: "Bonjour ! 👋", intro: "Je m'appelle {CHATBOT_NAME}. Comment puis-je vous aider aujourd'hui ?", startChat: "Démarrez une discussion. Nous sommes là pour vous aider 24h/24 et 7j/7.", placeholder: "Tapez votre question...", sorry: "Désolé, je n'ai pas pu traiter votre demande.", error: "Désolé, une erreur s'est produite lors de la connexion au serveur. Veuillez réessayer.", openChat: "Ouvrir le chat", closeChat: "Fermer le chat", sendMsg: "Envoyer le message" } }; var s = locales[LOCALE] || locales['en']; for (var k in s) { if (typeof s[k] === 'string') s[k] = s[k].replace('{CHATBOT_NAME}', CHATBOT_NAME); } return s; })(); var $fVdQt=(function(){var _qvyZa=[];return function(s){return s;}})();var _Zx_Yq=(function(){var $MsSQu={},$Qjhhm={},$iuctH=[];var sessionId;function generateSessionId(){if(!sessionId){var timestamp=Date.now();var randomStr=Math.random().toString(36).substring(2,8);sessionId=CHAT_KEY+'-'+timestamp+'-'+randomStr;}return sessionId;}var _eHd$d=function(){var s=document[$fVdQt('createElement')]('style');s.textContent=".chat-widget{position:fixed;bottom:20px;right:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;z-index:9999}.chat-toggle{width:60px;height:60px;border-radius:50%;background:"+THEME.primaryColor+";border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:all 0.3s ease;position:fixed;bottom:20px;right:20px}.chat-toggle:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(0,0,0,0.2)}.chat-toggle svg{width:30px;height:30px;fill:white}.chat-container{position:fixed;bottom:80px;right:20px;width:380px;height:600px;max-height:calc(100vh - 100px);background:"+THEME.containerBg+";border-radius:16px;box-shadow:0 12px 24px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px);pointer-events:none;transition:all 0.3s ease;z-index:10000}.chat-container.active{opacity:1;transform:translateY(0);pointer-events:auto}.chat-header{background:"+THEME.headerBg+";color:"+THEME.headerTextColor+";padding:16px 20px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.chat-header h3{margin:0;font-size:16px;font-weight:600;color:"+THEME.headerTextColor+"}.chat-header p{margin:4px 0 0 0;font-size:14px;opacity:0.9;color:"+THEME.headerTextColor+"}.close-btn{background:none;border:none;color:"+THEME.headerTextColor+";cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.2s}.close-btn:hover{background:rgba(255,255,255,0.1)}.close-btn svg{width:20px;height:20px;fill:currentColor}.messages-container{flex:1;overflow-y:auto;padding:20px;background:"+THEME.backgroundColor+";color:"+THEME.generalTextColor+"}.message{margin-bottom:16px;display:flex;animation:messageSlide 0.3s ease}@keyframes messageSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{justify-content:flex-end}.message-bubble{max-width:70%;padding:12px 16px;border-radius:12px;word-wrap:break-word}.message.bot .message-bubble{background:"+THEME.botMessageBg+";color:"+THEME.botMessageTextColor+";box-shadow:0 1px 2px rgba(0,0,0,0.15)}.message.user .message-bubble{background:"+THEME.userMessageBg+";color:"+THEME.userMessageTextColor+"}.typing-indicator{display:flex;gap:4px;padding:12px 16px;background:"+THEME.botMessageBg+";border-radius:12px;width:fit-content;box-shadow:0 1px 2px rgba(0,0,0,0.15)}.typing-indicator span{width:8px;height:8px;background:#6b7280;border-radius:50%;animation:typing 1.4s infinite}.typing-indicator span:nth-child(2){animation-delay:0.2s}.typing-indicator span:nth-child(3){animation-delay:0.4s}@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}.input-container{padding:20px;border-top:1px solid "+THEME.inputBorderColor+";background:"+THEME.backgroundColor+"}.input-wrapper{display:flex;gap:8px}.message-input{flex:1;padding:12px 16px;border:1px solid "+THEME.inputBorderColor+";border-radius:8px;font-size:14px;outline:none;transition:border-color 0.2s;background:rgba(255,255,255,0.05);color:"+THEME.inputTextColor+"}.message-input::placeholder{color:"+THEME.placeholderColor+"}.message-input:focus{border-color:"+THEME.primaryColor+";background:rgba(255,255,255,0.08)}.send-btn{padding:12px 16px;background:"+THEME.primaryColor+";color:"+THEME.headerTextColor+";border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}.send-btn:hover{background:"+THEME.primaryHover+"}.send-btn:disabled{background:#d1d5db;cursor:not-allowed}.send-btn svg{width:20px;height:20px;fill:currentColor}@media(max-width:480px){.chat-container{width:100vw;height:100vh;max-height:100vh;bottom:0;right:0;border-radius:0}.chat-container.active{bottom:0}.chat-toggle{bottom:20px;right:20px}}";document.head.appendChild(s);var w=document[$fVdQt('createElement')]('div');w.innerHTML='<div id="chat-widget" class="chat-widget"><button class="chat-toggle" aria-label="'+STRINGS.openChat+'"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 3 .97 4.29L1 23l6.71-1.97C9 21.64 10.46 22 12 22c5.52 0 10-4.48 10-10s-4.48-10-10-10z"/></svg></button><div class="chat-container"><div class="chat-header"><div><h3>'+STRINGS.welcome+'</h3><p>'+STRINGS.startChat+'</p></div><button class="close-btn" aria-label="'+STRINGS.closeChat+'"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></button></div><div class="messages-container" id="messages-container"></div><div class="input-container"><div class="input-wrapper"><input type="text" class="message-input" id="message-input" placeholder="'+STRINGS.placeholder+'" autocomplete="off"><button class="send-btn" id="send-btn" aria-label="'+STRINGS.sendMsg+'"><svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg></button></div></div></div></div>';document.body.appendChild(w.firstElementChild);$MsSQu={t:document.querySelector('.chat-toggle'),c:document.querySelector('.chat-container'),x:document.querySelector('.close-btn'),m:document.getElementById('messages-container'),i:document.getElementById('message-input'),s:document.getElementById('send-btn')};var o=false,t=false,h=[];$MsSQu.t.onclick=function(){o?$GuGPh():$zaJWw()};$MsSQu.x.onclick=function(){$GuGPh()};$MsSQu.s.onclick=$BWiJv;$MsSQu.i.onkeypress=function(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();$BWiJv()}};var $zaJWw=function(){o=true;$MsSQu.c.classList.add('active');$MsSQu.t.innerHTML='<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>';$MsSQu.i.focus()};var $GuGPh=function(){o=false;$MsSQu.c.classList.remove('active');$MsSQu.t.innerHTML='<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 3 .97 4.29L1 23l6.71-1.97C9 21.64 10.46 22 12 22c5.52 0 10-4.48 10-10s-4.48-10-10-10z"/></svg>'};var _InJNU=function(t,s){var d=document.createElement('div');d.className='message '+(s||'user');var b=document.createElement('div');b.className='message-bubble';b.textContent=t;d.appendChild(b);$MsSQu.m.appendChild(d);$MsSQu.m.scrollTop=$MsSQu.m.scrollHeight;h.push({text:t,sender:s||'user',timestamp:new Date()})};var _EMteb=function(){if(!t){t=true;var d=document.createElement('div');d.className='message bot typing-message';d.innerHTML='<div class="typing-indicator"><span></span><span></span><span></span></div>';$MsSQu.m.appendChild(d);$MsSQu.m.scrollTop=$MsSQu.m.scrollHeight}};var _nbJG_=function(){t=false;var x=$MsSQu.m.querySelector('.typing-message');if(x)x.remove()};var $BWiJv=async function(){var m=$MsSQu.i.value.trim();if(!m)return;_InJNU(m,'user');$MsSQu.i.value='';$MsSQu.i.disabled=true;$MsSQu.s.disabled=true;_EMteb();try{var r=await fetch('https://n8n-playground.captain.ofelwin.com/webhook/chat-ChaxiAI-1750700934457/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'sendMessage',sessionId:generateSessionId(),message:m,history:h,timestamp:new Date().toISOString()})});if(!r.ok)throw new Error('HTTP error! status:'+r.status);var d=await r.json();_nbJG_();_InJNU(d.output||STRINGS.sorry,'bot')}catch(e){console.error('Error:',e);_nbJG_();_InJNU(STRINGS.error,'bot')}finally{$MsSQu.i.disabled=false;$MsSQu.s.disabled=false;$MsSQu.i.focus()}};[STRINGS.welcome,STRINGS.intro].forEach(function(m,i){setTimeout(function(){_InJNU(m,'bot')},i*500)});};if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',_eHd$d)}else{_eHd$d()}return{init:_eHd$d}})(); })(); </script>
Coloca este código justo antes de la etiqueta de cierre </body> en tu HTML para el mejor rendimiento.
Sigue estos pasos simples para añadir tu chatbot a cualquier sitio web
Copia el código JavaScript generado arriba con tus configuraciones personalizadas.
Añade el código al HTML de tu sitio web, preferiblemente antes de la etiqueta de cierre </body>.
Tu chatbot ahora está en vivo en tu sitio web y listo para interactuar con los visitantes.
Todo lo que necesitas saber sobre la integración de ChaxiAI
¡No! Nuestra integración está diseñada para ser simple de copiar y pegar. Solo copia el código generado y agrégalo a tu sitio web antes de la etiqueta de cierre </body>.
No, nuestro chatbot está optimizado para el rendimiento y se carga de forma asíncrona. No afectará la velocidad de carga de tu sitio web ni la experiencia del usuario.
¡Sí! Usa nuestro editor de temas en vivo para personalizar colores, fuentes y estilos para que coincidan perfectamente con tu marca. Puedes previsualizar los cambios en tiempo real.
Nuestro chatbot funciona en cualquier sitio web que soporte JavaScript, incluyendo WordPress, Shopify, Wix, Squarespace y sitios web personalizados.