Personnalisation de l’Embed

Personnalisez l’expérience lors de l’intégration de Docs Embed dans votre produit ou votre 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 actionnables à 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 la mise en œuvre 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 est disponible uniquement lors de l'utilisation de la mise en œuvre avec balise de script autonome. Pour composants 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: {
    libellé : "Demander",
    icône : "assistant", // 'assistant' | 'sparkle' | 'help' | 'book'
  },
});

Options d'icône disponibles :

• assistant - Icône Assistant (par défaut)
• sparkle - Icône Étincelle
• help - Icône d'aide/de question
• book - Icône Livre

Définition du schéma de couleurs

Par défaut, l'intégration suit le CSS de l'iframe color-scheme. Cela lui permet de s'adapter 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 cadre ou affichez 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",
});

composants

<GitBookFrame colorScheme="dark" />

Ajout d'actions

Ajouter des actions à l'intégration vous permet de proposer des actions supplémentaires aux utilisateurs dans l'interface. Chaque action se compose d'un libellé, d'une icône (parmi 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 le code de votre choix.

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

Ajout de suggestions

Vous pouvez ajouter des suggestions à l'onglet Assistant, qui apparaîtront comme invites cliquables que vos utilisateurs pourront utiliser au chargement de l'Assistant.

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'une salutation

Personnalisez le message d'accueil 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 marque déposée pour afficher ou masquer la marque GitBook dans l'interface intégrée — y compris le pied de page de Docs Embed et l'identité visuelle 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 les onglets, l’embed 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 de recherche et de documentation
  // tabs: ['docs'], // Afficher uniquement l'onglet documentation
});