Embedded Signup

Use seu aplicativo da Meta e a solução de parceiro para integrar clientes ao WhatsApp por meio do seu software. Conclua o Onboarding de parceiro de desenvolvimento técnico antes de seguir estas etapas. Para a opção de integração TP Lite, consulte Partner Direct Link.

Etapa 1: Adicionar domínios permitidos

Faça login no Painel de aplicativos do Meta Developer e acesse Facebook Login for Business > Configurações > Configurações do OAuth do cliente:

Defina as seguintes opções como Sim:

Login do OAuth do cliente
Login do OAuth na Web
Forçar HTTPS
Login do OAuth no navegador incorporado
Usar modo estrito para URIs de redirecionamento
Fazer login com o SDK do JavaScript

⚠️ Observações:

O Embedded Signup depende do SDK do JavaScript.
Quando os clientes corporativos concluem o fluxo de Embedded Signup, a ID da WABA, a ID do número de telefone comercial e um código de token trocável são retornados para a janela que iniciou o fluxo, mas apenas se o domínio dessa página tiver sido adicionado a Domínios permitidos e URIs de redirecionamento do OAuth válidos.
Adicione todos os domínios onde você planeja implantar o Embedded Signup (incluindo domínios de teste em ambientes de desenvolvimento).
Apenas domínios habilitados para HTTPS são suportados.

Uma configuração do Facebook Login for Business define quais permissões solicitar e quais informações adicionais coletar quando os clientes corporativos usarem o Embedded Signup. No console, navegue até Facebook Login for Business > Configurações.

Clique em Criar a partir do modelo e selecione WhatsApp Embedded Signup Configuration With 60 Expiration Token para criar uma configuração. Este modelo gera uma configuração com as permissões e níveis de acesso mais comumente usados.

Após a conclusão da configuração, anote a ID da configuração — ela será necessária na próxima etapa.

Adicione o seguinte código HTML e JavaScript ao seu site. Este é o código completo necessário para implementar o Embedded Signup. Recomendamos criar fluxos de Embedded Signup diferentes dependendo da sua solução ou das necessidades do cliente:

<html>
  <head>
    <meta charset="utf-8" />
    <script>
      window.fbAsyncInit = function () {
        FB.init({
          appId: '{YOUR-FACEBOOK-APP-ID}', // Facebook App ID
          cookie: true,
          xfbml: true,
          version: 'v22.0', // Graph API version
        })
      }

      ;(function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) return
        js = d.createElement(s)
        js.id = id
        js.setAttribute('defer', true)
        js.src = 'https://connect.facebook.net/en_US/sdk.js'
        fjs.parentNode.insertBefore(js, fjs)
      })(document, 'script', 'facebook-jssdk')

      function launchWhatsAppSignup() {
        FB.login(
          function (response) {
            if (response.status === 'connected' && response.authResponse) {
              const code = response.authResponse.code
              console.log('User authResponse code:', code)
              // Send the code to your backend to exchange for a System User access token
            } else {
              console.log('User cancelled login or did not fully authorize.')
            }
          },
          {
            config_id: '{YOUR-CONFIGURATION-ID}',
            response_type: 'code',
            override_default_response_type: true,
            extras: {
              features: [{ name: 'marketing_messages_lite' }],
              setup: { solutionID: '{YOUR-SOLUTION-ID}' },
              sessionInfoVersion: '3',
            },
          },
        )
      }

      const sessionInfoListener = (event) => {
        if (!event.origin?.endsWith('facebook.com')) return
        try {
          const data = JSON.parse(event.data)
          if (data.type === 'WA_EMBEDDED_SIGNUP') {
            if (data.event === 'FINISH') {
              const { phone_number_id, waba_id, businessId } = data.data
              console.log(
                'Business ID ', businessId,
                'Phone number ID ', phone_number_id,
                'WABA ID ', waba_id
              )
            } else if (data.event === 'ERROR') {
              console.error('error ', data.data.error_message)
            } else {
              console.warn('Cancel at ', data.data.current_step)
            }
          }
        } catch {
          console.log('Non JSON Response', event.data)
        }
      }

      window.addEventListener('message', sessionInfoListener)
    </script>
  </head>
  <body>
    <button onclick="launchWhatsAppSignup()" style="background-color:#1877f2;border:0;border-radius:4px;color:#fff;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:bold;height:40px;padding:0 24px;">
      Launch Embedded Signup
    </button>
  </body>
