Interfaz de mensajes y experiencias

Esta guía está dirigida a los socios que crean experiencias para usuarios finales: explica qué ven los usuarios en la aplicación MorisBox y qué API / payloads deben utilizarse para mensajes enriquecidos, menús y flows de varias etapas.

No es un sistema de diseño para el sitio de documentación.

Lo que ven los usuarios

En el espacio del socio de la aplicación móvil / Application Client:

Zona	Objetivo
Mensajes	Su lista del hub: notificaciones, contenido multimedia, newsletters y tarjetas de flow (los más recientes aparecen primero)
Formularios	Flows interactivos disponibles
Conversaciones	Hilos de soporte abiertos por el usuario
Bots	Sus bots disponibles in-app

Los envíos automatizados de los socios aparecen en Mensajes. No coloque contenido de campañas en las conversaciones de soporte.

Componentes básicos (tipos de contenido)

Utilice POST /api/v1/messages con content_type (y los campos de contenido multimedia, enlace o HTML). Referencia completa: Contenido multimedia y tipos de contenido, Mensajes.

Texto

Notificación sencilla o leyenda.

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

Interfaz de usuario: fila de lista / burbuja sencilla.

Imagen

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

Interfaz de usuario: vista previa de la imagen · toque para abrirla a tamaño completo.

Documento / audio / vídeo

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

Tipo	Interfaz de usuario
`document`	Fila de archivo (nombre, tipo, abrir)
`audio`	Fila de audio · abrir / reproducir
`video`	Tarjeta de vídeo · abrir

Enlace CTA

Tarjeta enriquecida con título, descripción, botón e imagen opcional.

{
  "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"
}

Interfaz de usuario: tarjeta + botón principal · abre la URL.

Newsletter HTML

Diseño enriquecido (imagen, vídeo, HTML). Se abre a pantalla completa cuando el usuario toca la fila del hub (sin mostrar primero una vista previa reducida).

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

Interfaz de usuario: título de la lista = subject · toque → lector HTML completo.
Más información: Newsletters HTML.

Invitación a un flow

Formulario interactivo de varias pantallas (registro, lista de espera, …).

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

{ "phone": "+228XXXXXXXX" }

Interfaz de usuario: tarjeta de flow · abre el runner del formulario · al terminar, la misma tarjeta se convierte en un resumen de solo lectura.
Más información: Flows interactivos.

Interfaz de conversación con bots (menús y etapas)

Cuando un usuario ejecuta una sesión de bot, el runtime puede presentar:

Tipo de evento / etapa	Experiencia de usuario
`message` / `flow_message`	Texto en la interfaz de flow/bot
`menu` (button)	Lista vertical de opciones
`menu` (list)	Lista con secciones (al estilo de las listas de WhatsApp)
`flow_screen` + `form`	Formulario con varios campos (inputs, select, phone, email, …)
`flow_screen` + `input` / `select`	Campo único u opciones
`payment`	Confirmación de pago (stub / futuro)
`flow_completed`	Finalización + resumen opcional

Tipos de campos de formulario (pantallas de flow)

Defínalos en fields_json en una etapa de formulario:

`type`	Control
`text`	Entrada de texto
`phone`	Teléfono (validado como E.164)
`email`	Correo electrónico (validado)
`number`	Número
`date`	Fecha `YYYY-MM-DD`
`boolean`	Sí / No
`select`	Lista de opciones (`options: [{id, label}]`)

Valide en el servidor: Validación de campos.

Ejemplo de definición de una etapa de formulario

[
  {
    "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" }
    ]
  }
]

Elegir el componente adecuado

Objetivo	Utilizar
Alerta puntual	`text` o plantilla
Mostrar una foto / PDF	`image` / `document`
Dirigir al usuario a su portal	CTA `link`
Contenido enriquecido mensual similar a un correo electrónico	Newsletter `html`
Registro / lista de espera de varias etapas	Invitación a un flow + etapas de formulario
Menú guiado de servicios	Menús de bot (`local` o `service`)
Chat de soporte continuo	Conversación iniciada por el usuario (respuestas de agentes)

Separadores y estructura del contenido enriquecido

En las newsletters HTML, estructure el contenido con:

Encabezados (h1-h3) para las secciones
Líneas horizontales (<hr>) o bloques espaciados para la separación visual
Tarjetas (divs con borde) para los CTA
Listas (ul / ol) para facilitar la lectura rápida

En los flows, utilice etapas (pantallas) separadas en lugar de un único formulario largo siempre que sea posible: ofrece una mejor experiencia móvil.

Flujos de extremo a extremo

1. Campaña: imagen + enlace

Envíe una image con una leyenda
Envíe un CTA link hacia «Completar mi solicitud»

2. Lista de espera de onboarding

POST …/flows/waitlist/invite
El usuario completa los formularios de identidad + preferencias
La tarjeta adquiere el estado completed con un resumen

3. Newsletter con contenido multimedia

Cree el HTML con <img> y <video>
content_type=html + subject
El usuario abre el lector completo desde el hub

Documentación de la API relacionada

Tema	Página
Enviar mensajes	Mensajes
Tipos de contenido multimedia	Contenido multimedia y tipos de contenido
Newsletters	Newsletters HTML
Flows	Flows interactivos
Bots	360Bots
Autenticación de bots	Credenciales de bots y webhooks
Validación	Validación de campos