Come Integrare un Chatbot AI nel Tuo Sito Web in 5 Minuti

Introduzione

Integrare un chatbot AI nel tuo sito web non richiede piu settimane di sviluppo o competenze tecniche avanzate. Con le moderne piattaforme, puoi avere un assistente AI funzionante in pochi minuti. Vediamo come.

Prima di Iniziare

Requisiti

Accesso al codice del tuo sito web (o al CMS)
Un account sulla piattaforma chatbot (es. Artiko)
5-10 minuti del tuo tempo

Cosa Otterrai

Un widget chat nell'angolo del tuo sito
Risposte automatiche basate sulla tua knowledge base
Possibilita di passaggio a operatori umani
Analytics sulle conversazioni

Metodo 1: Snippet JavaScript (Universale)

Step 1: Ottieni il Codice

Dalla dashboard della tua piattaforma chatbot, genera il codice di integrazione. Avra un aspetto simile a questo:

<script>
  (function(w,d,s,o,f,js,fjs){
    w['ArtikoWidget']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','artiko','https://widget.artiko.ai/v1/widget.js'));
  artiko('init', 'YOUR_CHATBOT_ID');
</script>

Step 2: Incolla nel Sito

Inserisci il codice prima della chiusura del tag </body> nel tuo HTML:

<!DOCTYPE html>
<html>
<head>
  <!-- Il tuo head -->
</head>
<body>
  <!-- Il contenuto del tuo sito -->

  <!-- Widget Artiko - inserisci qui -->
  <script>
    // Il codice copiato sopra
  </script>
</body>
</html>

Step 3: Verifica

Ricarica il sito. Dovresti vedere il widget chat nell'angolo in basso a destra.

Metodo 2: WordPress

Con Plugin

Installa il plugin "Artiko AI Chat" dal marketplace WordPress
Attiva il plugin
Vai su Impostazioni > Artiko
Inserisci il tuo Chatbot ID
Salva

Senza Plugin

Vai su Aspetto > Editor del tema
Apri il file footer.php
Incolla il codice snippet prima di </body>
Salva

Metodo 3: Shopify

Dal pannello admin, vai su Negozio Online > Temi
Clicca "Azioni" > "Modifica codice"
Apri il file theme.liquid
Incolla il codice prima di </body>
Salva

Metodo 4: Wix

Vai su Impostazioni > Tracking e Analytics
Clicca "+ Nuovo strumento"
Seleziona "Personalizzato"
Incolla il codice
Imposta "Carica su tutte le pagine" e posizione "Body - end"
Salva

Personalizzazione

Colori

Puoi personalizzare i colori del widget:

artiko('init', 'YOUR_CHATBOT_ID', {
  primaryColor: '#2563eb',
  textColor: '#ffffff'
});

Posizione

Cambia la posizione del widget:

artiko('init', 'YOUR_CHATBOT_ID', {
  position: 'left' // 'left' o 'right'
});

Messaggio di Benvenuto

Personalizza il saluto iniziale:

artiko('init', 'YOUR_CHATBOT_ID', {
  welcomeMessage: 'Ciao! Come posso aiutarti oggi?'
});

Apertura Automatica

Apri il widget automaticamente dopo alcuni secondi:

artiko('init', 'YOUR_CHATBOT_ID', {
  autoOpen: true,
  autoOpenDelay: 5000 // 5 secondi
});

Opzioni Avanzate

Passare Dati Utente

Se l'utente e loggato, passa le sue informazioni:

artiko('identify', {
  email: 'utente@email.com',
  name: 'Mario Rossi',
  customFields: {
    piano: 'premium',
    registrato_da: '2023-01-15'
  }
});

Eventi Personalizzati

Traccia eventi specifici:

// Quando l'utente visita una pagina prodotto
artiko('track', 'viewed_product', {
  productId: '123',
  productName: 'Widget Pro'
});

Aprire/Chiudere Programmaticamente

// Apri il widget
artiko('open');

// Chiudi il widget
artiko('close');

// Toggle
artiko('toggle');

Troubleshooting

Il widget non appare

Verifica che il codice sia inserito correttamente
Controlla la console del browser per errori
Assicurati che il Chatbot ID sia corretto
Verifica che non ci siano ad-blocker attivi

Il widget e lento

Assicurati che lo script sia caricato in modo asincrono
Verifica la connessione internet
Controlla se altri script stanno bloccando il caricamento

Problemi di stile

Se il widget ha problemi di visualizzazione:

Verifica conflitti CSS con il tuo tema
Prova ad aggiungere un z-index piu alto
Contatta il supporto con screenshot

Conclusione

L'integrazione di un chatbot AI nel tuo sito web e ormai un'operazione semplice che richiede pochi minuti. Una volta installato, potrai personalizzare l'aspetto, configurare la knowledge base, e iniziare a servire i tuoi clienti 24/7.

Il passo successivo? Configurare la tua knowledge base per rendere l'AI veramente utile ai tuoi visitatori.