</html>

⚠️ Observações:

Substitua appId, config_id e solutionID por valores reais.
O frontend deve passar waba_id e phone_number_id para o seu backend para recuperar a WABA e registrar o número (veja abaixo).

Mais detalhes: https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation 2. Vincular a WABA e o número registrado Depois que o cliente concluir o Embedded Signup, seu frontend obterá o waba_id e o phone_number_id, e os passará para o seu backend para chamadas de API subsequentes. Vincular WABA Chame a API de vinculação de WABA da YCloud e associe-a à conta de cliente correspondente no seu sistema. Exemplo de solicitação:

curl -X POST -H 'X-API-Key: {{YOUR_API_KEY}}' \
    'https://api.ycloud.com/v2/whatsapp/businessAccounts/{wabaId}/tp/bind'

Exemplo de resposta de sucesso:

{
    "id": "{{waba_id}}",
    "name": "WABA name",
    "accountReviewStatus": "APPROVED",
    "paymentMethodAttached": true,
    "currency": "AUD",
    "timezoneId": "1"
}

Observação: se o campo de resposta paymentMethodAttached for true, isso indica que a YCloud vinculou com sucesso um método de pagamento a esta WABA. Caso contrário, entre em contato com a equipe da YCloud para resolver o problema. Registrar número de telefone

curl -XPOST 'https://api.ycloud.com/v2/whatsapp/phoneNumbers/{{waba_id}}/{{phone_number_id}}/register' \
  -H 'X-API-Key: {{YOUR-API-KEY}}'

Exemplo de resposta

{
  "phoneNumber": "{{phonenumber}}",
  "wabaId": "{{waba_id}}",
  "verifiedName": "Phone number name",
  "qualityRating": "GREEN",
  "messagingLimit": "TIER_250",
  "status": "CONNECTED"
}

<html>
  <head>
    <meta charset="utf-8" />
    <script>
      window.fbAsyncInit = function () {
        FB.init({
          appId: '{YOUR-FACEBOOK-APP-ID}',
          cookie: true,
          xfbml: true,
          version: 'v22.0',
        });
      };
      (function (d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.setAttribute('defer', true);
        js.src = 'https://connect.facebook.net/en_US/sdk.js';
        fjs.parentNode.insertBefore(js, fjs);
      })(document, 'script', 'facebook-jssdk');

      function launchWhatsAppSignup() {
        FB.login(
          function (response) {
            if (response.status === 'connected' && response.authResponse) {
              const code = response.authResponse.code;
              console.log('User authResponse code:', code);
            } else {
              console.log('User cancelled login or did not fully authorize.');
            }
          },
          {
            config_id: '{YOUR-CONFIGURATION-ID}',
            response_type: 'code',
            override_default_response_type: true,
            extras: {
              setup: { solutionID: '{YOUR-SOLUTION-ID}' },
              sessionInfoVersion: 3,
              featureType: 'whatsapp_business_app_onboarding',
            },
          },
        );
      }

      const sessionInfoListener = (event) => {
        if (!event.origin?.endsWith('facebook.com')) return;
        try {
          const data = JSON.parse(event.data);
          if (data.type === 'WA_EMBEDDED_SIGNUP') {
            if (data.event === 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING' || (data.event === 'FINISH' && data.data.is_wa_login_user)) {
              const { business_id, waba_id, phone_number_id } = data.data;
              console.log('Business ID ', business_id, 'WABA ID ', waba_id, 'Phone number ID ', phone_number_id);
            } else if (data.event === 'ERROR') {
              console.error('error ', data.data.error_message);
            } else {
              console.warn('Cancel at ', data.data.current_step);
            }
          }
        } catch {
          console.log('Non JSON Response', event.data);
        }
      };

      window.addEventListener('message', sessionInfoListener);
    </script>
  </head>
  <body>
    <button
      onclick="launchWhatsAppSignup()"
      style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px"
    >
      Launch Embedded Signup
    </button>
  </body>
