> ## 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 WhatsApp Embedded Signup con su aplicación de Meta y su solución de socio.

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](/es/partner-center/technical-development-partners/technical-development-partner-onboarding) antes de seguir estos pasos.

Para la opción de integración TP Lite, consulte [Partner Direct Link](/es/partner-center/technical-development-partners/partner-direct-link-tp-lite).

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

<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 pantalla del producto YCloud" width="1520" height="1069" data-path="product-assets/2db12bf6fa-image.webp" />

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.

***

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

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

<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 pantalla del producto YCloud" width="950" height="490" data-path="product-assets/afc8d47fd5-image-1.webp" />

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.

<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 pantalla del producto YCloud" width="615" height="1186" data-path="product-assets/e35025f36c-image-2.webp" />

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

***

## Paso 3: Integrar Embedded Signup en su sitio web

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:

* [**Creación de una cuenta de WhatsApp API**](https://www.ycloud.com/whatsapp-business-api)
* [**Coexistencia con la aplicación WhatsApp Business**](https://www.ycloud.com/whatsapp-business-app-coexistence)

***

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

#### 1. Crear el botón 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>
```

⚠️ **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](https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation?utm_source=chatgpt.com)

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

```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}}'
```

**Ejemplo de respuesta**

```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: Coexistencia con la aplicación WhatsApp Business

#### 1. Crear el botón 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 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.

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

**Ejemplo de respuesta**

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

## Preguntas frecuentes

<Accordion title="¿Cómo verificar si la configuración de Embedded Signup es correcta?">
  Si ha configurado **solutionID** correctamente, los clientes verán el nombre real del Solution Partner durante la autorización de Facebook.\
  Si no lo ven, la configuración no ha surtido efecto.

  Asegúrese de que la **revisión de la aplicación** se haya completado.

  <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 pantalla del producto YCloud" width="534" height="679" data-path="product-assets/43ddcba7a7-image-5.webp" />
</Accordion>

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

<Accordion title="Error de Embedded Signup: App not active">
  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](https://developers.facebook.com/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](https://www.facebook.com/business/help/325571851329683?id=2190812977867143).
</Accordion>

<Accordion title="Error de Embedded Signup: Feature unavailable">
  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** .
</Accordion>

##


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