> ## Documentation Index
> Fetch the complete documentation index at: https://ai-kb.automationanywhere.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Créez des interfaces personnalisées pour votre projet

> Créez des applications personnalisées multi-pages sur les ressources de votre projet à l'aide d'un éditeur drag-and-drop sans code.

Interfaces est un éditeur d'applications sans code qui permet aux administrateurs de projet de créer des applications personnalisées multi-pages sur les ressources de projet existantes — agents, discussions, tables intelligentes, tableaux de bord, bases de connaissances, actions, workflows, documents et réunions. Au lieu de l'expérience de chat par défaut, vous pouvez créer des interfaces sur mesure avec plusieurs pages, des widgets glisser-déposer, un branding personnalisé et une URL publique partageable.

<CardGroup cols={2}>
  <Card title="Applications multi-pages" icon="layer-group">
    Créez des interfaces avec plusieurs pages, chacune remplissant une fonction différente, organisées dans une navigation personnalisée.
  </Card>

  <Card title="Canevas glisser-déposer" icon="objects-column">
    Construisez des pages à l'aide d'une grille à 12 colonnes avec une bibliothèque de widgets IA, données, actions et contenu.
  </Card>

  <Card title="Branding personnalisé" icon="palette">
    Personnalisez les logos, couleurs, disposition de la navigation, favicon et CSS pour correspondre à votre marque.
  </Card>

  <Card title="Publication et partage" icon="globe">
    Publiez les interfaces via une URL publique et contrôlez l'accès des membres.
  </Card>
</CardGroup>

## Concepts clés

<AccordionGroup>
  <Accordion title="Interface" icon="browser">
    Une interface est un ensemble de pages qui forment ensemble une expérience utilisateur complète pour un projet. Chaque projet peut avoir plusieurs interfaces.

    | Propriété    | Description                                                                |
    | ------------ | -------------------------------------------------------------------------- |
    | **Nom**      | Nom d'affichage de l'interface                                             |
    | **Publiée**  | Si l'interface est accessible aux utilisateurs finaux via une URL publique |
    | **Branding** | Logo, couleurs, disposition de la navigation, favicon et CSS personnalisés |
  </Accordion>

  <Accordion title="Page" icon="file">
    Une page est un écran unique au sein d'une interface. Chaque page a un nom, une icône et une position dans la navigation. Les pages sont construites en glissant des widgets sur un canevas et peuvent être créées à partir de modèles pré-construits.
  </Accordion>

  <Accordion title="Widget" icon="puzzle-piece">
    Les widgets sont les blocs de construction d'une page, placés sur une grille glisser-déposer à 12 colonnes. Voir la section [Bibliothèque de widgets](#bibliothèque-de-widgets) ci-dessous pour la liste complète.
  </Accordion>
</AccordionGroup>

## Bibliothèque de widgets

<Tabs>
  <Tab title="IA">
    | Widget            | Description                   |
    | ----------------- | ----------------------------- |
    | **Chat**          | Discussion IA avec vos agents |
    | **Carte d'agent** | Carte de sélection d'agent    |
  </Tab>

  <Tab title="Données">
    | Widget                          | Description                                                    |
    | ------------------------------- | -------------------------------------------------------------- |
    | **Table intelligente**          | Vue tableau, révision, kanban ou tableau de bord               |
    | **Tableau de bord**             | Tableau de bord analytique de table intelligente               |
    | **Base de connaissances**       | Parcourir et rechercher des connaissances                      |
    | **Analytiques**                 | Statistiques d'utilisation et retours                          |
    | **Graphique**                   | Graphique de visualisation de données                          |
    | **Grille de données**           | Données tabulaires depuis une table intelligente               |
    | **Filtre**                      | Filtre déroulant ou recherche                                  |
    | **Champ de formulaire**         | Saisie de texte, nombre, date ou case à cocher                 |
    | **Sélecteur d'enregistrements** | Sélectionner des enregistrements depuis une table intelligente |
  </Tab>

  <Tab title="Actions">
    | Widget                     | Description                                   |
    | -------------------------- | --------------------------------------------- |
    | **Actions**                | Liste des actions disponibles                 |
    | **Formulaire d'action**    | Action unique sous forme de formulaire        |
    | **Exécutions de workflow** | État et historique des exécutions de workflow |
    | **Historique d'exécution** | Historique d'exécution des workflows          |
  </Tab>

  <Tab title="Contenu">
    | Widget                | Description                         |
    | --------------------- | ----------------------------------- |
    | **Document**          | Visionneuse et éditeur de documents |
    | **Réunions**          | Transcriptions et notes de réunions |
    | **Constructeur JSON** | Éditeur JSON structuré              |
    | **Texte**             | Contenu de texte riche              |
    | **Bouton**            | Bouton interactif avec actions      |
    | **Image**             | Afficher une image                  |
    | **Nombre / KPI**      | Afficher une métrique ou un KPI     |
  </Tab>
