Personnalisation de l’Embed

Personnalisez l’expérience lors de l’intégration de Docs Embed dans 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 personnaliser davantage 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 plus encore.

Personnalisation du bouton (autonome ) uniquement)

Lors de l’utilisation de l’ implémentation avec 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 lorsque vous utilisez l’ implémentation avec balise de script autonome. Pour React ou le package Node.js/NPM les implémentations, vous devrez créer votre propre bouton pour lancer l’intégration.

window.GitBook("configure", {
  button: {
    label: "Ask",
    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

Définition du schéma 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 à la préférence du navigateur.

Si vous souhaitez forcer un mode, transmettez 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

const iframeURL = gitbook.getFrameURL({
  colorScheme: "dark",
});

React

<GitBookFrame colorScheme="dark" />

Ajout d’actions

L’ajout d’actions à l’intégration vous permet de donner 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 onClick action 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 Docs Embed lui-même ou exécuter n’importe quel code de votre choix.

window.GitBook("configure", {
  actions: [
    {
      label: "Contact 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 comme des 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 dans 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 de 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 les onglets recherche et docs
  // tabs: ['docs'], // Afficher uniquement l’onglet docs
});