Aller au contenu principal

Créez des interfaces personnalisées pour votre projet

Les interfaces vous permettent de créer des expériences personnalisées et similaires à des applications pour vos projets EKB. Au lieu de l'interface de chat par défaut, vous pouvez créer des applications multi-pages avec différents types de pages, des mises en page personnalisées et des configurations adaptées à vos cas d'usage spécifiques.

Les interfaces offrent :

  • Expérience utilisateur personnalisée : Remplacez le mode de chat par défaut par des interfaces conçues à cet effet
  • Applications multi-pages : Créez des interfaces avec plusieurs pages, chacune servant des fonctions différentes
  • Types de pages flexibles : Choisissez parmi chat, tableaux intelligents, base de connaissances, actions ou pages personnalisées
  • Publication et partage : Publiez les interfaces et définissez-les par défaut pour votre projet
  • Marque professionnelle : Créez des interfaces personnalisées pour les utilisateurs externes

Concepts clés​

Interface​

Une interface est un ensemble de pages qui forment ensemble une expérience utilisateur complète. Chaque projet peut avoir plusieurs interfaces, mais une seule peut être définie par défaut.

Propriétés de l'interface :

  • Nom : Nom d'affichage de l'interface
  • Description : Description optionnelle de l'objectif de l'interface
  • Publiée : Indique si l'interface est publiée et disponible pour les utilisateurs
  • Par défaut : Indique s'il s'agit de l'interface par défaut du projet

Page​

Une page est un écran unique au sein d'une interface. Les pages peuvent être de différents types, chacun avec ses propres options de configuration.

Types de pages :

  • Page de chat : Interface de chat interactive avec les agents
  • Page de tableau intelligent : Tableaux de données avec filtrage, édition et vues
  • Page de base de connaissances : Recherche et navigation dans les documents
  • Page d'actions : Parcourez et exécutez les outils et les workflows
  • Page personnalisée : Constructeur de pages par glisser-déposer avec des éléments personnalisés

Configuration des pages​

Chaque type de page dispose d'options de configuration spécifiques qui contrôlent son comportement et son apparence.

Prise en main​

Créer votre première interface​

  1. Accédez aux interfaces

    • Allez à votre projet
    • Cliquez sur Interfaces dans la navigation du projet
  2. Créer une nouvelle interface

    • Cliquez sur + Créer une interface
    • Une nouvelle interface sera créée avec une page de chat par défaut
    • Vous serez redirigé vers le générateur d'interfaces
  3. Configurer votre interface

    • Utilisez le générateur d'interfaces pour ajouter des pages, configurer les paramètres et personnaliser la mise en page
    • Consultez la section Générateur d'interfaces pour plus de détails

Définir l'interface par défaut​

  1. À partir de la liste des interfaces

    • Allez à la page Interfaces
    • Trouvez l'interface que vous souhaitez définir par défaut
    • Cliquez sur Définir comme par défaut
  2. À partir du générateur d'interfaces

    • Ouvrez l'interface que vous souhaitez définir par défaut
    • Utilisez les paramètres d'interface pour la marquer comme par défaut

Remarque : Une seule interface peut être par défaut à la fois. La définition d'une nouvelle interface par défaut désactivera automatiquement la précédente.

Générateur d'interfaces​

Le générateur d'interfaces est l'endroit où vous créez et configurez vos interfaces. Il offre :

  • Gestion des pages : Ajouter, éditer, supprimer et réorganiser les pages
  • Configuration des pages : Configurer les paramètres et le comportement de chaque page
  • Aperçu : Aperçu de votre interface avant publication
  • Publication : Publiez votre interface pour la rendre disponible

Accès au générateur​

  1. À partir de la liste des interfaces, cliquez sur Modifier sur n'importe quelle interface
  2. Ou cliquez sur Ouvrir pour afficher l'interface publiée

Mise en page du générateur d'interfaces​

Le générateur a trois zones principales :

  1. Barre latérale : Liste des pages et panneau de configuration
  2. Canevas : Aperçu de la page actuelle
  3. Panneau de configuration : Paramètres de la page sélectionnée

Types de pages​

Page de chat​

Une page de chat offre une interface de chat interactive où les utilisateurs peuvent converser avec les agents IA.

