Documentation

Intégration iframe

Intégrez l’interface de chat complète dans une section de page.

Intégrez l’agent sous forme d’interface complète dans votre page, plutôt que comme widget flottant. Idéal pour les pages d’assistance dédiées ou les centres d’aide.

Quand utiliser une iframe

Utilisez l’intégration iframe si vous voulez :

  • Une page de chat dédiée (par exemple /support ou /help)
  • Que le chat fasse partie de la mise en page
  • Plus de contrôle sur la taille de l’interface de chat
  • L’intégrer dans une documentation ou une section d’aide

Pour une bulle de discussion flottante, utilisez plutôt le widget JavaScript.

Intégration iframe basique

  1. Accédez à l’onglet Publier de votre agent
  2. Sélectionnez le type d’intégration Iframe
  3. Copiez le code iframe affiché
  4. Collez-le dans votre HTML

Votre code iframe inclut l’URL correcte avec l’ID de votre agent. Vous pouvez aussi cliquer sur le bouton Visiter pour prévisualiser la page iframe.

Options de dimensionnement

Une fois votre code iframe copié depuis Chatbot > Publier, vous pouvez ajuster le dimensionnement :

Taille fixe

Définissez des attributs de largeur et de hauteur spécifiques :

width="400"
height="600"

Pleine largeur

Utilisez une largeur en pourcentage :

width="100%"
height="600"

Pleine hauteur (dans un conteneur)

Enveloppez l’iframe dans un conteneur avec une hauteur de viewport :

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

Conteneur responsive

Pour un chat responsive qui s’adapte à la taille de l’écran, enveloppez votre iframe dans un conteneur :

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

Styliser le conteneur

Ajoutez des styles CSS à votre iframe pour un rendu plus soigné :

Avec bordure

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

Avec ombre

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

Exemple : page d’assistance

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

Restrictions de domaine

Les intégrations iframe respectent les restrictions de domaine :

  • Ajoutez le domaine de votre site web aux domaines autorisés
  • L’iframe ne se chargera pas sur les domaines non autorisés

Configurer les domaines →

Dépannage

L’iframe ne se charge pas

  • Vérifiez que les restrictions de domaine incluent votre site
  • Vérifiez que l’ID de l’agent est correct
  • Vérifiez la console du navigateur pour repérer les erreurs

Problèmes de défilement

  • Définissez une hauteur fixe sur l’iframe
  • Ou utilisez overflow: hidden sur le conteneur

Conflits de style

  • L’iframe est isolée des styles de votre page
  • Les styles du conteneur n’affectent pas le contenu du chat

Étapes suivantes