</Tabs>

## Pour commencer

### Créer une interface

<Steps>
  <Step title="Accéder aux interfaces">
    Cliquez sur **Interfaces** dans la barre latérale du projet.
  </Step>

  <Step title="Créer une nouvelle interface">
    * Si aucune interface n'existe encore, cliquez sur **+ Créez votre première interface** au centre de la page.
    * Si des interfaces existent déjà, cliquez sur **+ Nouvelle interface** en haut à droite.
  </Step>

  <Step title="Nommer votre interface">
    Une fenêtre modale **Nouvelle interface** apparaîtra. Entrez un nom et cliquez sur **Créer**. Vous serez redirigé vers l'éditeur d'interfaces.
  </Step>
</Steps>

### Disposition de l'éditeur d'interfaces

Une fois dans l'éditeur d'interfaces, vous verrez trois zones principales :

| Zone                      | Description                                                         |
| ------------------------- | ------------------------------------------------------------------- |
| **Barre latérale gauche** | Liste des pages et panneau des widgets                              |
| **Canevas**               | Zone d'édition de la page — glissez des widgets ici pour construire |
| **Panneau droit**         | Paramètres de configuration du widget sélectionné                   |

La **barre supérieure** contient les contrôles suivants :

<CardGroup cols={2}>
  <Card title="Annuler / Rétablir" icon="rotate-left">
    Revenez en arrière ou avancez dans vos modifications.
  </Card>

  <Card title="Vue responsive" icon="mobile">
    Basculez entre les aperçus Bureau, Tablette et Mobile.
  </Card>

  <Card title="Édition / Aperçu" icon="eye">
    Passez du mode édition à un aperçu dans l'éditeur.
  </Card>

  <Card title="Aperçu complet" icon="arrow-up-right-from-square">
    Ouvrez l'interface dans un nouvel onglet telle que les utilisateurs finaux la verront.
  </Card>

  <Card title="Palette de commandes (⌘K)" icon="terminal">
    Accès rapide aux actions de l'éditeur via le clavier.
  </Card>

  <Card title="Publier / Enregistrer" icon="cloud-arrow-up">
    Enregistrez votre travail ou publiez l'interface sur une URL publique.
  </Card>
</CardGroup>

## Construire des pages

### Ajouter une page

<Steps>
  <Step title="Ouvrir la fenêtre modale Nouvelle page">
    Cliquez sur **+** à côté de **PAGES** dans la barre latérale gauche.
  </Step>

  <Step title="Choisir un modèle">
    Filtrez par catégorie (**Tous les modèles**, **Démarrage**, **Débutant**, **Avancé**) et sélectionnez l'un des modèles disponibles.

    <CardGroup cols={2}>
      <Card title="Page vierge" icon="file">
        Commencez de zéro avec un canevas vide.
      </Card>

      <Card title="Tableau de bord analytique" icon="chart-bar">
        Cartes KPI, graphiques et tableau d'activité récente.
      </Card>

      <Card title="Formulaire d'action" icon="bolt">
        Formulaire centré pour déclencher une action.
      </Card>

      <Card title="Vue tableau" icon="table">
        Tableau de données pleine largeur avec en-tête.
      </Card>

      <Card title="Espace de discussion" icon="message">
        Discussion intégrée avec contexte latéral.
      </Card>

      <Card title="Centre d'agents" icon="robot">
        Grille de cartes d'agents avec en-tête et filtres.
      </Card>

      <Card title="Panneau d'actions" icon="list">
        Grille consultable de toutes les actions disponibles.
      </Card>

      <Card title="Discussion + Tableau" icon="table-columns">
        Vue côte à côte de la discussion et des données.
      </Card>
    </CardGroup>
  </Step>

  <Step title="Nommer la page">
    Entrez un nom de page au bas de la fenêtre modale (par défaut, le nom du modèle).
  </Step>

  <Step title="Créer la page">
    Cliquez sur **Créer la page**. La page sera ajoutée à votre interface et ouverte sur le canevas.
  </Step>
