Interface e experiências de mensagens

Este guia destina-se aos parceiros que criam experiências para usuários finais: explica o que os usuários veem no aplicativo MorisBox e quais APIs / payloads usar para mensagens enriquecidas, menus e fluxos com várias etapas.

Não é um design system para o site de documentação.

O que os usuários veem

No espaço do parceiro do aplicativo móvel / Application Client:

Área	Objetivo
Mensagens	Sua lista do hub: notificações, mídia, newsletters e cartões de fluxo (os mais recentes primeiro)
Formulários	Fluxos interativos disponíveis
Conversas	Conversas de suporte abertas pelo usuário
Bots	Seus bots disponíveis in-app

Os envios automatizados dos parceiros aparecem em Mensagens. Não coloque conteúdo de campanhas nas conversas de suporte.

Componentes básicos (tipos de conteúdo)

Use POST /api/v1/messages com content_type (e os campos de mídia, link ou HTML). Referência completa: Mídia e tipos de conteúdo, Mensagens.

Texto

Notificação simples ou legenda.

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

Interface do usuário: linha de lista / balão simples.

Imagem

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

Interface do usuário: prévia da imagem · toque para abrir em tamanho completo.

Documento / áudio / vídeo

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

Tipo	Interface do usuário
`document`	Linha de arquivo (nome, tipo, abrir)
`audio`	Linha de áudio · abrir / reproduzir
`video`	Cartão de vídeo · abrir

Link CTA

Cartão enriquecido com título, descrição, botão e imagem 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"
}

Interface do usuário: cartão + botão principal · abre a URL.

Newsletter HTML

Layout enriquecido (imagem, vídeo, HTML). Abre em tela cheia quando o usuário toca na linha do hub (sem exibir primeiro uma prévia reduzida).

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

Interface do usuário: título da lista = subject · toque → leitor HTML completo.
Mais detalhes: Newsletters HTML.

Convite para um fluxo

Formulário interativo com várias telas (cadastro, lista de espera, …).

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

{ "phone": "+228XXXXXXXX" }

Interface do usuário: cartão de fluxo · abre o runner do formulário · ao concluir, o mesmo cartão se torna um resumo somente leitura.
Mais detalhes: Fluxos interativos.

Interface de conversa com bots (menus e etapas)

Quando um usuário executa uma sessão de bot, o runtime pode apresentar:

Tipo de evento / etapa	Experiência do usuário
`message` / `flow_message`	Texto na interface de fluxo/bot
`menu` (button)	Lista vertical de opções
`menu` (list)	Lista com seções (no estilo das listas do WhatsApp)
`flow_screen` + `form`	Formulário com vários campos (inputs, select, phone, email, …)
`flow_screen` + `input` / `select`	Campo único ou opções
`payment`	Confirmação de pagamento (stub / futuro)
`flow_completed`	Conclusão + resumo opcional

Tipos de campo de formulário (telas de fluxo)

Defina-os em fields_json em uma etapa de formulário:

`type`	Controle
`text`	Entrada de texto
`phone`	Telefone (validado como E.164)
`email`	E-mail (validado)
`number`	Numérico
`date`	Data `YYYY-MM-DD`
`boolean`	Sim / Não
`select`	Lista de opções (`options: [{id, label}]`)

Valide no servidor: Validação de campos.

Exemplo de definição de uma etapa de formulário

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

Escolher o componente correto

Objetivo	Usar
Alerta pontual	`text` ou modelo
Exibir uma foto / PDF	`image` / `document`
Direcionar ao seu portal	CTA `link`
Conteúdo enriquecido mensal semelhante a e-mail	Newsletter `html`
Cadastro / lista de espera com várias etapas	Convite para fluxo + etapas de formulário
Menu guiado de serviços	Menus de bot (`local` ou `service`)
Chat de suporte contínuo	Conversa iniciada pelo usuário (respostas dos agentes)

Separadores e estrutura no conteúdo enriquecido

Nas newsletters HTML, estruture o conteúdo com:

Títulos (h1-h3) para as seções
Linhas horizontais (<hr>) ou blocos espaçados para separação visual
Cartões (divs com borda) para os CTAs
Listas (ul / ol) para facilitar a leitura rápida

Nos fluxos, use etapas (telas) separadas em vez de um único formulário longo sempre que possível: isso oferece uma experiência móvel melhor.

Fluxos de ponta a ponta

1. Campanha: imagem + link

Envie uma image com legenda
Envie um CTA link para “Concluir minha solicitação”

2. Lista de espera de onboarding

POST …/flows/waitlist/invite
O usuário preenche os formulários de identidade + preferências
O cartão passa ao status completed, com um resumo

3. Newsletter com mídia

Crie o HTML com <img> e <video>
content_type=html + subject
O usuário abre o leitor completo a partir do hub

Documentação relacionada da API

Tema	Página
Enviar mensagens	Mensagens
Tipos de mídia	Mídia e tipos de conteúdo
Newsletters	Newsletters HTML
Fluxos	Fluxos interativos
Bots	360Bots
Autenticação de bots	Credenciais de bots e webhooks
Validação	Validação de campos