> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ycloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedded Signup

> Integre o WhatsApp Embedded Signup com seu aplicativo da Meta e solução de parceiro.

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](/pt/partner-center/technical-development-partners/technical-development-partner-onboarding) antes de seguir estas etapas.

Para a opção de integração TP Lite, consulte [Partner Direct Link](/pt/partner-center/technical-development-partners/partner-direct-link-tp-lite).

## 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**:

<img src="https://mintcdn.com/lchnan/JjW3MxuDG9tQSlvR/product-assets/2db12bf6fa-image.webp?fit=max&auto=format&n=JjW3MxuDG9tQSlvR&q=85&s=de153316146021c3fab7ed456c5d662c" alt="Captura de tela do produto YCloud" width="1520" height="1069" data-path="product-assets/2db12bf6fa-image.webp" />

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.

***

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

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**.

<img src="https://mintcdn.com/lchnan/oG46AChNAYXnQdzq/product-assets/afc8d47fd5-image-1.webp?fit=max&auto=format&n=oG46AChNAYXnQdzq&q=85&s=baa074846297cfdaab2649005eeda6e0" alt="Captura de tela do produto YCloud" width="950" height="490" data-path="product-assets/afc8d47fd5-image-1.webp" />

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.

<img src="https://mintcdn.com/lchnan/hZV5AyihgANeW21k/product-assets/e35025f36c-image-2.webp?fit=max&auto=format&n=hZV5AyihgANeW21k&q=85&s=aafb45acb0699cd656b9276a81a6e352" alt="Captura de tela do produto YCloud" width="615" height="1186" data-path="product-assets/e35025f36c-image-2.webp" />

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

***

## Etapa 3: Integrar o Embedded Signup ao seu site

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:

* [**Criação de uma conta da API do WhatsApp**](https://www.ycloud.com/whatsapp-business-api)
* [**Coexistência do aplicativo WhatsApp Business**](https://www.ycloud.com/whatsapp-business-app-coexistence)

***

### Embedded Signup – Criando uma conta da API do WhatsApp

#### 1. Criar o botão de Embedded Signup

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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](https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation?utm_source=chatgpt.com)

**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**

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
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**

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "phoneNumber": "{{phonenumber}}",
  "wabaId": "{{waba_id}}",
  "verifiedName": "Phone number name",
  "qualityRating": "GREEN",
  "messagingLimit": "TIER_250",
  "status": "CONNECTED"
}
```

***

### Embedded Signup – Coexistência do aplicativo WhatsApp Business

#### 1. Criar o botão de Embedded Signup

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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.

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
curl 'POST /v2/whatsapp/businessAccounts/{wabaId}/smb/bind' \
  -H 'X-API-Key: {{YOUR-API-KEY}}'
```

**Exemplo de resposta**

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "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

<Accordion title="Como verificar se a configuração do Embedded Signup está correta?">
  Se você configurou o **solutionID** corretamente, os clientes verão o nome real do Solution Partner durante a autorização do Facebook.\
  Se eles não virem, a configuração não entrou em vigor.

  Certifique-se de que a **Análise do app** foi concluída.

  <img src="https://mintcdn.com/lchnan/E6i1SuAMcpDKZGUZ/product-assets/43ddcba7a7-image-5.webp?fit=max&auto=format&n=E6i1SuAMcpDKZGUZ&q=85&s=9701655d6e7b3ebc57ff0530c591431c" alt="Captura de tela do produto YCloud" width="534" height="679" data-path="product-assets/43ddcba7a7-image-5.webp" />
</Accordion>

<Accordion title="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.
</Accordion>

<Accordion title="Erro no Embedded Signup: Aplicativo não ativo">
  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](https://developers.facebook.com/apps), abrindo o aplicativo correspondente no Painel.\
  Como alternativa, autorize o usuário atual. Consulte: [Atribuir ativos empresariais a pessoas no seu portfólio empresarial](https://www.facebook.com/business/help/325571851329683?id=2190812977867143).
</Accordion>

<Accordion title="Erro no Embedded Signup: Recurso indisponível">
  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** .
</Accordion>

##


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.