Per aggiungere il chat widget al tuo sito, aggiungi semplicemente queste due righe nell'<head> della tua pagina HTML:
<!-- Stili del Chat Widget -->
<link rel="stylesheet" href="chat-widget.css">
<!-- Script del Chat Widget -->
<script src="chat-widget.js" defer></script>
E basta! 🎉 Il widget si caricherà automaticamente in basso a destra. Non serve aggiungere altro HTML - lo script crea tutto da solo.
Crea questi due file nella stessa cartella del tuo sito:
Puoi personalizzare colori, messaggi, risposte e la posizione di caricamento del bot modificando l'oggetto CONFIG all'inizio del file chat-widget.js.
Per cambiare la posizione del widget, imposta la proprietà iconPosition su uno dei seguenti valori:
'bottom' (Default) - Posizione fissa in basso a destra dello schermo.'top' - Posizione fissa in alto a destra dello schermo.'static' - Caricato staticamente nel flusso del documento nel punto in cui è incluso lo script, con modale al centro dello schermo e sfondo oscurato.'staticbottom' - Caricato staticamente nel flusso del documento, con modale aperta in posizione fissa in basso a destra.'hidden' - Icona nascosta; espone globalmente i metodi window.ChatWidget.open(), window.ChatWidget.close() e window.ChatWidget.toggle() per il controllo programmatico.
In alternativa alla modifica manuale dell'oggetto CONFIG nel codice JS, puoi passare la posizione desiderata come parametro query nell'URL dello script all'interno della tua pagina HTML (es. ?position=static):
<!-- Esempio di caricamento dinamico della posizione via URL -->
<script src="chat-widget.js?position=static" defer></script>
Esempio di integrazione e configurazione completo:
<!-- Aggiungi nell'head del tuo HTML -->
<link rel="stylesheet" href="chat-widget.css">
<script src="chat-widget.js" defer></script>
<!-- Configurazione all'inizio del file chat-widget.js -->
const CONFIG = {
botName: 'Angie',
botStatus: 'in fase di potenziamento!',
welcomeMessage: 'Ciao! 👋 presto tornerò a chattare con te.',
inputPlaceholder: 'Scrivi un messaggio...',
typingDelay: 1000,
urlContent: 'faq/index.html',
btnMenu: [],
iconPosition: 'static', // 'bottom', 'top', 'static', 'staticbottom', o 'hidden'
};
Quando usi la posizione 'hidden', puoi controllare il widget programmaticamente richiamando i seguenti metodi JavaScript:
// Apre la chat
window.ChatWidget.open();
// Chiude la chat
window.ChatWidget.close();
// Alterna lo stato (apri/chiudi)
window.ChatWidget.toggle();
Esempio di bottone personalizzato:
<button onclick="window.ChatWidget.toggle()">Chatta con Angie</button>