Embedded Signup | Muchaw DEV

O Embedded Signup é um fluxo nativo do Facebook que permite que seus usuários finais conectem seus números de WhatsApp Business diretamente da sua aplicação — sem nenhum conhecimento do Meta Business Manager. Ele abre um popup usando o SDK JavaScript do Facebook, guia o usuário pelo processo de autorização e retorna um código de autorização.

O Muchaw DEV cuida de todo o processo de provisionamento no backend. Seu usuário final nunca sabe que o Muchaw DEV existe.

Visão geral do fluxo

Seu Frontend         Muchaw DEV              API Cloud da Meta
     │                     │                       │
     │  GET /init          │                       │
     │────────────────────▶│                       │
     │ { app_id, config_id }                       │
     │◀────────────────────│                       │
     │                     │                       │
     │  FB.login(app_id, config_id)                │
     │──────────────────────────────────────────▶  │
     │              (usuário completa o popup)      │
     │◀──────────────────────────────────────── code│
     │                     │                       │
     │  POST /complete     │                       │
     │  { code }           │                       │
     │────────────────────▶│                       │
     │                     │  Registrar, configurar│
     │                     │──────────────────────▶│
     │  { number_id, status: "PENDING" }           │
     │◀────────────────────│                       │
     │                     │                       │
     │  [webhook: number.activated disparado]      │

Passos de integração

1. Buscar configuração do SDK

1 const res = await fetch("https://dev.muchau.com.br/api/embedded-signup/init", {
2   headers: { Authorization: `Bearer ${apiKey}` },
3 });
4 const { app_id, config_id } = await res.json();

1 <script>
2   window.fbAsyncInit = function() {
3     FB.init({ appId: app_id, version: "v21.0" });
4   };
5 </script>
6 <script async src="https://connect.facebook.net/en_US/sdk.js"></script>

1 FB.login(
2   (response) => {
3     if (response.authResponse?.code) {
4       completeSignup(response.authResponse.code);
5     }
6   },
7   {
8     config_id: config_id,
9     response_type: "code",
10     override_default_response_type: true,
11   }
12 );

3. Completar o cadastro

1 async function completeSignup(code) {
2   const res = await fetch("https://dev.muchaw.com.br/api/embedded-signup/complete", {
3     method: "POST",
4     headers: {
5       Authorization: `Bearer ${apiKey}`,
6       "Content-Type": "application/json",
7     },
8     body: JSON.stringify({ code }),
9   });
10   const { number_id, status } = await res.json();
11   // Status é "PENDING" — aguarde o webhook number.activated
12 }

4. Aguardar a ativação

Configure um webhook para number.activated para saber quando o número estiver pronto:

1 {
2   "event": "number.activated",
3   "data": {
4     "id": "clxyz123...",
5     "displayNumber": "+55 11 99999-0000",
6     "status": "ACTIVE"
7   }
8 }

White-label

O fluxo completo de Embedded Signup usa internamente o App da Meta e o Business Portfolio do Muchaw DEV. Seu usuário final vê apenas a interface padrão do Facebook — não há menção ao Muchaw DEV. Você pode personalizar a experiência embutindo-a dentro da sua própria UI.

Requisitos

Seu frontend deve ser servido via HTTPS (obrigatório pelo Facebook)
O domínio deve ser adicionado à lista de domínios permitidos do Muchaw DEV (entre em contato com o suporte)

O que é o Embedded Signup?