Embedded signup

Use su aplicación de Meta y su solución de socio para incorporar clientes a WhatsApp a través de su software. Complete la incorporación de socios de desarrollo técnico antes de seguir estos pasos. Para la opción de integración TP Lite, consulte Partner Direct Link.

Paso 1: Agregar dominios permitidos

Inicie sesión en el Panel de aplicaciones de Meta Developer y vaya a Facebook Login for Business > Configuración > Configuración de OAuth de cliente:

Establezca los siguientes interruptores en Sí:

Inicio de sesión OAuth de cliente
Inicio de sesión OAuth web
Aplicar HTTPS
Inicio de sesión OAuth en navegador integrado
Usar modo estricto para URIs de redireccionamiento
Iniciar sesión con el SDK de JavaScript

⚠️ Notas:

Embedded Signup depende del SDK de JavaScript.
Cuando los clientes empresariales completan el flujo de Embedded Signup, su ID de WABA, su ID de número de teléfono comercial y un código de token intercambiable se devuelven a la ventana que inició el flujo, pero solo si el dominio de esa página se ha agregado tanto a Dominios permitidos como a URIs de redireccionamiento de OAuth válidos.
Agregue todos los dominios donde planea implementar Embedded Signup (incluidos los dominios de prueba en entornos de desarrollo).
Solo se admiten dominios habilitados para HTTPS.

Una configuración de Facebook Login for Business define qué permisos solicitar y qué información adicional recopilar cuando los clientes empresariales utilizan Embedded Signup. En la consola, vaya a Facebook Login for Business > Configuraciones.

Haga clic en Crear a partir de una plantilla y seleccione WhatsApp Embedded Signup Configuration With 60 Expiration Token para crear una configuración. Esta plantilla genera una configuración con los permisos y niveles de acceso más utilizados.

Una vez completada la configuración, anote el ID de configuración ; se necesitará en el siguiente paso.

Agregue el siguiente código HTML y JavaScript a su sitio web. Este es el código completo necesario para implementar Embedded Signup. Recomendamos crear diferentes flujos de Embedded Signup según su solución o las necesidades de sus clientes:

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

⚠️ Notas:

Reemplace appId, config_id y solutionID con valores reales.
El frontend debe pasar waba_id y phone_number_id a su backend para recuperar la WABA y registrar el número (consulte a continuación).

Más detalles: https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation 2. Vincular la WABA y el número registrado Una vez que el cliente completa el Embedded Signup, su frontend obtendrá el waba_id y el phone_number_id, y los pasará a su backend para las llamadas posteriores a la API. Vincular WABA Llame a la API de vinculación de WABA de YCloud y luego asóciela con la cuenta de cliente correspondiente en su sistema. Ejemplo de solicitud:

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

Ejemplo de respuesta exitosa:

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

Nota: Si el campo de respuesta paymentMethodAttached es true, indica que YCloud ha vinculado correctamente un método de pago a esta WABA. De lo contrario, comuníquese con el equipo de YCloud para resolver el problema. Registrar número de teléfono

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

Ejemplo de respuesta

{
  "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 la WABA y vincularla a YCloud

Una vez que los clientes completan Embedded Signup, su frontend recibirá waba_id. Páselo a su backend para realizar más llamadas a la API. Llame a la API de vinculación de SMB de YCloud. Una vez completado con éxito, asocie la WABA con la cuenta de su cliente en su sistema.

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

Ejemplo de respuesta

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

Preguntas frecuentes

¿En qué casos YCloud puede no adjuntar un método de pago a una WABA?

Esto puede suceder si el usuario selecciona una WABA existente en lugar de crear una nueva.
Es posible que la WABA existente ya tenga un método de pago que no se haya eliminado.

Al abrir la página de Embedded Signup, puede aparecer el siguiente mensaje:App not active
This app is not currently accessible and the app developer is aware of the issue. You will be able to log in when the app is reactivated.Esto sucede cuando la aplicación está en modo Desarrollo , donde solo los usuarios de prueba tienen permisos (consulta Panel de aplicaciones > Roles de la aplicación > Roles / Usuarios de prueba).Solución:
Cambia el modo de la aplicación a En vivo a través de Meta Apps abriendo la aplicación correspondiente en el panel.
Como alternativa, autoriza al usuario actual. Consulta: Asignar activos comerciales a personas en tu portafolio comercial.

Al abrir la página de Embedded Signup, puede aparecer el siguiente mensaje:Feature unavailable
Facebook Login is currently unavailable for this app as we are updating additional details for this app. Please try again later.Solución:
Ve a Panel de aplicaciones > Revisión de la aplicación > Permisos y funciones y solicita el acceso avanzado a public_profile .

Información general

Socios de desarrollo técnico

Socios de soluciones

Socios afiliados

Paso 1: Agregar dominios permitidos

2. Recuperar la WABA y vincularla a YCloud

Preguntas frecuentes

​Paso 1: Agregar dominios permitidos

​Paso 2: Crear un ID de configuración de Facebook Login for Business

​Paso 3: Integrar Embedded Signup en su sitio web

​Embedded Signup: Creación de una cuenta de WhatsApp API

​1. Crear el botón de Embedded Signup

​Embedded Signup: Coexistencia con la aplicación WhatsApp Business

​1. Crear el botón de Embedded Signup

​2. Recuperar la WABA y vincularla a YCloud

​Preguntas frecuentes

​

Paso 1: Agregar dominios permitidos

Paso 2: Crear un ID de configuración de Facebook Login for Business

Paso 3: Integrar Embedded Signup en su sitio web

Embedded Signup: Creación de una cuenta de WhatsApp API

1. Crear el botón de Embedded Signup

Embedded Signup: Coexistencia con la aplicación WhatsApp Business

1. Crear el botón de Embedded Signup

2. Recuperar la WABA y vincularla a YCloud

Preguntas frecuentes