Guida Pratica — Testata e Funzionante

Come collegare il tuo sito web
all’Intelligenza Artificiale

Integra un chatbot AI sul tuo sito PHP in meno di un’ora: 3 file, streaming in tempo reale, icona flottante. Senza plugin, senza abbonamenti mensili, senza toccare il codice esistente.

Aprile 2026 Lettura ~10 min Codice completo incluso Testato su Aruba, MAMP

Testato e funzionante su sito reale

Indice dei contenuti

Cosa serve prima di iniziare Come funziona l’architettura La struttura dei file I 3 file + .htaccess (codice) Come integrarlo nel sito Il widget icona flottante Risoluzione problemi Costi e compatibilità Vantaggi SEO e di business

Aggiungere un chatbot AI al proprio sito web non è più appannaggio delle grandi aziende. Con l’API di Claude (Anthropic) e poche righe di PHP, chiunque può integrare un assistente virtuale intelligente, capace di rispondere in modo naturale e specializzato sugli argomenti del proprio sito.

Questa guida mostra esattamente come farlo — passo dopo passo, con il codice reale usato su un sito PHP già online e testato in produzione. Niente teoria: solo istruzioni pratiche e verificate.

Risultato finale: un pulsante “Chatta con AI” flottante su tutte le pagine, con finestra chat, streaming in tempo reale e risposte specializzate sul tuo dominio.

1. Cosa serve prima di iniziare

Hosting PHP

PHP 8.0+ con cURL abilitato. Funziona con Aruba, SiteGround, OVH, MAMP locale.

Chiave API

Gratuita da console.anthropic.com. Minimo 5 $ di crediti per iniziare.

Sito PHP

Qualsiasi sito PHP esistente. Non si modifica header, footer o codice esistente.

Editor testo

VS Code, Notepad++ o simile. Salva in UTF-8 senza BOM.

2. Come funziona l’architettura

Il browser non comunica mai direttamente con l’API Anthropic: passa sempre attraverso il server PHP, che custodisce la chiave API in modo sicuro.

Perché il proxy PHP? Se il browser chiamasse l’API direttamente, la chiave sarebbe visibile a chiunque con “Ispeziona elemento”. Il proxy risolve questo tenendo la chiave sul server.

L’utente scrive una domanda

Il browser invia la domanda a ai-proxy.php tramite POST in JSON.

Il proxy aggiunge la chiave e chiama Claude

PHP legge la chiave da configAI.php e chiama l’API con streaming abilitato.

Claude genera in streaming

Risposta via Server-Sent Events: ogni parola trasmessa appena generata.

Il testo appare in tempo reale

JavaScript aggiorna la chat parola per parola — come ChatGPT.

3. La struttura dei file

Tutti i file vanno nella cartella principale del sito (www.miosito.it, public_html o htdocs). Crei solo i 3 file in verde.

📁 www.miosito.it/
  📄 index.php ← il tuo sito (non si tocca)
  📄 header.php ← il tuo header (non si tocca)
  📄 footer.php ← il tuo footer (non si tocca)
  📄 .htaccess ← aggiungi solo le righe indicate
  📄 configAI.php ← NUOVO: chiave API sicura
  📄 ai-proxy.php ← NUOVO: proxy server
  📄 chatbot.php ← NUOVO: widget flottante

4. I 3 file + .htaccess — codice completo

Copia ogni file, salvalo con il nome indicato e caricalo via FTP. Sostituisci la chiave segnaposto in configAI.php con la tua chiave reale prima di caricarla.

configAI.php

ai-proxy.php

chatbot.php

.htaccess

📄 configAI.php

<?php
// configAI.php — chiave API Anthropic
// Non raggiungibile dal browser (protetto da .htaccess)

define('ANTHROPIC_API_KEY', 'sk-ant-METTI-QUI-LA-TUA-CHIAVE');
?>

Sostituisci sk-ant-METTI-QUI-LA-TUA-CHIAVE con la chiave reale da console.anthropic.com → API Keys.

