Documentatie

Iframe-inbedding

Sluit de volledige chatinterface in binnen een paginasectie.

Sluit de agent in als volledige interface binnen je pagina, in plaats van als zwevende widget. Ideaal voor speciale supportpagina's of helpcentra.

Wanneer gebruik je een iframe

Gebruik iframe-inbedding als je het volgende wilt:

  • Een aparte chatpagina (bijv. /support of /help)
  • De chat als onderdeel van de paginalayout
  • Meer controle over de afmetingen van de chatinterface
  • Inbedden in documentatie- of helpsecties

Wil je liever een zwevende chatbubbel, gebruik dan de JavaScript-widget.

Eenvoudige iframe-inbedding

  1. Ga naar het tabblad Publiceren van je agent
  2. Selecteer inbedtype Iframe
  3. Kopieer de weergegeven iframe-code
  4. Plak deze in je HTML

Je iframe-code bevat de juiste URL met je agent-id. Je kunt ook op de knop "Bezoek" klikken om de iframe-pagina te bekijken.

Formaatopties

Nadat je je iframe-code hebt gekopieerd via Chatbot > Publiceren, kun je het formaat aanpassen:

Vaste afmetingen

Stel specifieke breedte- en hoogte-attributen in:

width="400"
height="600"

Volledige breedte

Gebruik een breedte in procenten:

width="100%"
height="600"

Volledige hoogte (in een container)

Plaats in een container met een hoogte op basis van de viewport:

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

Responsieve container

Voor een chat die zich aanpast aan de schermgrootte, plaats je je iframe in een container:

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

De container stylen

Voeg CSS-stijlen toe aan je iframe voor een verzorgde uitstraling:

Met rand

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

Met schaduw

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

Voorbeeld: supportpagina

<!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"
    />
  );
}

Domeinbeperkingen

Iframe-inbeddingen respecteren domeinbeperkingen:

  • Voeg het domein van je website toe aan de toegestane domeinen
  • Het iframe laadt niet op niet-toegestane domeinen

Domeinen configureren →

Problemen oplossen

Iframe laadt niet

  • Controleer of je site is opgenomen in de domeinbeperkingen
  • Controleer of het agent-id klopt
  • Controleer de browserconsole op foutmeldingen

Scrollproblemen

  • Stel een vaste hoogte in voor het iframe
  • Of gebruik overflow: hidden op de container

Stylingconflicten

  • Het iframe is geïsoleerd van de stijlen van je pagina
  • Containerstijlen hebben geen invloed op de chatinhoud

Volgende stappen