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

Après avoir ajouté Docs Embed à votre site 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 seulement)

Lors de l'utilisation du balise 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 du balise script autonome. Pour React ou paquet Node.js/NPM pour les implémentations, vous devrez créer votre propre bouton pour lancer l'intégration.

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

Options d'icônes 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'intégration vous permet d'offrir des actions supplémentaires dans l'interface. Chaque action se compose d'un libellé, d'une icône (depuis 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 Docs Embed lui-même ou exécuter tout code que vous souhaitez.

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 ?",
  },
});

Configuration des onglets

Remplacez les onglets affichés. Par défaut, l'intégration 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 documentation
});