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 :

Étape 1 : Ajouter le Script

Ajoutez le script docs-widget.js à votre page HTML avec la configuration requise :

index.html

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

Étape 2 : Ajouter un Bouton Déclencheur

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

index.html

<button onclick="window.CompaninDocsWidget.open()">  Ask Documentation Assistant</button>

Exemples

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

Exemple 1 : Intégration HTML Basique

documentation.html

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

script.js

// Wait for the widget to loadwindow.addEventListener('load', () => {  // Add click handler to your custom button  document.getElementById('help-btn').addEventListener('click', () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  });});

Exemple 3 : Intégration React/Next.js

Dans une application React ou Next.js :

Documentation.jsx

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 AI Assistant      </button>    </div>  );}

Options de Configuration

Le widget Assistant Docs accepte plusieurs paramètres de configuration :

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 :

open()

api.js

window.CompaninDocsWidget.open();

Ouvre le dialogue Assistant Docs en mode plein écran.

close()

api.js

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 :

styles.css

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

debug.js

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

Le dialogue ne s'ouvre pas ?

Vérifiez que vous avez fourni tous les paramètres requis (client-id, assistant-id, config-id) et qu'ils sont corrects.

← Retour Suivant : Intégration de l'Assistant Docs →