Le catalogue — l'interface
Le Marketplace (ou catalogue) est la vitrine des solutions prêtes à l’emploi d’Abra : des agents IA, des workflows et des automations déjà conçus, classés par métier (Sales, Marketing, Finance, Legal, IT, Support…) et illustrés par des cas réels d’entreprises. On y vient pour découvrir ce qu’Abra sait faire, tester une démo, et demander la mise en place d’une solution pour son équipe.
Bon à savoir avant de commencer : ce catalogue est une surface de découverte. On n’y branche pas ses comptes et on n’active pas soi-même une solution en un clic — cela se fait ensuite, une fois la solution retenue (les accès se relient depuis la page Connecteurs, et la mise en place se fait avec votre équipe Abra). Ici, chaque carte propose plutôt de voir une démo ou de demander un rendez-vous.
Ce document parcourt tous les écrans dans l’ordre où vous les rencontrez, et détaille chaque contrôle visible.
1. L’en-tête, les onglets et la recherche
Section intitulée « 1. L’en-tête, les onglets et la recherche »Tout en haut, le titre de la page, une barre de trois onglets qui sépare les grandes familles de solutions, et un champ de recherche.
À montrer : le titre et son sous-titre, la barre d’onglets avec l’onglet « Agents IA » actif (fond blanc, ombre légère) et le petit nombre à côté de chaque onglet, puis la barre de recherche à droite.
① Titre « Marketplace » — simple en-tête de page.
② Sous-titre — phrase d’accroche « Découvre des outils et solutions pour ton équipe ». Purement informatif.
③ Onglet « Agents IA » (icône robot) — actif par défaut. Affiche les agents conversationnels (assistants, callbots, chatbots). Change le contenu affiché en dessous.
④ Onglet « Workflows » (icône enchaînement) — les traitements déclenchés à la demande (générer un devis, résumer un appel…). Bascule la liste.
⑤ Onglet « Automations » (icône éclair) — les traitements qui tournent en continu / en tâche de fond (tri de mails, veille, surveillance…). Bascule la liste.
⑥ Compteur par onglet — le petit nombre affiché dans chaque onglet indique combien d’éléments contient cette famille. Non cliquable.
⑦ Champ de recherche (icône loupe) — texte d’invite « Rechercher parmi les [famille]… » qui reprend l’onglet actif. Filtre la liste en temps réel sur le nom, la description et les outils/intégrations de chaque élément.
Cliquer sur un onglet mémorise aussi votre choix : les filtres de sous-catégorie (écran 2) sont réinitialisés à chaque changement d’onglet, car chaque famille a ses propres métiers.
2. Les filtres par métier et le compteur
Section intitulée « 2. Les filtres par métier et le compteur »Sous les onglets, une rangée de pastilles permet d’affiner par métier (sous-catégorie). Juste en dessous, un compteur indique combien de résultats correspondent aux filtres.
À montrer : la pastille « Tous » à gauche, puis les pastilles de métier (certaines colorées/actives avec une petite croix, les autres en teinte pâle), et sous la rangée le compteur « N résultats ».
① Pastille « Tous » — première pastille, active par défaut (fond plein). Affiche tous les métiers de l’onglet courant. Cliquer dessus efface toute sélection de métier.
② Pastilles de métier (sous-catégories) — une par métier disponible dans l’onglet : Sales, Marketing, Customer Success, Finance, Analytics, Operations, Support, Productivity, Content, Legal, Compliance, Quality, Research, Procurement… Chaque métier a sa couleur. On peut en sélectionner plusieurs à la fois : une pastille active passe en couleur pleine.
③ Croix sur une pastille active (✕) — apparaît sur chaque pastille sélectionnée ; un clic la désélectionne. Sélectionner « Tous » revient aussi à tout désélectionner.
④ Compteur de résultats — ligne « N résultats » qui reflète le nombre d’éléments correspondant à la recherche et aux filtres actifs. Non cliquable.
⑤ État « aucun résultat » — si rien ne correspond, un message central « Aucun élément trouvé » s’affiche avec une icône de dossier et l’invite « Ajuste ta recherche ou tes filtres. ». Aucun bouton.
3. La carte d’un agent IA
Section intitulée « 3. La carte d’un agent IA »Dans l’onglet Agents IA, chaque solution s’affiche sous forme d’une carte horizontale : le portrait de l’agent à gauche, ses informations et ses boutons d’action à droite.
À montrer : une carte type (ex. « Angie – Personal Assistant ») avec l’image du persona, le nom en gras, la description sur deux lignes, le logo « Abra Enterprise » (ou d’un client) et le badge de métier coloré, puis en bas les petites icônes de logiciels et les deux boutons à droite.
① Visuel de l’agent — le portrait du persona à gauche (ou une icône robot générique si l’agent n’a pas d’illustration). Non cliquable.
② Nom de l’agent — ex. « Angie – Personal Assistant ». En gras.
③ Description — courte présentation sur deux lignes maximum de ce que l’agent sait faire.
④ Logo de l’entreprise — en haut à droite, le logo « Abra Enterprise » par défaut, ou le logo du client dont provient le cas d’usage (ex. Club Med, Carrefour…). Simple illustration de provenance.
⑤ Badge de métier — petite étiquette colorée reprenant la sous-catégorie (Sales, Support, Marketing…). Informatif.
⑥ Icônes d’outils / intégrations — la rangée de petites icônes en bas à gauche montre les logiciels que l’agent utilise (Gmail, Salesforce, OpenAI…). Au survol de chaque icône, une infobulle affiche le nom de l’outil. Au maximum cinq icônes sont montrées.
⑦ Compteur « +N » — si l’agent utilise plus de cinq outils, un « +N » indique le nombre d’outils supplémentaires non affichés.
⑧ Bouton « Démo » (icône lecture) — ouvre la fenêtre d’aperçu de l’agent (écran 5), ou lance directement la vidéo de démonstration si elle existe. Cas particulier : pour l’agent analytique Lucy, ce bouton devient « Chat » (icône bulle) et ouvre directement une conversation d’essai avec l’agent.
⑨ Bouton « Demander » (icône calendrier) — envoie une demande de mise en place / de rendez-vous pour cet agent. Une notification confirme l’envoi (voir écran 6).
4. La liste des workflows et automations
Section intitulée « 4. La liste des workflows et automations »Dans les onglets Workflows et Automations, les solutions ne sont pas des cartes mais des lignes de tableau, plus denses, avec une ligne d’en-tête. Toute la ligne est cliquable.
À montrer : l’en-tête de colonnes en petites majuscules, puis au moins deux lignes de workflows ; pour l’onglet Automations, montrer plutôt la colonne « Type » avec le point vert « Toujours actif ».
① Ligne d’en-tête — les intitulés de colonnes en petites majuscules : Nom, Description, Entreprise, Intégrations, et Durée (pour les workflows) ou Type (pour les automations). Non cliquable.
② Nom + badge de métier — le nom de la solution, suivi d’un petit badge coloré de métier (comme sur les cartes).
③ Description — courte phrase résumant le traitement, tronquée si trop longue.
④ Logo de l’entreprise — le logo du client (ou d’Abra) dont vient le cas. Au survol, une vignette agrandie du logo apparaît.
⑤ Icônes d’intégrations — jusqu’à quatre petites icônes de logiciels, chacune avec son infobulle au survol, et un « +N » si la solution en utilise davantage.
⑥ Colonne « Durée » (onglet Workflows) — durée estimée du traitement, précédée d’une icône horloge (ex. « 2 min », « Real-time », « Auto »).
⑦ Colonne « Type » (onglet Automations) — indique le mode de fonctionnement avec une pastille : Toujours actif (point vert, tourne en continu) ou À la demande (point gris).
⑧ Ligne entière cliquable — cliquer n’importe où sur la ligne ouvre la fenêtre d’aperçu (écran 5), ou lance directement la vidéo de démonstration si elle existe.
5. La fenêtre d’aperçu (démo)
Section intitulée « 5. La fenêtre d’aperçu (démo) »Cliquer sur Démo (carte d’agent) ou sur une ligne de workflow / automation ouvre une fenêtre d’aperçu : une fiche récapitulative de la solution, avec ses intégrations et un appel à l’action.
À montrer : la fenêtre modale centrée avec le nom en titre, l’illustration à gauche, le badge de métier et la durée, le paragraphe de description, la section « Intégrations » listant chaque outil, puis les deux boutons du bas.
① Titre — le nom de la solution, en en-tête de la fenêtre.
② Visuel — l’illustration de la solution (portrait de l’agent en gros plan, ou icône de la famille : robot / workflow / éclair).
③ Badge de métier — l’étiquette colorée de sous-catégorie.
④ Durée estimée — précédée d’une icône horloge, quand elle est renseignée (surtout pour les workflows).
⑤ Description — le texte de présentation complet de la solution.
⑥ Liste des intégrations — sous le titre « Intégrations », chaque outil apparaît en pastille avec son icône et son nom.
⑦ Bouton « Demander un rendez-vous » (icône calendrier) — envoie la demande de mise en place et ferme la fenêtre. Une notification confirme (voir écran 6).
⑧ Bouton « Voir la vidéo » (icône lien externe) — n’apparaît que si une vidéo de démonstration existe. Ouvre la vidéo dans un nouvel onglet.
⑨ Fermeture de la fenêtre — la croix en haut à droite, un clic en dehors de la fenêtre ou la touche Échap referment l’aperçu sans rien envoyer.
6. Les confirmations et actions annexes
Section intitulée « 6. Les confirmations et actions annexes »Certaines actions du catalogue déclenchent une notification ou ouvrent une autre page. Voici ce qui se passe après un clic.
À montrer : la petite notification de confirmation « Rendez-vous demandé » avec son message, superposée au catalogue.
① Notification « Rendez-vous demandé » — après un clic sur Demander (carte, écran 3) ou Demander un rendez-vous (fenêtre d’aperçu, écran 5), un message de confirmation apparaît : « Demande envoyée pour « [nom] ». Notre équipe te contactera bientôt. » Aucune saisie n’est requise, la demande part immédiatement.
② Ouverture d’une vidéo — les boutons Démo / Voir la vidéo et le clic sur une ligne ouvrent la vidéo de démonstration dans un nouvel onglet du navigateur, quand elle existe.
③ Passage au chat d’essai — pour l’agent Lucy, le bouton « Chat » (écran 3, ⑧) quitte le catalogue et ouvre une vraie conversation d’essai avec l’agent, dans laquelle vous pouvez lui poser des questions.
Depuis le catalogue, aucune de ces actions ne modifie votre organisation : on demande, on regarde, on essaie. La mise en place réelle (brancher les comptes, déployer la solution) se fait ensuite avec votre équipe et depuis la page Connecteurs.
Shot-list — captures à réaliser
Section intitulée « Shot-list — captures à réaliser »À produire dans cet ordre (une image par écran ci-dessus) :
- L’en-tête + onglets + recherche — titre, sous-titre, les trois onglets avec compteur (Agents IA actif), le champ de recherche.
- Les filtres de métier — pastille « Tous » + pastilles de métier (une ou deux actives), et la ligne « N résultats » en dessous.
- Une carte d’agent IA — portrait, nom, description, logo d’entreprise, badge de métier, icônes d’outils, boutons Démo et Demander.
- La liste workflows / automations — ligne d’en-tête + plusieurs lignes ; montrer la colonne Durée (workflows) et le point « Toujours actif » (automations).
- La fenêtre d’aperçu — visuel, badge + durée, description, liste des intégrations, boutons « Demander un rendez-vous » et « Voir la vidéo ».
- La notification de confirmation — le toast « Rendez-vous demandé » superposé au catalogue.
Récapitulatif : 6 écrans documentés, 41 contrôles listés (①→⑨ selon les écrans), couvrant chaque onglet, champ de recherche, pastille de filtre, carte, ligne de tableau, badge, icône d’intégration, bouton d’action et notification de l’interface Marketplace.