Options de configuration :

  • Sélection d'agent :

    • Agent par défaut : Définissez un agent par défaut pour le chat
    • Mode agent unique : Afficher un seul agent (masquer le sélecteur d'agent)
    • Agents activés : Liste blanche des identifiants d'agent disponibles
    • Type d'affichage : Choisissez entre l'affichage compact ou détaillé de la liste de chat
  • Paramètres de chat :

    • Masquer le pied de page : Masquer le pied de page du chat
    • Métadonnées : Métadonnées personnalisées à passer aux sessions de chat

Cas d'usage :

  • Chatbot d'assistance client
  • Interface de questions-réponses interactive
  • Interface de chat spécifique à un agent

Page de tableau intelligent​

Une page de tableau intelligent affiche les tableaux de données avec des capacités avancées de filtrage, de tri et d'édition.

Types de vues :

  1. Vue tableau : Tableau de données standard avec lignes et colonnes

    • Masquer la barre d'outils : Masquer la barre d'outils du tableau
    • Lecture seule : Rendre le tableau en lecture seule
  2. Vue de révision : Interface de révision pour la validation des données

    • Filtres prédéfinis : Filtres préconfigurés pour la vue de révision
    • Masquer les filtres : Masquer les contrôles de filtre
    • Mode édition par défaut : Commencer en mode édition
  3. Vue tableau de bord : Tableau de bord analytique avec graphiques et métriques

    • ID de vue tableau de bord : ID de la vue du tableau de bord à afficher
    • Masquer le sélecteur de période : Masquer le sélecteur de période
    • Période par défaut : Période par défaut du tableau de bord

Support des onglets :

Les pages de tableau intelligent peuvent avoir plusieurs onglets, chacun affichant un tableau ou une vue différente :

  • Onglets tableau : Chaque onglet peut afficher un tableau intelligent différent
  • Onglets de vue : Chaque onglet peut afficher une vue différente (tableau, révision, tableau de bord) du même tableau
  • Configuration des onglets : Configurez chaque onglet indépendamment

Étapes de configuration :

  1. Sélectionnez le tableau intelligent à afficher
  2. Choisissez le type de vue (tableau, révision ou tableau de bord)
  3. Configurez les paramètres spécifiques à la vue
  4. Ajoutez des onglets si nécessaire (pour les pages multi-tableaux ou multi-vues)

Cas d'usage :

  • Interface de gestion des données
  • Workflows de révision et d'approbation
  • Tableaux de bord analytiques
  • Vues de données multi-tableaux

Page de base de connaissances​

Une page de base de connaissances fournit des capacités de recherche et de navigation dans les documents.

Options de configuration :

  • Recherche activée : Activer/désactiver la fonctionnalité de recherche
  • Catégories activées : Afficher/masquer les catégories de documents

Cas d'usage :

  • Interface de bibliothèque de documents
  • Référentiel de connaissances
  • Centre d'aide

Page d'actions​

Une page d'actions permet aux utilisateurs de parcourir et d'exécuter des outils et des workflows.

Modes d'affichage :

  1. Mode multi-action : Afficher plusieurs actions dans une grille ou une liste

    • Afficher la recherche : Activer la fonctionnalité de recherche
    • Mode d'affichage : Choisissez entre l'affichage en grille ou en liste
    • Masquer la barre d'outils : Masquer la barre d'outils des actions
    • Activer le filtrage : Activer le filtrage des actions
    • Filtre par défaut : Filtre par défaut à appliquer
    • Actions autorisées : Liste blanche des flow_ids d'action à afficher
  2. Mode action unique : Afficher une action comme formulaire

    • ID d'action sélectionnée : Le flow_id de l'action spécifique à afficher
    • Masquer l'en-tête du formulaire : Masquer le titre/la description de l'action
    • Exécution automatique : Exécution automatique au chargement de la page si tous les champs requis ont des valeurs par défaut

Étapes de configuration :

  1. Choisissez le mode d'affichage (multi ou unique)
  2. Configurez les paramètres spécifiques au mode
  3. Sélectionnez les actions autorisées (si vous utilisez une liste blanche)

Cas d'usage :

  • Interface d'exécution de workflow
  • Bibliothèque d'outils
  • Formulaires d'action unique
  • Interface d'automatisation des processus

Page personnalisée​

Une page personnalisée vous permet de créer une page à partir de zéro en utilisant des éléments par glisser-déposer.

Éléments disponibles :

Éléments de données :

  • Grille : Affichage de grille de données
  • Graphique : Visualisation de graphique
  • Nombre : Affichage de nombre
  • Filtre : Contrôles de filtre

Éléments d'interface utilisateur :

  • Texte : Affichage de texte
  • Bouton : Bouton interactif
  • Séparateur : Séparateur visuel

Éléments interactifs :

  • Sélecteur d'enregistrement : Composant de sélection d'enregistrement
  • Champ : Champ de formulaire

Création de pages personnalisées :

  1. Ajouter des éléments : Faites glisser les éléments de la palette sur le canevas
  2. Positionner les éléments : Cliquez et faites glisser pour positionner les éléments
  3. Configurer les éléments : Sélectionnez un élément pour configurer ses paramètres
  4. Enregistrer : Enregistrez vos modifications

Cas d'usage :

  • Tableaux de bord personnalisés
  • Interfaces de formulaire
  • Pages de visualisation de données
  • Pages d'accueil personnalisées

Gestion des pages​

Ajouter des pages​

  1. Dans le générateur d'interfaces, cliquez sur + Ajouter une page
  2. Choisissez un modèle de page :
    • Page de chat
    • Tableau intelligent
    • Base de connaissances
    • Actions
    • Page personnalisée
  3. Configurez les paramètres de la page
  4. La page sera ajoutée à votre interface

Éditer les pages​

  1. Sélectionnez une page dans la barre latérale
  2. Configurez les paramètres de la page dans le panneau de configuration
  3. Les modifications sont enregistrées automatiquement

Réorganiser les pages​

  1. Dans la liste des pages, cliquez et faites glisser les pages pour les réorganiser
  2. L'ordre détermine l'ordre de navigation dans l'interface publiée

Supprimer les pages​

  1. Sélectionnez la page que vous souhaitez supprimer
  2. Cliquez sur le bouton de suppression
  3. Confirmez la suppression

Remarque : Vous ne pouvez pas supprimer la dernière page d'une interface. Vous devez avoir au moins une page.

Publication des interfaces​

Publier une interface​

  1. À partir du générateur d'interfaces :

    • Ouvrez l'interface que vous souhaitez publier
    • Cliquez sur Publier dans les paramètres d'interface
    • L'interface sera marquée comme publiée
  2. À partir de la liste des interfaces :

    • Trouvez l'interface que vous souhaitez publier
    • Utilisez le bouton ou le basculeur de publication

Les interfaces publiées :

  • Sont disponibles pour les utilisateurs lorsqu'ils accèdent au projet
  • Sont visibles dans la liste des interfaces avec un badge « Publiée »
  • Sont accessibles via l'URL de l'application du projet

Dépublier une interface​

  1. Ouvrez l'interface publiée
  2. Cliquez sur Dépublier dans les paramètres d'interface
  3. L'interface ne sera plus disponible pour les utilisateurs

Bonnes pratiques​

Conception d'interface​

  1. Commencez par un plan : Planifiez la structure de votre interface avant de la créer

    • Identifiez les pages dont vous avez besoin
    • Déterminez les types de pages
    • Planifiez le flux de navigation
  2. Utilisez des noms descriptifs : Utilisez des noms clairs et descriptifs pour les interfaces et les pages

    • Aide les utilisateurs à comprendre l'objectif
    • Facilite la gestion
  3. Organisez les pages logiquement : Organisez les pages dans un ordre logique

    • Les pages les plus importantes d'abord
    • Les pages connexes regroupées ensemble

Configuration des pages​

  1. Configurez les pages de chat avec soin :

    • Définissez les agents par défaut appropriés
    • Utilisez le mode agent unique lorsqu'un seul agent est nécessaire
    • Utilisez une liste blanche d'agents pour un meilleur contrôle
  2. Optimisez les pages de tableau intelligent :

    • Choisissez le bon type de vue pour votre cas d'usage
    • Utilisez les onglets pour les vues multi-tableaux
    • Configurez les filtres et les paramètres de manière appropriée
  3. Testez les pages d'actions :

    • Testez les actions en modes multi et unique
    • Vérifiez que les listes blanches d'actions fonctionnent correctement
    • Testez la fonctionnalité d'exécution automatique

Performance​

  1. Limitez le nombre de pages : Maintenez un nombre de pages raisonnable

    • Trop de pages peuvent ralentir l'interface
    • Envisagez d'utiliser des onglets dans les pages plutôt que plusieurs pages
  2. Optimisez les pages personnalisées :

    • Ne surchargez pas les pages personnalisées avec trop d'éléments
    • Utilisez des configurations d'éléments efficaces
  3. Testez avant de publier : Toujours prévisualiser et tester avant de publier

    • Vérifiez toutes les configurations de page
    • Testez le flux de navigation
    • Vérifiez que toutes les fonctionnalités fonctionnent

Cas d'usage​

Interface d'assistance client​

Structure :

  • Page 1 : Chat - Chat de support principal avec agent de support
  • Page 2 : Base de connaissances - Articles d'aide et documentation
  • Page 3 : Actions - Soumettre un ticket ou demander une action

Configuration :

  • Page de chat : Mode agent unique avec agent de support
  • Base de connaissances : Recherche et catégories activées
  • Actions : Mode multi-action avec workflows de support

Interface de gestion des données​

Structure :

  • Page 1 : Tableau de bord - Vue tableau de bord du tableau intelligent
  • Page 2 : Saisie de données - Tableau intelligent avec vue de révision
  • Page 3 : Rapports - Tableau intelligent avec plusieurs onglets

Configuration :

  • Tableau de bord : Période par défaut définie, sélecteur de période visible
  • Saisie de données : Filtres prédéfinis, mode édition activé
  • Rapports : Plusieurs onglets avec différentes vues de tableau

Interface d'automatisation de workflow​

Structure :

  • Page 1 : Actions - Parcourez et exécutez les workflows
  • Page 2 : Statut - Tableau intelligent affichant le statut du workflow
  • Page 3 : Tableau de bord personnalisé - Page personnalisée avec graphiques et métriques

Configuration :

  • Actions : Vue en grille, recherche activée, filtrée par catégorie
  • Statut : Vue tableau, lecture seule, actualisation automatique
  • Tableau de bord : Éléments personnalisés affichant les métriques clés

Dépannage​

L'interface n'apparaît pas​

Problème : L'interface n'apparaît pas dans la liste ou n'est pas accessible.

Solutions :

  • Vérifiez que l'interface est publiée
  • Vérifiez que vous regardez le bon projet
  • Assurez-vous que vous avez les permissions appropriées

La page ne charge pas​

Problème : Une page ne charge pas ou affiche une erreur.

Solutions :

  • Vérifiez la configuration de la page
  • Vérifiez que toutes les ressources requises (tableaux, agents, actions) existent
  • Vérifiez s'il y a des erreurs de configuration dans les paramètres de la page

L'interface par défaut ne fonctionne pas​

Problème : L'interface par défaut n'est pas utilisée.

Solutions :

  • Vérifiez que l'interface est définie comme par défaut
  • Vérifiez qu'aucune autre interface n'est également définie comme par défaut
  • Actualisez la page ou videz le cache

Problèmes de page de tableau intelligent​

Problème : La page du tableau intelligent n'affiche pas les données ou génère des erreurs.

Solutions :

  • Vérifiez que le tableau existe et est accessible
  • Vérifiez la configuration du type de vue
  • Assurez-vous que les permissions de tableau sont correctes
  • Vérifiez les configurations d'onglets si vous utilisez des onglets

Problèmes de page d'actions​

Problème : Les actions n'apparaissent pas ou ne peuvent pas être exécutées.

Solutions :

  • Vérifiez la configuration de la liste blanche des actions
  • Vérifiez que les actions existent et sont publiées
  • Vérifiez les permissions d'action
  • Vérifiez les paramètres du mode d'affichage

Intégration API​

Les interfaces sont accessibles par programmation via l'API EKB. Consultez la Référence API pour les détails sur :

  • Créer et gérer les interfaces
  • Configurer les pages
  • Publier les interfaces
  • Accéder aux données d'interface

Étapes suivantes​