Documentazione

Embedding con iframe

Inserisci l'interfaccia di chat completa in una sezione della pagina.

Incorpora l'agente come interfaccia completa all'interno della tua pagina invece che come widget fluttuante. Ideale per pagine di assistenza dedicate o help center.

Quando usare l'iframe

Usa l'embedding con iframe quando vuoi:

  • Una pagina di chat dedicata (es. /support o /help)
  • Che la chat faccia parte del layout della pagina
  • Più controllo sulla dimensione dell'interfaccia di chat
  • Incorporarla in sezioni di documentazione o assistenza

Per una chat bubble fluttuante, usa invece il widget JavaScript.

Embed iframe di base

  1. Vai alla scheda Pubblica del tuo agente
  2. Seleziona il tipo di embed Iframe
  3. Copia il codice iframe mostrato
  4. Incollalo nel tuo HTML

Il tuo codice iframe include l'URL corretto con l'ID del tuo agente. Puoi anche cliccare sul pulsante "Visita" per vedere in anteprima la pagina dell'iframe.

Opzioni di dimensionamento

Dopo aver copiato il codice iframe da Chatbot > Pubblica, puoi regolare le dimensioni:

Dimensione fissa

Imposta attributi specifici di larghezza e altezza:

width="400"
height="600"

Larghezza piena

Usa una larghezza in percentuale:

width="100%"
height="600"

Altezza piena (in un contenitore)

Racchiudilo in un contenitore con l'altezza del viewport:

<div style="height: 80vh;">
  <!-- Your iframe with width="100%" height="100%" -->
</div>

Contenitore responsive

Per una chat responsive che si adatta allo schermo, racchiudi il tuo iframe in un contenitore:

<div style="position: relative; width: 100%; max-width: 500px; height: 0; padding-bottom: 120%;">
  <!-- Your iframe with position: absolute; top: 0; left: 0; width: 100%; height: 100%; -->
</div>

Stilizzare il contenitore

Aggiungi stili CSS al tuo iframe per rifinirlo visivamente:

Con bordo

style="border: 1px solid #e5e7eb; border-radius: 8px;"

Con ombra

style="border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);"

Esempio: pagina di assistenza

<!DOCTYPE html>
<html>
<head>
  <title>Support - Your Company</title>
  <style>
    .support-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .chat-frame {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="support-container">
    <h1>How can we help?</h1>
    <p>Chat with our AI assistant below:</p>

    <div class="chat-frame">
      <!-- Paste your iframe code from Chatbot > Publish here -->
    </div>
  </div>
</body>
</html>

React / Next.js

export function SupportChat() {
  // Get iframe URL from Chatbot > Publish
  const iframeUrl = 'YOUR_IFRAME_URL';

  return (
    <iframe
      src={iframeUrl}
      className="w-full h-[600px] border rounded-lg"
    />
  );
}

Restrizioni di dominio

Gli embed iframe rispettano le restrizioni di dominio:

  • Aggiungi il dominio del tuo sito ai domini consentiti
  • L'iframe non si caricherà su domini non autorizzati

Configura i domini →

Risoluzione dei problemi

L'iframe non si carica

  • Controlla che le restrizioni di dominio includano il tuo sito
  • Verifica che l'ID dell'agente sia corretto
  • Controlla la console del browser per eventuali errori

Problemi di scorrimento

  • Imposta un'altezza fissa sull'iframe
  • Oppure usa overflow: hidden sul contenitore

Conflitti di stile

  • L'iframe è isolato dagli stili della tua pagina
  • Gli stili del contenitore non influenzano il contenuto della chat

Prossimi passi