Thèmes et personnalisation de ChatKit

Après avoir suivi le guide de démarrage rapide de ChatKit, découvrez comment changer de thème et personnaliser l’interface de discussion intégrée à votre application. Pour l’adapter au style de votre application, choisissez un thème clair ou sombre, définissez une couleur d’accentuation et ajustez la densité ainsi que l’arrondi des angles.

Vue d’ensemble

Pour personnaliser le thème, passez un objet d’options. Si vous avez suivi le guide de démarrage rapide de ChatKit pour intégrer ChatKit à votre frontend, utilisez la syntaxe React ci-dessous.

• React : passez les options à useChatKit({...})
• Intégrations avancées : définissez les options avec chatkit.setOptions({...})

L’objet d’options a la même structure pour les deux types d’intégration.

Explorez les options de personnalisation

Rendez-vous sur ChatKit Studio pour découvrir des intégrations de ChatKit en action et des outils de création interactifs. Si vous préférez apprendre en expérimentant, ces ressources sont un bon point de départ.

Explorez l’interface de ChatKit

Découvrez des exemples fonctionnels

Modifiez le thème

Adaptez ChatKit à l’apparence de votre produit en configurant notamment les couleurs et la typographie. Dans l’exemple ci-dessous, nous activons le mode sombre, modifions les couleurs, arrondissons les angles, ajustons la densité d’information et définissons la police.

Pour connaître toutes les options du thème, consultez la référence de l’API.

1
2
3
4
5
6
7
8
9
10
11
12
13
14const options = {
  theme: {
    colorScheme: "dark",
    color: {
      accent: {
        primary: "#2D8CFF",
        level: 2,
      },
    },
    radius: "round",
    density: "compact",
    typography: { fontFamily: "'Inter', sans-serif" },
  },
};

Personnalisez le texte de l’écran d’accueil

Modifiez le texte indicatif de la zone de saisie pour suggérer des questions aux utilisateurs ou les aider à formuler leur premier message.

1
2
3
4
5
6
7
8const options = {
  composer: {
    placeholder: "Ask anything about your data…",
  },
  startScreen: {
    greeting: "Welcome to FeedbackBot!",
  },
};

Affichez des suggestions de prompts pour les nouveaux fils de discussion

Au début d’une conversation, suggérez des prompts pour donner aux utilisateurs des idées de questions à poser ou d’actions à effectuer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const options = {
  startScreen: {
    greeting: "What can I help you build today?",
    prompts: [
      {
        name: "Check on the status of a ticket",
        prompt: "Can you help me check on the status of a ticket?",
        icon: "search",
      },
      {
        name: "Create Ticket",
        prompt: "Can you help me create a new support ticket?",
        icon: "write",
      },
    ],
  },
};

Ajoutez des boutons personnalisés à l’en-tête

Les boutons personnalisés de l’en-tête permettent d’ajouter des éléments de navigation, des informations contextuelles ou des actions propres à votre intégration.

1
2
3
4
5
6
7
8
9
10
11
12const options = {
  header: {
    customButtonLeft: {
      icon: "settings-cog",
      onClick: () => openProfileSettings(),
    },
    customButtonRight: {
      icon: "home",
      onClick: () => openHomePage(),
    },
  },
};

Activez les pièces jointes

Les pièces jointes sont désactivées par défaut. Pour les activer, ajoutez les options de configuration correspondantes. Si vous n’utilisez pas de backend personnalisé, vous devez utiliser la stratégie de téléversement hosted. Consultez la documentation du SDK Python pour savoir comment utiliser les autres stratégies de téléversement avec un backend personnalisé.

Vous pouvez également définir le nombre, la taille et les types de fichiers que les utilisateurs peuvent joindre à leurs messages.

1
2
3
4
5
6
7
8
9
10const options = {
  composer: {
    attachments: {
      uploadStrategy: { type: "hosted" },
      maxSize: 20 * 1024 * 1024, // 20 MB per file
      maxCount: 3,
      accept: { "application/pdf": [".pdf"], "image/*": [".png", ".jpg"] },
    },
  },
};

Activez les @mentions dans la zone de saisie grâce aux étiquettes d’entité

Permettez aux utilisateurs de mentionner des « entités » personnalisées à l’aide du signe @. Ces mentions enrichissent le contexte de la conversation et la rendent plus interactive.

• Utilisez onTagSearch pour renvoyer une liste d’entités correspondant à la recherche saisie.
• Utilisez onClick pour gérer les clics sur une entité.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const options = {
  entities: {
    async onTagSearch(query) {
      void query;
      return [
        {
          id: "user_123",
          title: "Jane Doe",
          group: "People",
          interactive: true,
        },
        {
          id: "document_123",
          title: "Quarterly Plan",
          group: "Documents",
          interactive: true,
        },
      ];
    },
    onClick: (entity) => {
      navigateToEntity(entity.id);
    },
  },
};

Personnalisez l’affichage des étiquettes d’entité

Utilisez des widgets pour personnaliser l’affichage des étiquettes d’entité au survol. Lorsqu’un utilisateur survole une étiquette, affichez un aperçu enrichi, par exemple une carte de visite, le résumé d’un document ou une image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const options = {
  entities: {
    async onTagSearch() {
      return [];
    },
    onRequestPreview: async (entity) => ({
      preview: {
        type: "Card",
        children: [
          { type: "Text", value: `Profile: ${entity.title}` },
          { type: "Text", value: "Role: Developer" },
        ],
      },
    }),
  },
};

Ajoutez des outils personnalisés à la zone de saisie

Faites gagner du temps aux utilisateurs en leur permettant de déclencher des actions propres à votre application depuis la zone de saisie. L’outil sélectionné est transmis au modèle comme outil à privilégier.

1
2
3
4
5
6
7
8
9
10
11
12const options = {
  composer: {
    tools: [
      {
        id: "add-note",
        label: "Add Note",
        icon: "write",
        pinned: true,
      },
    ],
  },
};

Activez ou désactivez des zones et des fonctionnalités de l’interface

Si les options de l’en-tête ne suffisent pas et que vous souhaitez proposer vos propres options, désactivez les principales zones et fonctionnalités de l’interface. Il peut être utile de désactiver l’historique si les notions de fil de discussion et d’historique ne sont pas pertinentes pour votre usage, par exemple dans un chatbot d’assistance.

1
2
3
4const options = {
  history: { enabled: false },
  header: { enabled: false },
};

Modifiez les paramètres régionaux par défaut

Si votre application dispose d’un réglage de langue global, utilisez-le pour remplacer les paramètres régionaux par défaut. Par défaut, ChatKit utilise ceux du navigateur.

1
2
3const options = {
  locale: "de-DE",
};