📄 ai-proxy.php — PHP 8.0–8.4

<?php
// ai-proxy.php — proxy sicuro lato server
// curl_close() OMESSO: deprecato in PHP 8.4

require_once __DIR__ . '/configAI.php';

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no');

$body = file_get_contents('php://input');
$data = json_decode($body, true);
$data['stream'] = true;

$ch = curl_init('https://api.anthropic.com/v1/messages');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'x-api-key: ' . ANTHROPIC_API_KEY,
    'anthropic-version: 2023-06-01'
]);
curl_setopt($ch, CURLOPT_WRITEFUNCTION,
    function($ch, $chunk): int {
        echo $chunk;
        ob_flush();
        flush();
        return strlen($chunk);
    }
);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
curl_exec($ch);
?>

curl_close() omessa: deprecata in PHP 8.4, la connessione si chiude automaticamente.

📄 chatbot.php — widget “Chatta con AI”

<?php
// chatbot.php — widget AI flottante
// Includilo con: <?php include 'chatbot.php'; ?>
// Anti-loop: se incluso piu' volte esce subito
if (defined('AI_CHAT_LOADED')) return;
define('AI_CHAT_LOADED', true);
?>
<style>
#ai-fab{position:fixed;bottom:28px;right:28px;width:auto;
  height:50px;border-radius:30px;padding:0 20px 0 16px;
  background:linear-gradient(135deg,#0F6E56,#1D9E75);
  border:none;cursor:pointer;gap:8px;
  box-shadow:0 4px 20px rgba(15,110,86,.45);
  display:flex;align-items:center;
  justify-content:center;z-index:9999;
  transition:transform .2s,box-shadow .2s;}
#ai-fab:hover{transform:scale(1.05);}
#ai-fab .ai-badge{position:absolute;top:4px;right:4px;
  width:11px;height:11px;border-radius:50%;
  background:#7dffb3;border:2px solid white;
  animation:aip 2s infinite;}
@keyframes aip{0%,100%{opacity:1}50%{opacity:.3}}
#ai-win{position:fixed;bottom:90px;right:28px;
  width:360px;max-height:520px;border-radius:16px;
  overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.18);
  z-index:9998;display:none;flex-direction:column;
  background:white;border:1px solid #e0e0e0;
  animation:ais .22s ease;}
#ai-win.open{display:flex;}
@keyframes ais{
  from{opacity:0;transform:translateY(18px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}}
.ai-hdr{background:linear-gradient(135deg,#0F6E56,#1D9E75);
  padding:13px 16px;display:flex;align-items:center;
  gap:10px;flex-shrink:0;}
.ai-av{width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.2);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;}
.ai-hdr h3{color:white;font-size:14px;font-weight:600;
  margin:0;font-family:'Segoe UI',sans-serif;}
.ai-hdr p{color:rgba(255,255,255,.75);font-size:11px;
  margin:0;font-family:'Segoe UI',sans-serif;}
#ai-close{margin-left:auto;background:rgba(255,255,255,.15);
  border:none;cursor:pointer;width:28px;height:28px;
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
  transition:background .15s;}
