Intégration

Une fois votre chatbot configuré, la section Installation fournit un code prêt à l’emploi. Copiez-le et ajoutez-le à votre site web, à l’intérieur du <body> des pages sur lesquelles le widget doit apparaître. Le widget est diffusé depuis le CDN Volubile et se connecte automatiquement à votre agent. Le code est disponible en deux modes d’intégration.

Section Installation affichant le code du widget et les modes d'intégration

Flottant
Intégré

Le widget s’affiche sous la forme d’un bouton flottant qui ouvre la fenêtre de chat à la demande. Ce mode convient à la plupart des sites web et ne nécessite aucune modification de la mise en page.

<!-- Charger le widget — à placer avant </body> -->
<script src="https://chat.eu.volubile.ai/chat-widget.js?version=1&wid=a1b2c3d4-5678-90ab-cdef-1234567890ab"></script>
<!-- Initialiser le widget -->
<script>
  VolubileChat.init({
    "widgetId": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
    "mode": "floating"
  });
</script>

Le widget est intégré directement dans un élément conteneur de votre page. Ce conteneur doit disposer d’une hauteur définie. Ce mode convient aux pages de support dédiées ou aux sections où le chat doit rester visible en permanence.

<!-- Élément hôte — ajoutez-le à l’endroit où le chat doit apparaître -->
<div id="volubile-chat-container" style="height: 600px;"></div>
<!-- Charger le widget — à placer avant </body> -->
<script src="https://chat.eu.volubile.ai/chat-widget.js?version=1&wid=a1b2c3d4-5678-90ab-cdef-1234567890ab"></script>
<!-- Initialiser le widget -->
<script>
  VolubileChat.init({
    "widgetId": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
    "mode": "inline"
  });
</script>

Options avancées

VolubileChat.init() accepte des paramètres optionnels qui permettent d’associer une conversation à l’un de vos utilisateurs et de transmettre du contexte supplémentaire à l’agent. Ajoutez-les manuellement au code généré. Les valeurs fournies sont rattachées à la conversation et peuvent être consultées ultérieurement depuis la vue Conversations.

Option	Description
`externalId`	Un identifiant issu de votre propre système, utilisé pour relier une conversation à un utilisateur précis.
`context`	Le contexte applicatif mis à disposition de l’agent, par exemple la page courante ou l’offre de l’utilisateur.
`metadata`	Des données supplémentaires rattachées à la conversation, à votre usage.

<script>
  VolubileChat.init({
    "widgetId": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
    "mode": "floating",
    "externalId": "user-12345",
    "context": {
      "page": "checkout",
      "plan": "premium"
    },
    "metadata": {
      "source": "marketing-campaign"
    }
  });
</script>

Le widget s’affiche dans un conteneur isolé, garantissant que ses styles n’interfèrent pas avec ceux de votre site web, et réciproquement.

Remplacer la configuration (optionnel)

La configuration définie dans l’agent s’applique à toutes les pages sur lesquelles le widget est intégré. Si nécessaire, vous pouvez remplacer n’importe lequel de ces paramètres à l’initialisation en passant un objet localConfig à VolubileChat.init(). Les valeurs fournies sont fusionnées par-dessus la configuration enregistrée : vous ne renseignez que les champs à modifier. C’est utile pour adapter le widget selon la page ou le contexte — par exemple un message d’accueil spécifique sur votre page tarifs, ou des couleurs assorties à une section particulière de votre site web. Champs remplaçables : language, privacyPolicyUrl, theme (primaryColor, backgroundColor, textColor, borderRadius, fontFamily), display (title, welcomeMessage) et behaviour (messageSizeLimit, inactivityTimeout, attachments). En mode flottant, localConfig accepte aussi zIndex (par défaut 99999) — l’ordre d’empilement du widget flottant. Augmentez-le si le widget passe derrière des éléments de votre site web. En mode flottant, localConfig.display accepte également iconSize (par défaut 44) — la taille, en pixels, du bouton de lancement flottant.

<script>
  VolubileChat.init({
    "widgetId": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
    "mode": "floating",
    "localConfig": {
      "display": {
        "welcomeMessage": "Bienvenue sur notre page tarifs — comment puis-je vous aider ?"
      },
      "theme": {
        "primaryColor": "#0f766e"
      },
      "language": "fr"
    }
  });
</script>

Les paramètres de sécurité (origines autorisées) ne peuvent pas être remplacés de cette manière. Ils restent appliqués côté serveur afin de protéger les emplacements où le widget peut être chargé.

Logo personnalisé du bouton de lancement

En mode flottant, vous pouvez afficher votre propre logo à la place de l’icône par défaut du bouton de lancement. Renseignez l’adresse (URL) de votre image dans localConfig.display.launcherLogoSrc, comme dans l’exemple ci-dessous. Format accepté

Une URL d’image pointant vers un fichier SVG, PNG ou WebP, ou une URI data: en ligne.
Le logo est rendu dans un élément <img>. Pour des raisons de sécurité, tout script ou interactivité intégré à un SVG est ignoré par le navigateur — fournissez une image statique, déjà colorée. Le logo n’hérite pas de la couleur de thème du widget : intégrez les couleurs finales directement dans le fichier.

Taille & dimensions

Utilisez une image carrée ; elle est mise à l’échelle de la taille du bouton de lancement (iconSize, 44 px par défaut) et centrée.
Recommandé : au moins 88×88 px (2× pour les écrans retina), fond transparent.
Gardez-la légère — ≤ 20 Ko si hébergée, ou ≤ 10 Ko pour une URI data: en ligne, afin de ne pas alourdir la page hôte.

Hébergement

Doit être servi en HTTPS.
Doit être accessible publiquement (sans authentification).
Peut être hébergé sur votre propre domaine (URL absolue ou relative), sur n’importe quel hôte HTTPS, ou intégré en ligne sous forme d’URI data:. Aucune configuration CORS n’est nécessaire pour <img>.

<script src="https://chat.eu.volubile.ai/chat-widget.js?version=1&wid=a1b2c3d4-5678-90ab-cdef-1234567890ab"></script>
<script>
  VolubileChat.init({
    "widgetId": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
    "mode": "floating",
    "localConfig": {
      "display": {
        "launcherLogoSrc": "https://cdn.your-company.com/assets/chat-logo.svg",
        "iconSize": 56
      }
    }
  });
</script>

Consulter les conversations

Dès que votre chatbot a traité au moins une conversation, une entrée Conversations apparaît dans le menu de navigation. Elle liste chaque échange avec sa date, son statut et son nombre d’interactions, et permet d’ouvrir une conversation pour en consulter la transcription, le résumé, les pièces jointes et les détails techniques.

Pour commencer

Découverte du produit

Téléphonie

Intégrations

Options avancées

Remplacer la configuration (optionnel)

Logo personnalisé du bouton de lancement

Consulter les conversations

​Options avancées

​Remplacer la configuration (optionnel)

​Logo personnalisé du bouton de lancement

​Consulter les conversations

Options avancées

Remplacer la configuration (optionnel)

Logo personnalisé du bouton de lancement

Consulter les conversations