UI messages et expériences

Ce guide s'adresse aux partenaires qui construisent des expériences utilisateur final : ce que les utilisateurs voient dans l'app MorisBox, et quelles API / payloads utiliser pour les messages riches, menus et flows multi-étapes.

Ce n'est pas un design system pour le site de documentation.

Ce que voient les utilisateurs

Dans l'espace partenaire mobile / Application Client :

Zone	Objectif
Messages	Votre liste hub - notifications, médias, newsletters, cartes flow (plus récents en premier)
Formulaires	Flows interactifs disponibles
Conversations	Fils support ouverts par l'utilisateur
Bots	Vos bots disponibles in-app

Les envois partenaires automatisés vont dans Messages. Ne placez pas le contenu de campagne dans les conversations support.

Briques de base (types de contenu)

Utilisez POST /api/v1/messages avec content_type (et champs media/link/html). Référence complète : Médias et types de contenu, Messages.

Texte

Notification simple ou légende.

{
  "phone": "+228XXXXXXXX",
  "content_type": "text",
  "body": "Votre dossier a été mis à jour.",
  "priority": "notification"
}

UI utilisateur : ligne de liste / bulle simple.

Image

{
  "phone": "+228XXXXXXXX",
  "content_type": "image",
  "body": "Photo de l’agence",
  "media_url": "https://cdn.example.com/agence.jpg",
  "media_filename": "agence.jpg"
}

UI utilisateur : aperçu image · appui pour ouvrir en grand.

Document / audio / vidéo

{
  "content_type": "document",
  "body": "Guide d’affiliation",
  "media_url": "https://cdn.example.com/guide.pdf",
  "media_filename": "guide.pdf"
}

Type	UI utilisateur
`document`	Ligne fichier (nom, type, ouvrir)
`audio`	Ligne audio · ouvrir / lire
`video`	Carte vidéo · ouvrir

Lien CTA

Carte riche avec titre, description, bouton, image optionnelle.

{
  "content_type": "link",
  "body": "Consultez votre espace assuré.",
  "link_url": "https://morisbox.com",
  "link_title": "Espace assuré SEED",
  "link_description": "Cotisations, demandes et documents.",
  "link_label": "Ouvrir le portail",
  "link_image_url": "https://cdn.example.com/cover.jpg"
}

UI utilisateur : carte + bouton principal · ouvre l'URL.

Newsletter HTML

Mise en page riche (image, vidéo, HTML). S'ouvre en plein écran lorsque l'utilisateur appuie sur la ligne hub (pas un mini-aperçu d'abord).

{
  "content_type": "html",
  "subject": "SEED Actu · Juillet",
  "html": "<div><h1>Bonjour</h1><img src=\"https://…/photo.jpg\" style=\"max-width:100%\"/><p>…</p></div>"
}

UI utilisateur : titre de liste = subject · appui → lecteur HTML complet.
Détails : Newsletters HTML.

Invitation flow

Formulaire multi-écrans interactif (inscription, liste d'attente, …).

POST /api/v1/bots/{bot_code}/flows/{flow_code}/invite

{ "phone": "+228XXXXXXXX" }

UI utilisateur : carte flow · ouvrir le runner de formulaire · à la fin : la même carte devient un résumé en lecture seule.
Détails : Flows interactifs.

UI conversation bot (menus et étapes)

Lorsqu'un utilisateur exécute une session bot, le runtime peut présenter :

Type d'événement / étape	Expérience utilisateur
`message` / `flow_message`	Texte dans l'UI flow/bot
`menu` (button)	Liste verticale de choix
`menu` (list)	Liste sectionnée (style liste WhatsApp)
`flow_screen` + `form`	Formulaire multi-champs (inputs, select, phone, email, …)
`flow_screen` + `input` / `select`	Champ unique ou options
`payment`	Confirmation de paiement (stub / futur)
`flow_completed`	Fin + résumé optionnel

Types de champs de formulaire (écrans flow)

Définir dans fields_json sur une étape form :

`type`	Contrôle
`text`	Saisie texte
`phone`	Téléphone (validé E.164)
`email`	E-mail (validé)
`number`	Numérique
`date`	Date `YYYY-MM-DD`
`boolean`	Oui / Non
`select`	Liste d'options (`options: [{id, label}]`)

Valider côté serveur : Validation des champs.

Exemple de définition d'étape formulaire

[
  {
    "key": "full_name",
    "type": "text",
    "label": "Nom complet",
    "required": true,
    "placeholder": "Ex. Ama Koffi"
  },
  {
    "key": "email",
    "type": "email",
    "label": "E-mail",
    "required": false
  },
  {
    "key": "service",
    "type": "select",
    "label": "Service",
    "required": true,
    "options": [
      { "id": "affiliation", "label": "Affiliation" },
      { "id": "pension", "label": "Pension" }
    ]
  }
]

Choisir la bonne brique

Objectif	Utiliser
Alerte ponctuelle	`text` ou modèle
Afficher une photo / PDF	`image` / `document`
Diriger vers votre portail	CTA `link`
Contenu riche mensuel type e-mail	newsletter `html`
Inscription / liste d'attente multi-étapes	Invitation flow + étapes form
Menu guidé de services	Menus bot (`local` ou `service`)
Chat support continu	Conversation démarrée par l'utilisateur (réponses agents)

Séparateurs et structure dans le contenu riche

Dans les newsletters HTML, structurez le contenu avec :

Titres (h1-h3) pour les sections
Règles horizontales (<hr>) ou blocs espacés pour la séparation visuelle
Cartes (divs bordés) pour les CTA
Listes (ul / ol) pour les points scannables

Dans les flows, utilisez des étapes (écrans) séparées plutôt qu'un long formulaire unique lorsque c'est possible - meilleure UX mobile.

Schémas de bout en bout

1. Campagne : image + lien

Envoyer image avec légende
Envoyer un CTA link vers « Compléter ma demande »

2. Liste d'attente d'onboarding

POST …/flows/waitlist/invite
L'utilisateur remplit les formulaires identité + préférences
Statut de carte completed avec résumé

3. Newsletter avec médias

Construire le HTML avec <img> et <video>
content_type=html + subject
L'utilisateur ouvre le lecteur complet depuis le hub

Documentation API associée

Sujet	Page
Envoyer des messages	Messages
Types de médias	Médias et types de contenu
Newsletters	Newsletters HTML
Flows	Flows interactifs
Bots	360Bots
Auth bot	Identifiants bots et webhooks
Validation	Validation des champs