#ai-close:hover{background:rgba(255,255,255,.3);}
.ai-quick{padding:7px 9px 0;display:flex;flex-wrap:wrap;
  gap:5px;background:#f8f8f8;
  border-bottom:1px solid #eee;flex-shrink:0;}
.ai-qbtn{font-size:11.5px;padding:3px 9px;
  border:1px solid #ddd;border-radius:20px;background:white;
  cursor:pointer;font-family:'Segoe UI',sans-serif;
  margin-bottom:7px;transition:border-color .15s;}
.ai-qbtn:hover{border-color:#1D9E75;color:#0F6E56;}
.ai-msgs{flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;
  gap:9px;background:#fafafa;}
.ai-mu,.ai-mb{max-width:82%;padding:8px 13px;
  border-radius:14px;font-size:13.5px;line-height:1.55;
  font-family:'Segoe UI',sans-serif;}
.ai-mu{align-self:flex-end;background:#1D9E75;
  color:white;border-bottom-right-radius:3px;}
.ai-mb{align-self:flex-start;background:white;
  color:#222;border:1px solid #e8e8e8;
  border-bottom-left-radius:3px;}
.ai-typing{align-self:flex-start;display:none;gap:4px;
  padding:9px 13px;background:white;
  border:1px solid #e8e8e8;border-radius:14px;
  border-bottom-left-radius:3px;flex-shrink:0;}
.ai-typing.show{display:flex;}
.ai-dt{width:6px;height:6px;border-radius:50%;
  background:#aaa;animation:aib 1.2s infinite;}
.ai-dt:nth-child(2){animation-delay:.2s}
.ai-dt:nth-child(3){animation-delay:.4s}
@keyframes aib{0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-5px)}}
.ai-inp-area{padding:9px;background:#f5f5f5;
  border-top:1px solid #e8e8e8;
  display:flex;gap:7px;flex-shrink:0;}
.ai-inp{flex:1;border:1px solid #ddd;border-radius:20px;
  padding:7px 13px;font-size:13.5px;outline:none;
  font-family:'Segoe UI',sans-serif;background:white;}
.ai-inp:focus{border-color:#1D9E75;}
.ai-send{width:36px;height:36px;border-radius:50%;
  background:#1D9E75;border:none;cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;
  justify-content:center;transition:opacity .15s;}
.ai-send:hover{opacity:.85;}
.ai-send:disabled{opacity:.35;cursor:not-allowed;}
@media(max-width:420px){
  #ai-win{width:calc(100vw - 20px);
    right:10px;left:10px;bottom:88px;}
  #ai-fab{bottom:18px;right:18px;}}
</style>

<button id="ai-fab" onclick="aiToggle()" title="Chatta con AI">
  <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0
      2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3
      H6V9h12v2zm0-3H6V6h12v2z"/>
  </svg>
  <span style="color:white;font-size:13px;font-weight:600;
    font-family:'Segoe UI',sans-serif;">Chatta con AI</span>
  <span class="ai-badge"></span>
</button>

<div id="ai-win">
  <div class="ai-hdr">
    <div class="ai-av">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
          10-4.48 10-10S17.52 2 12 2zm-1 15v-4H7
          l5-8v4h4l-5 8z"/>
      </svg>
    </div>
    <div>
      <h3>A.I. Assistant</h3>
      <p>Assistente AI — www.miosito.it</p>
    </div>
    <button id="ai-close" onclick="aiToggle()">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="white">
        <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="ai-quick">
    <button class="ai-qbtn"
      onclick="aiAsk('Come posso contattarvi?')">Contatti</button>
    <button class="ai-qbtn"
      onclick="aiAsk('Quali servizi offrite?')">Servizi</button>
    <button class="ai-qbtn"
      onclick="aiAsk('Come posso acquistare?')">Acquisti</button>
    <button class="ai-qbtn"
      onclick="aiAsk('Avete una FAQ?')">FAQ</button>
  </div>
  <div class="ai-msgs" id="ai-msgs">
    <div class="ai-mb">Ciao! Sono l’assistente AI di
      <strong>www.miosito.it</strong>.
      Come posso aiutarti?</div>
  </div>
  <div class="ai-typing" id="ai-typing">
    <div class="ai-dt"></div>
    <div class="ai-dt"></div>
    <div class="ai-dt"></div>
  </div>
  <div class="ai-inp-area">
    <input type="text" class="ai-inp" id="ai-inp"
      placeholder="Scrivi una domanda..."
      onkeydown="if(event.key==='Enter') aiSend()">
    <button class="ai-send" id="ai-btn" onclick="aiSend()">
      <svg width="15" height="15" viewBox="0 0 24 24"
        fill="white"><path d="M2 21L23 12 2 3v7l15 2-15 2z"/>
      </svg>
    </button>
  </div>
</div>

<script>
const AI_P=`Sei l'assistente virtuale di www.miosito.it.
Rispondi professionale e amichevole. Max 200 parole.
Se non conosci, invita a contattare lo staff.`;
const aiH=[];let aiB=false;
function aiToggle(){const w=document.getElementById('ai-win');
  const o=w.classList.toggle('open');
  if(o){document.querySelector('.ai-badge').style.display='none';
    document.getElementById('ai-inp').focus();}}
async function aiSend(){if(aiB)return;
  const i=document.getElementById('ai-inp');
  const t=i.value.trim();if(!t)return;
  i.value='';aiB=true;
  document.getElementById('ai-btn').disabled=true;
  aiA(t,'u');aiH.push({role:'user',content:t});
  document.getElementById('ai-typing').classList.add('show');
  aiS();
  try{const r=await fetch('ai-proxy.php',{method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({model:'claude-sonnet-4-6',
      max_tokens:500,system:AI_P,messages:aiH})});
    document.getElementById('ai-typing').classList.remove('show');
    const b=aiA('','b');let f='';
    const rd=r.body.getReader();const dc=new TextDecoder();
    while(true){const{done,value}=await rd.read();
      if(done)break;
      for(const l of dc.decode(value).split('\n')){
        if(!l.startsWith('data: '))continue;
        try{const d=JSON.parse(l.slice(6));
          if(d.type==='content_block_delta'&&d.delta?.text){
            f+=d.delta.text;
            b.innerHTML=f.replace(/\n/g,'<br>')
              .replace(/\*\*(.*?)\*\*/g,'<strong>$1</strong>');
            aiS();}}catch(e){}}}
    aiH.push({role:'assistant',content:f});}
  catch(e){document.getElementById('ai-typing').classList.remove('show');
    aiA('Errore. Riprova.','b');}
  aiB=false;
  document.getElementById('ai-btn').disabled=false;
  document.getElementById('ai-inp').focus();}
function aiAsk(t){
  if(!document.getElementById('ai-win').classList.contains('open'))
    aiToggle();
  document.getElementById('ai-inp').value=t;aiSend();}
function aiA(t,r){const b=document.getElementById('ai-msgs');
  const d=document.createElement('div');
  d.className='ai-m'+r;d.innerHTML=t;
  b.appendChild(d);aiS();return d;}
function aiS(){const b=document.getElementById('ai-msgs');
  b.scrollTop=b.scrollHeight;}
</script>

Personalizza AI_P: descrivi chi e' il tuo assistente e di cosa si occupa il sito.

📄 .htaccess — blocca accesso ai file sensibili

# .htaccess
# Se hai gia' un .htaccess, aggiungi solo questi blocchi in fondo.

<Files "configAI.php">
    Order Allow,Deny
    Deny from all
</Files>

<FilesMatch "^config.*\.php$">
    Order Allow,Deny
    Deny from all
</FilesMatch>

<Files ".htaccess">
    Order Allow,Deny
    Deny from all
</Files>

Se hai gia' un .htaccess non sostituirlo: aggiungi solo i blocchi in fondo al file esistente.

5. Come integrarlo nel sito

Dopo aver caricato i 3 file via FTP, aggiungi una sola riga in index.php prima di </body>:

index.php — aggiungi questa riga

<?php include 'footer.php'; ?>
<?php include 'chatbot.php'; ?>
</body></html>

Il chatbot appare su ogni pagina. Non si tocca header.php, footer.php o altro.

Il pulsante verde a forma di pillola è fisso in basso a destra. Non interferisce con il layout. Al clic si apre la finestra chat con animazione, domande rapide e streaming in tempo reale.

Personalizzazioni rapide

Spostare a sinistra: right:28px → left:28px in #ai-fab e #ai-win
Cambiare colore: modifica #0F6E56 e #1D9E75
Testo pulsante: modifica “Chatta con AI” nel tag <span>
Domande rapide: modifica il testo nei 4 pulsanti .ai-qbtn
Specializzare: modifica AI_P nel JavaScript

7. Risoluzione problemi comuni

Problema	Causa	Soluzione
Codice PHP visibile	File aperto con doppio clic	Aprire via `http://localhost:8888/`
`curl_close() deprecated`	PHP 8.4	Usare il codice di questa guida (senza quella riga)
Memoria esaurita	chatbot.php incluso due volte	Il controllo `defined('AI_CHAT_LOADED')` risolve
Chatbot senza risposta	URL fetch sbagliato	Usare `fetch('ai-proxy.php'` senza slash
Errore 404	Sito in sottocartella	Percorso relativo senza `/` iniziale
Errore 401	Chiave non valida o crediti esauriti	Verificare su console.anthropic.com

8. Costi e compatibilità

5 $

Crediti minimi

~2.500

Risposte con 5 $

File da creare

Modello	Costo/risposta	Con 5 $
claude-sonnet-4-6 consigliato	~0,002 $	~2.500
claude-haiku-4-5 economico	~0,0003 $	~16.000
claude-opus-4-6 potente	~0,015 $	~333

Hosting compatibili

Aruba — compatibile, cURL abilitato di default
SiteGround / OVH / Infomaniak — compatibile
MAMP (Mac) / XAMPP / WAMP (Windows) — compatibile
PHP richiesto: 8.0 o superiore

9. Vantaggi SEO e di business

Riduzione bounce rate: gli utenti interattivi restano 3–5 volte più a lungo.
Disponibilità 24/7: risponde anche di notte e nei weekend.
Lead generation: cattura domande e le converte in opportunità di contatto.
Autorevolezza: un assistente AI preciso posiziona il sito come innovativo.
Dati strategici: le domande rivelano bisogni reali per la strategia SEO.
Differenziazione: pochissimi siti italiani hanno un chatbot AI integrato.

Checklist di installazione

Chiave API ottenuta

Crediti aggiunti (min 5 $)

configAI.php creato

ai-proxy.php caricato

chatbot.php caricato

.htaccess aggiornato

Include in index.php

10 minChiave API

10 min3 file PHP

5 minFTP upload

5 minInclude PHP

⚡ ~30 mintotale

chatbot AI PHP intelligenza artificiale sito web API Claude Anthropic streaming SSE PHP assistente virtuale PHP 8.4 widget flottante integrare AI sito chatbot Aruba proxy PHP API

AI in sito WEB

Come collegare il tuo sito web
all’Intelligenza Artificiale

Indice dei contenuti

1. Cosa serve prima di iniziare

Hosting PHP

Chiave API

Sito PHP

Editor testo

2. Come funziona l’architettura

L’utente scrive una domanda

Il proxy aggiunge la chiave e chiama Claude

Claude genera in streaming

Il testo appare in tempo reale

3. La struttura dei file

4. I 3 file + .htaccess — codice completo

5. Come integrarlo nel sito

6. Il widget icona flottante

Personalizzazioni rapide

7. Risoluzione problemi comuni

8. Costi e compatibilità

Hosting compatibili

9. Vantaggi SEO e di business

Checklist di installazione

Walter Livio Bollini

Cerca nel Sito

Categorie

About

Blog

Seguimi

Iscriviti alla newsletter

Questo Sito è in costruzione!!

AI in sito WEB

Come collegare il tuo sito weball’Intelligenza Artificiale

Indice dei contenuti

1. Cosa serve prima di iniziare

Hosting PHP

Chiave API

Sito PHP

Editor testo

2. Come funziona l’architettura

L’utente scrive una domanda

Il proxy aggiunge la chiave e chiama Claude

Claude genera in streaming

Il testo appare in tempo reale

3. La struttura dei file

4. I 3 file + .htaccess — codice completo

5. Come integrarlo nel sito

6. Il widget icona flottante

Personalizzazioni rapide

7. Risoluzione problemi comuni

8. Costi e compatibilità

Hosting compatibili

9. Vantaggi SEO e di business

Checklist di installazione

Walter Livio Bollini

Cerca nel Sito

Categorie

About

Blog

Seguimi

Iscriviti alla newsletter

Questo Sito è in costruzione!!

Come collegare il tuo sito web
all’Intelligenza Artificiale