</Steps>

### Ajouter des widgets

<Steps>
  <Step title="Trouver un widget">
    Dans le panneau **Widgets** à gauche, parcourez par catégorie ou utilisez la barre de recherche.
  </Step>

  <Step title="Ajouter au canevas">
    Glissez le widget sur le canevas, ou cliquez dessus pour le placer automatiquement.
  </Step>

  <Step title="Positionner et redimensionner">
    Déplacez et redimensionnez les widgets sur la grille à 12 colonnes pour obtenir la disposition souhaitée.
  </Step>

  <Step title="Configurer le widget">
    Sélectionnez un widget pour ouvrir ses paramètres dans le panneau droit.
  </Step>
</Steps>

### Gérer les pages

Pour accéder aux options d'une page, survolez une page dans la barre latérale et cliquez sur le **⋯** (menu à trois points) qui apparaît. Cela vous donne les options suivantes :

<AccordionGroup>
  <Accordion title="Renommer" icon="pen">
    Cliquez sur **Renommer** pour transformer le nom de page en un champ de texte éditable en ligne directement dans la barre latérale. Tapez le nouveau nom et confirmez.
  </Accordion>

  <Accordion title="Changer l'icône" icon="icons">
    Cliquez sur **Changer l'icône** pour ouvrir un sélecteur d'icônes sous le nom de la page. Cliquez sur n'importe quelle icône pour l'appliquer immédiatement — aucune étape d'enregistrement n'est requise.
  </Accordion>

  <Accordion title="Ajouter à un groupe" icon="folder">
    Cliquez sur **Ajouter à un groupe** pour ouvrir un panneau en ligne avec un champ de saisie. Entrez un nom de groupe (par exemple « Admin », « Rapports ») et cliquez sur **Enregistrer** pour organiser les pages sous un groupe étiqueté dans la navigation. Pour retirer une page de son groupe, laissez le champ vide et cliquez sur **Enregistrer**.
  </Accordion>

  <Accordion title="Réorganiser les pages" icon="arrows-up-down">
    Cliquez et glissez les pages dans la liste des pages pour les réorganiser. L'ordre détermine l'ordre de navigation dans l'interface publiée.
  </Accordion>

  <Accordion title="Supprimer" icon="trash">
    Cliquez sur **Supprimer** pour déclencher une boîte de dialogue de confirmation du navigateur : « Supprimer cette page ? Cette action est irréversible. » Cliquez sur **OK** pour confirmer ou **Annuler** pour abandonner. Une interface doit toujours avoir au moins une page.
  </Accordion>
</AccordionGroup>

## Aperçu de votre interface

<Tabs>
  <Tab title="Bascule Édition / Aperçu">
    Utilisez la bascule **Édition / Aperçu** dans la barre supérieure pour passer du mode édition à un aperçu dans l'éditeur de la page en cours. C'est utile pour vérifier votre disposition pendant que vous construisez sans quitter l'éditeur.
  </Tab>

  <Tab title="Aperçu complet">
    Cliquez sur **Aperçu complet** en haut à droite pour ouvrir l'interface dans un nouvel onglet du navigateur telle que les utilisateurs finaux la verront. Cela affiche l'interface complète — y compris la navigation latérale, le branding et toutes les pages — en dehors de l'environnement de l'éditeur.
  </Tab>
