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

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

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

FB.login(
  (response) => {
    if (response.authResponse?.code) {
      completeSignup(response.authResponse.code);
    }
  },
  {
    config_id: config_id,
    response_type: "code",
    override_default_response_type: true,
  }
);

3. Completar o cadastro

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

4. Aguardar a ativação

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

{
  "event": "number.activated",
  "data": {
    "id": "clxyz123...",
    "displayNumber": "+55 11 99999-0000",
    "status": "ACTIVE"
  }
}

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?