Administrar direcciones de WhatsApp en Conversations
Este producto de Twilio está actualmente disponible como una versión beta. Algunas funciones aún no están implementadas y otras podrían cambiar antes de que se declare que el producto está disponible en general. El uso de esta versión beta está sujeto a los términos pertinentes del acuerdo de licencia aplicable. Los productos en versión beta no están cubiertos por un SLA de Twilio. Obtén más información sobre el soporte de productos en versión beta.
Flex Conversations requiere Flex UI 2.0. Si utilizas Flex UI 1.x, consulta las páginas de chat y mensajería.
Connect your WhatsApp sender number to Flex Conversations by following one of the two approaches outlined below. For numbers already registered with WhatsApp, use the Create a WhatsApp address via Flex Console instructions. For numbers using the WhatsApp sandbox, use the Configuring Whatsapp Sandbox instructions.
Crear una dirección de WhatsApp a través de la consola de Flex
Para crear una dirección de Whatsapp en Conversations, necesitas tener un remitente de WhatsApp registrado en tu cuenta de Twilio. Desafortunadamente, este proceso no es rápido, e incluye registro y verificación por parte de WhatsApp. Para realizar pruebas con WhatsApp Sandbox, consulta el siguiente paso. Para empezar, ve a Messaging (Mensajería) > Senders (Remitentes) > WhatsApp Senders (Remitentes de WhatsApp) en la consola de Twilio. En el resto de las instrucciones, se da por sentado que ya tienes un número WhatsApp registrado en tu cuenta.
Puedes crear direcciones de WhatsApp a través de la consola de Flex > Manage (Administrar) > Messaging (Mensajería):
- Haz clic en + Add new Address (+ Agregar nueva dirección) en la pestaña Conversations Addresses (Direcciones de Conversations).
- Selecciona WhatsApp como el tipo de dirección.
- Si lo deseas, puede ingresar un nombre descriptivo.
- Selecciona tu número de WhatsApp (remitente) en la lista desplegable.
- Configure the integration to Flex – either by using Studio or Webhook. Unless you have removed or reconfigured it, you should be good to use the out-of-box Studio Flow “Messaging Flow”. To learn more about configuring Studio Flows, see Configure pre-agent workflow with Studio.
- Haz clic en Submit (Enviar) para guardar tu nueva dirección de WhatsApp de Flex.
Puedes editar o eliminar las direcciones de WhatsApp en cualquier momento mediante la consola de Flex.
Configuración de WhatsApp Sandbox
Estas instrucciones son para configurar WhatsApp Sandbox, a fin de que funcione con Flex Conversations. Si tienes un número de WhatsApp registrado, consulta las instrucciones anteriores en lugar de esta sección. Los números de WhatsApp registrados se configuran de forma similar a los SMS.
- Puesto que no tenemos soporte de creación automática para WhatsApp Sandbox, necesitaremos interceptar los mensajes entrantes para crear conversaciones. Crea otra función con el siguiente código. Utiliza el mismo flujo de Studio que las instrucciones SMS y se probó en el tiempo de ejecución de los nodos v12 y v14:
- Declara twilio como una dependencia. Esto importa automáticamente los módulos npm relacionados con tu rol.
- Establece STUDIO_FLOW_SID como una variable de entorno utilizando el identificador único (con el prefijo FW) del flujo de Studio recién creado.
- Ten en cuenta que esta función no gestiona correctamente la creación de una conversación cuando el primer mensaje WhatsApp es un archivo adjunto. Esto puede dar lugar a advertencias/errores registrados por el flujo de Studio. Esto no es un problema para las direcciones WhatsApp que no son de sandbox.
- whatsapp.protected.js
/* Handles WhatsApp messages by * 1. Creating a conversation * 2. Adding the participant that sent that message * 3. Adding the message to the conversation * If any of these fail, the conversation is deleted */ exports.handler = async function(context, event, callback) { const isConfigured = context.STUDIO_FLOW_SID; const response = new Twilio.Response(); response.appendHeader('Access-Control-Allow-Origin', '*'); response.appendHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS'); response.appendHeader('Content-Type', 'application/json'); response.appendHeader('Access-Control-Allow-Headers', 'Content-Type'); console.log(`Received Event: ${JSON.stringify(event)}`); if ( !isConfigured) { response.setBody({ status: 500, message: "Studio Flow SID is not configured" }); callback(null, response); return; } const client = context.getTwilioClient(); let conversation; const webhookConfiguration = { 'target': 'studio', 'configuration.flowSid': context.STUDIO_FLOW_SID, 'configuration.replayAfter': 0, 'configuration.filters': ['onMessageAdded'] }; try { conversation = await client.conversations.conversations.create({'xTwilioWebhookEnabled':true,}); console.log(`Created Conversation with sid ${conversation.sid}`); try { console.log(`Adding studio webhook to conversation ${conversation.sid}`); await client.conversations.conversations(conversation.sid) .webhooks .create(webhookConfiguration); } catch(error) { console.log(`Got error when configuring webhook ${error}`); response.setStatusCode(500); return callback(error, response); } } catch( error) { console.log(`Couldnt create conversation ${error}`) return callback(error) } try { const participant = await client.conversations.conversations(conversation.sid) .participants .create({ 'messagingBinding.address': `${event.From}`, 'messagingBinding.proxyAddress': `${event.To}` }); console.log(`Added Participant successfully to conversation`) } catch(error) { console.log(`Failed to add Participant to conversation, ${error}`) console.log(`In case the error is something about "A binding for this participant and proxy address already exists", check if you havent used the Sandbox in any other instance you have. As Whatsapp Sandbox uses the same number across all accounts, could be that the binding of [Your Phone] + [Sandbox WA number] is already created in the other instance.`) try { await client.conversations.conversations(conversation.sid).remove(); console.log("Deleted conversation successfully") } catch (error) { console.log(`Failed to remove conversation, ${error}`) } return callback(null,""); } // Now add the message to the conversation try { const body = event.Body !== '' ? event.Body : 'Empty body, maybe an attachment. Sorry this function doesnt support adding media to the conversation. This should work post private beta'; console.log(`Setting body to ${body}`) const message = await client.conversations.conversations(conversation.sid) .messages .create({ 'author': `${event.From}`, 'body': `${body}`, 'xTwilioWebhookEnabled':true, }); console.log(`Added message successfully to conversation`) } catch(error) { console.log(`Failed to add message to conversation, ${error}`) try { await client.conversations.conversations(conversation.sid).remove(); } catch (error) { console.log(`Failed to remove conversation, ${error}`) } return callback(null, `${error}`); } return callback(null, ""); };
- Establece tu función como protected (protegida), impleméntala y copia la URL de la función. Si estás utilizando la consola de Twilio para agregar tu función, puedes hacer clic en los tres puntos situados junto al nombre de la función y seleccionar “Copy URL” (Copiar URL).
- Ve a WhatsApp Sandbox Settings (Ajustes de WhatsApp Sandbox) y registra el número que estás utilizando para la prueba. En la sección Sandbox Configuration (Configuración de sandbox), pega la URL de la función en el campo “WHEN A MESSAGE COMES IN” (CUANDO LLEGUE UN MENSAJE).
- Si no has registrado tu número de WhatsApp en el sandbox, hazlo ahora siguiendo las instrucciones de la sección WhatsApp Participants (Participantes de WhatsApp). Por ejemplo, en el siguiente caso, enviarías “join cloud-forgot” al número +1 415 523 8886 desde tu WhatsApp.
- Ten en cuenta que este registro es válido durante tres días y tendrás que volver a registrarte después de ese período.
- Guarda la configuración.
- Ahora puede probar la integración de WhatsApp enviando un mensaje desde WhatsApp a tu número de teléfono de Sandbox.
- Si todo se configuró correctamente, debería mostrarse como una tarea de WhatsApp entrante en la aplicación de Flex. Sigue los pasos 1 y 2 de “Enviar tu primer SMS” para aceptar la tarea entrante y probar WhatsApp en Flex.
¿Necesitas ayuda?
Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.