Integrate ChaxiAI into Your Website

<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>