</Tabs>

## Branding de l'interface

Cliquez sur l'**icône de palette** à côté du nom de l'interface dans la barre supérieure pour ouvrir la fenêtre modale **Branding de l'interface**.

<Tabs>
  <Tab title="Général">
    | Paramètre             | Description                                       |
    | --------------------- | ------------------------------------------------- |
    | **Titre d'affichage** | Texte affiché dans l'en-tête de la barre latérale |
    | **URL du logo**       | Image carrée, PNG 256×256 recommandé              |
  </Tab>

  <Tab title="Navigation">
    **Disposition de la navigation** — contrôle comment les utilisateurs finaux passent d'une page à l'autre :

    | Disposition           | Description                                                                            |
    | --------------------- | -------------------------------------------------------------------------------------- |
    | **Barre latérale**    | Menu vertical à gauche — idéal pour les applications avec de nombreuses pages          |
    | **Barre supérieure**  | Navigation horizontale au-dessus du contenu — parfait pour une ambiance page d'accueil |
    | **Flottante**         | Menu hamburger dans un tiroir — maximise l'espace du canevas                           |
    | **Pas de navigation** | Mode page unique — utilisez des boutons à l'intérieur de la page pour naviguer         |

    **État initial** — si la barre latérale commence **Étendue** ou **Réduite**.

    **Indicateur de page active** — style visuel pour la page sélectionnée :

    * **Pill** : arrière-plan rempli
    * **Soft** : arrière-plan teinté
    * **Bar** : ligne d'accentuation à gauche
  </Tab>

  <Tab title="Couleurs">
    | Paramètre                                 | Description                                                                                                                    |
    | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
    | **Couleur principale**                    | Utilisée pour les boutons, liens et états actifs — entrez une valeur hexadécimale ou choisissez parmi les palettes prédéfinies |
    | **Couleur d'accentuation** *(facultatif)* | Couleur d'accentuation de la barre latérale ; par défaut, la couleur principale                                                |

    Un **Aperçu en direct** se met à jour en temps réel pendant que vous apportez des modifications.
  </Tab>

  <Tab title="Avancé">
    | Paramètre            | Description                                              |
    | -------------------- | -------------------------------------------------------- |
    | **URL du favicon**   | Icône de l'onglet du navigateur — format ICO ou PNG      |
    | **CSS personnalisé** | Appliqué à la racine de l'exécution pour un style avancé |
  </Tab>
</Tabs>

Cliquez sur **Enregistrer le branding** pour appliquer vos modifications.

## Publication

<Warning>
  L'enregistrement et la publication sont des actions distinctes. Enregistrez toujours vos modifications avant de publier. Si vous ouvrez la fenêtre de publication avec des modifications non enregistrées, une bannière d'avertissement vous demandera d'enregistrer d'abord.
</Warning>

<Steps>
  <Step title="Ouvrir la fenêtre modale de publication">
    Cliquez sur **Publier** en haut à droite de l'éditeur d'interfaces.
  </Step>

  <Step title="Définir votre URL publique">
    Entrez le slug de l'URL pour votre interface. Lettres minuscules, chiffres et tirets uniquement.
  </Step>

  <Step title="Gérer l'accès des membres">
    Sous **Gérer l'accès des membres**, révisez ou ajoutez les utilisateurs qui doivent avoir accès à cette interface.
  </Step>

  <Step title="Publier sur le web">
    Cliquez sur **Publier sur le web**. Votre interface est maintenant en ligne et accessible via l'URL publique.
  </Step>
</Steps>

Pour rendre une interface indisponible, ouvrez la fenêtre de publication et utilisez l'option de dépublication.

## Palette de commandes

Appuyez sur <kbd>⌘K</kbd> (Mac) ou <kbd>Ctrl+K</kbd> (Windows) — ou cliquez sur le bouton **⌘K** dans la barre supérieure — pour ouvrir la palette de commandes.

