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 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 inviter vos utilisateurs avec des questions contextuelles, et plus encore.

Personnalisation du bouton (autonome seulement)

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

Cette option de personnalisation du bouton n'est disponible que lorsque vous utilisez le implémentation par balise script autonome. Pour React ou package Node.js/NPM implémentations, vous devrez créer votre propre bouton pour lancer l'embed.

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

Ajouter des actions à l'embed vous permet de proposer des actions supplémentaires aux utilisateurs dans l'interface. Chaque action se compose d'un libellé, d'une icône (à partir de Font Awesome), et d'un 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 aux côtés des onglets. Les actions peuvent contrôler le Docs Embed lui-même 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 s'afficheront comme des invites cliquables pour vos utilisateurs 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 plans tarifaires ?",
  ],
});

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

Utilisez trademark pour afficher ou masquer la marque GitBook dans l'interface embed — y compris le pied de page Docs Embed et le branding de l'Assistant.

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

Configuration des onglets

Remplacez les onglets affichés. Par défaut, l'embed affiche des onglets basés sur 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
});