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 application, vous pouvez personnaliser davantage l’expérience en ajoutant des éléments tels que des boutons d’action dans la barre latérale, des suggestions pour inciter vos utilisateurs avec des questions contextuelles, et plus encore.

Personnalisation du bouton (autonome uniquement)

Lors de l’utilisation de la mise en œuvre via la balise script autonome, vous pouvez personnaliser l’étiquette et l’icône du bouton qui lance le widget d’intégration.

Cette option de personnalisation du bouton est disponible uniquement lors de l’utilisation du mise en œuvre via la balise script autonome. Pour composants ou package Node.js/NPM implémentations, vous devrez créer votre propre bouton pour lancer l’embed.

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

Ajout d’actions

L’ajout d’actions à l’embed vous permet de donner aux utilisateurs des actions supplémentaires dans l’interface. Chaque action se compose d’une étiquette, 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 que vous souhaitez.

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 सुझाव

Vous pouvez ajouter des suggestions à l’onglet Assistant, qui apparaîtront sous forme d’invites cliquables pour que vos utilisateurs les utilisent 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 de bienvenue

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

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

Afficher ou masquer la marque déposée

Utiliser trademark pour afficher ou masquer la marque GitBook dans l’interface de l’embed — 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

Définissez de manière explicite quels onglets sont affichés. Par défaut, l’embed affiche les onglets en fonction de la configuration de votre site.

window.GitBook("configure", {
  tabs: ["assistant", "docs"], // Afficher les deux onglets
  // tabs: ['assistant'], // Afficher uniquement l’onglet assistant
  // tabs: ['docs'], // Afficher uniquement l’onglet docs
});