Intégration de l'Assistant Docs

Apprenez comment intégrer le widget Assistant Docs sur vos pages de documentation.

Aperçu

L'Assistant Docs est un widget spécialisé alimenté par IA conçu spécifiquement pour les pages de documentation. Il fournit une aide instantanée à vos utilisateurs en répondant aux questions sur votre documentation à l'aide d'un dialogue interactif en plein écran.

Essayez-le maintenant !

Cliquez sur le bouton ci-dessous pour voir l'Assistant Docs en action sur cette page.

Configuration de Base

Commencer avec le widget Assistant Docs est simple. Suivez simplement ces deux étapes :

Si votre page de documentation charge l'assistant dans une iframe, assurez-vous que l'origine de la page hôte est incluse dans le fichier Allowed_origins de votre application OAuth. Le point de terminaison du jeton du widget valide cette origine avant d'émettre un jeton.

Étape 1 : Ajouter le Script

Ajoutez le script docs-widget.js à votre page HTML avec la configuration requise. Si vous chargez plusieurs widgets Docs, attribuez un data-instance-id unique à chaque script :

<script src="https://widget.companin.tech/docs-widget.js" data-client-id="YOUR_CLIENT_ID" data-assistant-id="YOUR_ASSISTANT_ID" data-config-id="YOUR_CONFIG_ID" data-instance-id="docs-help" data-locale="en"></script>

Étape 2 : Ajouter un Bouton Déclencheur

Créez un bouton ou un élément qui appelle la méthode open() du widget :

<button id="help-btn" type="button">Ask Documentation Assistant</button><script>  const handleOpen = (event) => {    console.log('Docs widget opened', event?.context);  };  // Generic event API (returns unsubscribe function)  const unsubscribeOpen = window.CompaninDocsWidget?.on?.('open', handleOpen);  document.getElementById('help-btn')?.addEventListener('click', () => {    window.CompaninDocsWidget?.open();  });  // Cleanup on page unload or SPA route change  window.addEventListener('beforeunload', () => {    if (typeof unsubscribeOpen === 'function') unsubscribeOpen();  });</script>

Exemples

Voici quelques exemples pratiques d'intégration de l'Assistant Docs :

Exemple 1 : Intégration HTML Basique

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>My Documentation</title></head><body>  <header>    <h1>Product Documentation</h1>    <button onclick="window.CompaninDocsWidget.open()">      Need Help?    </button>  </header>  <main>    <!-- Your documentation content -->  </main>  <script    src="https://widget.companin.tech/docs-widget.js"    data-client-id="your-client-id"    data-assistant-id="your-assistant-id"    data-config-id="your-config-id"    data-locale="en">  </script></body></html>

Exemple 2 : Bouton Personnalisé avec Event Listener

Pour plus de contrôle, vous pouvez ajouter des event listeners à vos boutons existants :

// Wait for the widget to loadwindow.addEventListener('load', () => {  const unsubscribeResponse = window.CompaninDocsWidget?.on?.('response', (event) => {    console.log('Assistant response:', event?.data);  });  document.getElementById('help-btn').addEventListener('click', () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  });  window.addEventListener('beforeunload', () => {    if (typeof unsubscribeResponse === 'function') unsubscribeResponse();  });});

Exemple 3 : Intégration React/Next.js

Dans une application React ou Next.js :

import React from 'react';export default function Documentation() {  const openDocsAssistant = () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  };  return (    <div>      <h1>API Documentation</h1>      <button        onClick={openDocsAssistant}        className="help-button"      >        Ask Customer Support AI Assistant      </button>    </div>  );}

Options de Configuration

Le widget Docs Assistant accepte plusieurs paramètres de configuration. Utilisez data-instance-id pour un contrôle déterministe par instance lorsque vous intégrez plusieurs widgets sur une même page :

Paramètres Requis

data-client-id: Votre identifiant client unique du tableau de bord Companin
data-assistant-id: L'ID de l'assistant que vous souhaitez utiliser
data-config-id: ID de configuration pour la personnalisation du widget

Paramètres Optionnels

data-locale: Code de langue (par défaut : 'en'). Supporte : en, de, es, fr, it, nb, nl, pt, sv
data-dev: Définir sur 'true' pour le mode développement (se connecte à localhost:3001)

API JavaScript

Une fois chargé, le widget expose une API globale pour le contrôle programmatique. Dans les configurations multi-widgets, privilégiez les registres d’instances (CompaninDocsWidgets.get(instanceId)) plutôt que de vous appuyer uniquement sur la dernière référence globale :

open()

window.CompaninDocsWidget.open();

Ouvre le dialogue Assistant Docs en mode plein écran.

close()

window.CompaninDocsWidget.close();

Ferme le dialogue Assistant Docs et cache le widget.

Style Personnalisé

Vous pouvez styliser vos boutons déclencheurs comme vous le souhaitez. Voici un exemple de bouton d'aide flottant :

.my-help-button {  position: fixed;  bottom: 20px;  right: 20px;  padding: 12px 24px;  background: #2563eb;  color: white;  border: none;  border-radius: 8px;  font-weight: 600;  cursor: pointer;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  transition: all 0.2s;}.my-help-button:hover {  background: #1d4ed8;  transform: translateY(-2px);  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);}

Meilleures Pratiques

Placez le bouton déclencheur dans un endroit proéminent et facilement accessible (ex. en-tête, bouton flottant)
Utilisez un texte de bouton clair et orienté action comme 'Demander à l'IA' ou 'Besoin d'aide ?'
Assurez-vous que le script du widget se charge avant d'essayer d'appeler ses méthodes API
Gardez vos informations d'identification client sécurisées - ne les exposez jamais dans le code côté client

Dépannage

Le widget ne se charge pas ?

Assurez-vous que le script est chargé avant d'appeler l'API. Vous pouvez vérifier si le widget est disponible :

window.addEventListener('load', () => {  console.log('Widget loaded:', !!window.CompaninDocsWidget);});

Le dialogue ne s'ouvre pas ?

Vérifiez que vous avez bien fourni tous les paramètres requis (client-id, assistant-id, config-id). Si plusieurs widgets sont présents, chaque script doit avoir un data-instance-id unique.

← Retour Suivant : Aperçu →