Personnalisation de l’intégration

Personnalisez l’expérience lors de l’intégration de Docs Embed à votre produit ou application en définissant des messages de bienvenue, des actions et plus encore

Après avoir ajouté Docs Embed à votre site web ou à votre application, vous pouvez encore personnaliser l’expérience en ajoutant des boutons d’action dans la barre latérale, des suggestions pour inciter vos utilisateurs avec des questions contextuelles, des onglets, et bien plus encore.

Personnalisation du bouton (autonome uniquement)

Lors de l’utilisation de l’implémentation par balise de script autonome, vous pouvez personnaliser le libellé et l’icône du bouton qui lance le widget intégré.

Cette option de personnalisation du bouton n’est disponible que lors de l’utilisation de l’implémentation par balise de script autonome. Pour les implémentations React ou du package Node.js/NPM , vous devrez créer votre propre bouton pour lancer l’intégration.

window.GitBook("configure", {
  button: {
    label: "Poser une question",
    icon: "assistant", // 'assistant' | 'sparkle' | 'help' | 'book'
  },
});

Options d’icône disponibles :

• assistant - Icône Assistant (par défaut)

• sparkle - Icône étincelle

• help - Icône aide/question

• book - Icône livre

Configuration du jeu de couleurs

Par défaut, l’intégration suit le color-schemeCSS de l’iframe. Cela lui permet de correspondre automatiquement au thème de votre application ou aux préférences du navigateur.

Si vous souhaitez forcer un mode, passez colorScheme lorsque vous initialisez l’intégration, construisez l’URL du frame ou rendez le composant React. Cela ne fait pas partie de configure.

Script autonome

window.GitBook(
  "init",
  { siteURL: "https://docs.company.com" },
  { colorScheme: "dark" }
);

Node.js/NPM

React

Ajout d’actions

Ajouter des actions à l’intégration vous permet de proposer aux utilisateurs des actions supplémentaires dans l’interface. Chaque action se compose d’un libellé, d’une icône (de Font Awesome), et d’une action onClick qui s’exécute lorsque l’utilisateur clique sur l’action. Toutes les actions que vous ajoutez apparaîtront dans la barre latérale à côté des onglets. Les actions peuvent contrôler directement Docs Embed ou exécuter n’importe quel code de votre choix.

window.GitBook("configure", {
  actions: [
    {
      label: "Contacter le support",
      icon: "circle-question",
      onClick: () => {
        window.open("https://support.example.com", "_blank");
      },
    },
    {
      label: "Documentation",
      icon: "book",
      onClick: () => {
        window.open("https://docs.example.com", "_blank");
      },
    },
  ],
});

Ajout de suggestions

Vous pouvez ajouter des suggestions à l’onglet Assistant, qui apparaîtront sous forme d’invites cliquables que vos utilisateurs pourront utiliser lorsque l’Assistant se charge.

window.GitBook("configure", {
  suggestions: [
    "Aidez-moi à démarrer avec mon nouveau compte",
    "Comment réinitialiser mon mot de passe ?",
    "Quels sont vos tarifs ?",
  ],
});

Ajout d’un message d’accueil

Personnalisez le message de bienvenue affiché dans l’onglet Assistant :

window.GitBook("configure", {
  greeting: {
    title: "Bienvenue !",
    subtitle: "Comment puis-je vous aider aujourd’hui ?",
  },
});

Remplacement du nom de l’assistant

Utilisez assistantName pour remplacer le nom de l’assistant affiché dans l’interface.

La valeur peut contenir jusqu’à 32 caractères.

window.GitBook("configure", {
  assistantName: "Support Copilot",
});

Affichage d’un bouton de fermeture

Utilisez closeButton pour afficher un bouton de fermeture à l’intérieur de l’Assistant.

window.GitBook("configure", {
  closeButton: true,
});

Affichage ou masquage de la marque

Utilisez trademark pour afficher ou masquer la marque GitBook dans l’interface intégrée — y compris le pied de page Docs Embed et l’image de marque de l’Assistant.

window.GitBook("configure", {
  trademark: false,
});

Configuration des onglets

Remplacez les onglets affichés. Tous les onglets sont activés par défaut, à condition que votre site les prenne en charge. Par exemple, si l’Assistant n’est pas activé sur votre site, il ne sera pas affiché. Si vous définissez tabs, l’intégration n’affiche que les onglets que vous listez.

window.GitBook("configure", {
  tabs: ["assistant", "search", "docs"], // Afficher tous les onglets
  // tabs: ["search", "docs"], // Afficher uniquement la recherche et la documentation
  // tabs: ['docs'], // Afficher uniquement l’onglet documentation
});