</html>

2. Recuperar WABA e vincular à YCloud

Depois que os clientes concluírem o Embedded Signup, seu frontend receberá waba_id. Passe-o para o seu backend para chamadas adicionais de API. Chame a API SMB Bind da YCloud. Depois de concluído com sucesso, associe a WABA à conta do seu cliente no seu sistema.

curl 'POST /v2/whatsapp/businessAccounts/{wabaId}/smb/bind' \
  -H 'X-API-Key: {{YOUR-API-KEY}}'

Exemplo de resposta

{
  "id": "{{phonenumber_id}}",
  "phoneNumber": "{{phonenumber}}",
  "wabaId": "{{waba_id}}",
  "qualityRating": "GREEN",
  "messagingLimit": "TIER_1K",
  "verifiedName": "John's Cake Shop",
  "codeVerificationStatus": "VERIFIED",
  "isOfficialBusinessAccount": true,
  "status": "PENDING",
  "nameStatus": "APPROVED",
  "newNameStatus": "APPROVED",
  "decision": "APPROVED",
  "requestedVerifiedName": "string",
  "rejectionReason": "string",
  "qualityUpdateEvent": "ONBOARDING"
}

Perguntas frequentes

Em quais casos a YCloud pode falhar ao anexar um método de pagamento a uma WABA?

Isso pode acontecer se o usuário selecionar uma WABA existente em vez de criar uma nova.
A WABA existente pode já ter um método de pagamento que não foi removido.

Ao abrir a página do Embedded Signup, a seguinte mensagem pode aparecer:Aplicativo não ativo
No momento, este aplicativo não está acessível e o desenvolvedor do aplicativo está ciente do problema. Você poderá fazer login quando o aplicativo for reativado.Isso acontece quando o aplicativo está no modo de Desenvolvimento , no qual apenas usuários de teste têm permissão (consulte Painel de aplicativos > Funções do aplicativo > Funções / Usuários de teste).Solução:
Alterne o modo do aplicativo para Ao vivo por meio de Aplicativos da Meta, abrindo o aplicativo correspondente no Painel.
Como alternativa, autorize o usuário atual. Consulte: Atribuir ativos empresariais a pessoas no seu portfólio empresarial.

Ao abrir a página do Embedded Signup, a seguinte mensagem pode aparecer:Recurso indisponível
O Login do Facebook está indisponível para este aplicativo no momento, pois estamos atualizando detalhes adicionais para ele. Tente novamente mais tarde.Solução:
Acesse Painel de aplicativos > Análise do aplicativo > Permissões e recursos e solicite o acesso avançado para public_profile .

Visão geral

Parceiros de desenvolvimento técnico

Parceiros de soluções

Parceiros afiliados

Etapa 1: Adicionar domínios permitidos

2. Recuperar WABA e vincular à YCloud

Perguntas frequentes

​Etapa 1: Adicionar domínios permitidos

​Etapa 2: Criar uma ID de configuração do Facebook Login for Business

​Etapa 3: Integrar o Embedded Signup ao seu site

​Embedded Signup – Criando uma conta da API do WhatsApp

​1. Criar o botão de Embedded Signup

​Embedded Signup – Coexistência do aplicativo WhatsApp Business

​1. Criar o botão de Embedded Signup

​2. Recuperar WABA e vincular à YCloud

​Perguntas frequentes

​

Etapa 1: Adicionar domínios permitidos

Etapa 2: Criar uma ID de configuração do Facebook Login for Business

Etapa 3: Integrar o Embedded Signup ao seu site

Embedded Signup – Criando uma conta da API do WhatsApp

1. Criar o botão de Embedded Signup

Embedded Signup – Coexistência do aplicativo WhatsApp Business

1. Criar o botão de Embedded Signup

2. Recuperar WABA e vincular à YCloud

Perguntas frequentes