Integra ChaxiAI nel tuo sito web

Aggiungi IA conversazionale intelligente al tuo sito web in pochi minuti con la nostra guida di integrazione facile e l'editor di temi dal vivo.

1

Configurazione di base

Trova la tua chiave di chat univoca nel tuo dashboard

2

Personalizzazione del tema

Temi predefiniti

Colori personalizzati

Anteprima dal vivo

Codice generato

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

Suggerimento Pro

Posiziona questo codice appena prima del tag di chiusura &lt;/body&gt; nel tuo HTML per le migliori prestazioni.

Installazione facile

Segui questi semplici passaggi per aggiungere il tuo chatbot a qualsiasi sito web

1

Copia il codice

Copia il codice JavaScript generato sopra con le tue impostazioni personalizzate.

2

Incollalo nel tuo sito web

Aggiungi il codice all'HTML del tuo sito web, preferibilmente prima del tag di chiusura &lt;/body&gt;.

3

Vai online!

Il tuo chatbot è ora online sul tuo sito web e pronto per interagire con i visitatori.

Domande Frequenti

Tutto quello che devi sapere sull'integrazione di ChaxiAI

Ho bisogno di competenze tecniche per integrare il chatbot?

No! La nostra integrazione è progettata per essere semplice da copiare e incollare. Basta copiare il codice generato e aggiungerlo al tuo sito web prima del tag di chiusura &lt;/body&gt;.

Il chatbot rallenterĂ  il mio sito web?

No, il nostro chatbot è ottimizzato per le prestazioni e si carica in modo asincrono. Non influenzerà la velocità di caricamento del tuo sito web o l'esperienza utente.

Posso personalizzare l'aspetto del chatbot?

SĂŹ! Usa il nostro editor di temi dal vivo per personalizzare colori, font e stili per abbinarsi perfettamente al tuo brand. Puoi visualizzare le modifiche in tempo reale.

Quali piattaforme sono supportate?

Il nostro chatbot funziona su qualsiasi sito web che supporta JavaScript, inclusi WordPress, Shopify, Wix, Squarespace e siti web personalizzati.