<AccordionGroup>
  <Accordion title="Commandes disponibles" icon="terminal">
    | Commande                           | Raccourci                                         |
    | ---------------------------------- | ------------------------------------------------- |
    | Enregistrer les modifications      | <kbd>⌘S</kbd>                                     |
    | Publier sur le web                 | —                                                 |
    | Basculer l'aperçu                  | —                                                 |
    | Ouvrir les paramètres de branding  | —                                                 |
    | Nouvelle page à partir d'un modèle | —                                                 |
    | Annuler                            | <kbd>⌘Z</kbd>                                     |
    | Rétablir                           | <kbd>⌘⇧Z</kbd>                                    |
    | Passer à une page                  | Liste toutes les pages pour une navigation rapide |

    Tapez une commande, un nom de page ou un nom de widget pour rechercher. Appuyez sur <kbd>Esc</kbd> pour fermer.
  </Accordion>
</AccordionGroup>

## Cas d'utilisation

<CardGroup cols={3}>
  <Card title="Support client" icon="headset">
    **Espace de discussion** — chat de support avec contexte de l'agent

    **Base de connaissances** — articles d'aide et documentation

    **Formulaire d'action** — soumettre un ticket ou une demande
  </Card>

  <Card title="Gestion des données" icon="database">
    **Tableau de bord analytique** — cartes KPI et graphiques

    **Vue tableau** — tableau de données complet pour réviser les enregistrements

    **Page personnalisée** — graphiques et widgets KPI pour le reporting
  </Card>

  <Card title="Automatisation de workflows" icon="gears">
    **Panneau d'actions** — parcourir et exécuter des workflows

    **Exécutions de workflow** — suivre l'état et l'historique des exécutions

    **Tableau de bord analytique** — métriques clés et historique d'exécution
  </Card>
</CardGroup>

## Dépannage

<AccordionGroup>
  <Accordion title="L'interface n'apparaît pas" icon="circle-question">
    **Causes possibles :**

    * L'interface n'a pas encore été publiée
    * Vous consultez le mauvais projet
    * Vous n'avez pas les permissions requises

    Vérifiez le statut de publication de l'interface et assurez-vous que vous êtes dans le bon projet.
  </Accordion>

  <Accordion title="La page ne se charge pas" icon="triangle-exclamation">
    **Causes possibles :**

    * Un widget est mal configuré
    * Une ressource référencée (agent, table, action, etc.) n'existe plus ou est inaccessible

    Vérifiez les paramètres des widgets dans le panneau droit et assurez-vous que toutes les ressources référencées sont disponibles.
  </Accordion>

  <Accordion title="Avertissement de modifications non enregistrées" icon="floppy-disk">
    L'indicateur **Modifications non enregistrées** apparaît dans la barre supérieure et le bouton **Enregistrer** devient orange lorsque vous avez des modifications en attente.

    Cliquez sur **Enregistrer** avant d'apercevoir ou de publier pour vous assurer que vos dernières modifications sont appliquées.
  </Accordion>

  <Accordion title="Bannière d'avertissement dans la fenêtre de publication" icon="bell">
    Cela apparaît lorsque vous essayez de publier avec des modifications non enregistrées.

    Fermez la fenêtre modale, cliquez sur **Enregistrer**, puis rouvrez la fenêtre de publication et procédez.
  </Accordion>
</AccordionGroup>

## Étapes suivantes

<CardGroup cols={2}>
  <Card title="Agents" icon="robot" href="/agents/agents">
    Configurez des agents pour alimenter vos widgets de discussion.
  </Card>

  <Card title="Tables intelligentes" icon="table" href="/knowledge-base/smart-tables">
    Configurez des tables intelligentes pour les widgets de données et les tableaux de bord.
  </Card>

  <Card title="Workflows" icon="gears" href="/tools/workflows-v2">
    Construisez des workflows à utiliser dans les widgets d'action.
  </Card>

  <Card title="Base de connaissances" icon="book" href="/knowledge-base/kb-overview">
    Gérez votre base de connaissances pour les widgets de base de connaissances.
  </Card>
</CardGroup>