Insertar WhatsApp Connect

Si eres un proveedor de SaaS o de soluciones y quieres que tus clientes conecten sus números de teléfono de WhatsApp a través de tu cuenta de Chakra, puedes hacerlo siguiendo los pasos a continuación

1. Crea un token de conexión

Para insertar el botón de conexión en tu página web o aplicación web, primero tendrás que generar un token de conexión. Ten en cuenta que este token solo es válido durante 1 hora.

Usa la API Create Connect Token para hacerlo. Lo ideal es generarlo en el backend y pasarlo al frontend.

Parámetros necesarios para esta API al usarla con un cliente nuevo, que no tiene un plugin en Chakra:

• newPluginName - [opcional] Nombre del nuevo plugin que se creará para el cliente. Si no se proporciona ningún valor, el plugin se llamará "WhatsApp". Se recomienda incluir en este campo el nombre del cliente u otros identificadores significativos y fáciles de leer. Este será el nombre del plugin en Chakra y podrás buscarlo en la aplicación web de Chakra con este nombre.
• clientReferenceId - [opcional] ID de referencia único para el cliente. Por lo general, será el ID de usuario o el ID único del cliente según tu sistema interno. Esto ayudará a mantener la correlación entre el sistema de Chakra y tu sistema interno.
• clientName - [opcional] Nombre del cliente según tu sistema interno. Por lo general, será el nombre del usuario.
• clientEmail - [opcional] Dirección de correo electrónico del cliente
• clientPhone - [opcional] Número de teléfono del cliente

Parámetros necesarios para esta API al usarla con un cliente existente que ya tiene un plugin en Chakra:

• `pluginId` - este es el pluginId del plugin de WhatsApp donde se almacenan los datos de la WABA conectada. Habrás recibido y guardado este pluginId cuando el cliente completó por primera vez el flujo de registro integrado. No uses un pluginId común para todos los clientes; se recomienda encarecidamente crear un plugin nuevo para cada cliente. Para los clientes nuevos, este parámetro no debe incluirse en los parámetros del cuerpo.

2. Inserta el SDK

Para insertar el SDK, agrega la siguiente etiqueta de script al encabezado de tu página web

<script src="https://embed.chakrahq.com/whatsapp-partner-connect/v1_0_1/sdk.js"></script>

Crea un div contenedor con un ID único en tu página web y luego agrega la siguiente etiqueta de script al final de la página. Es importante agregar esta etiqueta de script después del div contenedor; de lo contrario, la inicialización fallará. A continuación, se muestra un ejemplo:

  <div id="container">  </div>  <script>    const connectToken = "<CONNECT-TOKEN>";    const chakraWhatsappConnect = ChakraWhatsappConnect.init({      connectToken: connectToken,      container: '#container',   // optional, defaults to document.body      onMessage: (event, data) => console.log(event, data),      onReady: () => console.log('ready'),      onError: (err) => console.error(err),	  onSuccess: (data) => console.log('Connection successful, data:', data)    });    // Later, you can destroy the iframe:    // chakraWhatsappConnect.destroy();  </script>  

El argumento data de la función onSuccess tendrá las claves pluginId, whatsappBusinessAccounts y whatsappPhoneNumbers . Se recomienda encarecidamente que guardes el valor de pluginId recibido aquí junto con el registro de tu cliente en tu sistema interno y que, en el futuro, uses este pluginId al generar el connectToken para este cliente. Así, si más adelante el cliente quiere agregar o modificar una WABA o un número de teléfono, se asociará al plugin correcto en Chakra.

3. Comprueba si la integración se realizó correctamente

Si la integración se realizó correctamente, verás un botón "Connect with Facebook", como se muestra en la captura de pantalla a continuación

Conectar un número de teléfono de WhatsApp

Ahora tu cliente puede hacer clic en el botón "Connect with Facebook" y completar el registro integrado. Un flujo exitoso se vería como la demostración a continuación: