){kind=small}
Crea una aplicación web para chatear con los usuarios de tu página de Facebook
Tiempo de lectura: 4 minutos
El post se ha actualizado para utilizar JavaScript Client SDK versión 8.3.0 que ahora puede manejar mensajes salientes.
El sitio API de mensajes se está integrando en el Client SDK. Esto proporcionará un método directo donde sus clientes, a través de Facebook Messenger, WhatsApp, Viber, y más, pueden comunicarse con una aplicación que cree.
Al final de esta entrada del blog, tendrás una aplicación web capaz de enviar y recibir mensajes desde tu página de Facebook y el Messenger de tu página. Se proporcionará código de ejemplo y se explicarán las partes relevantes para la integración de Messages API.
Entra en Facebook y crea una página de prueba en Facebook. También puedes probar con una página que ya exista.
Haga su copia de la aplicación web de ejemplo remezclando este Glitch. Para configurar tu aplicación, sigue los pasos del archivo readme. La aplicación de ejemplo sigue el escenario de un agente que accede a un panel de control, con conversaciones en curso entre los clientes de la página de Facebook y el agente. En el lado izquierdo es donde todas las conversaciones están sucediendo, y el agente puede unirse a una.
Sample application's agent dashboard
Cuando el agente haga clic en una conversación, se abrirá en una nueva ventana una aplicación de chat con el usuario de Facebook. La aplicación de chat se basa en la creada en el tutorial Tutorial de creación de una aplicación de chat.
Chat application demo
Todo lo que queda por hacer es conectar tu página de Facebook a la aplicación web para que puedan comunicarse entre sí. Estos son los pasos:
Inicie sesión en el Panel de Vonage
En "Mensajes y envío", haga clic en "Canales sociales".
Vonage Dashboard Messages and Dispatch menu
En la página "Canales sociales", haz clic en Facebook Messenger
Vonage Dashboard Social channels section
Sigue los pasos para conectar tu página de Facebook a tu Account de Vonage
Connect Facebook Page
Selecciona la(s) página(s) de Facebook que deseas conectar a Vonage
Select a Facebook Page
Verify you are using the correct Facebook Account
Continue as user
Revisa los permisos concedidos a Vonage
Ask for permissions
Confirmación de que Vonage se ha podido vincular correctamente
Confirmation of Facebook Page being successfully linked
Selecciona una página de Facebook vinculada a Vonage y completa la configuración
Select your Facebook Business Page
Enhorabuena, tu página de Facebook se ha conectado correctamente
Confirmation that Facebook Business page was successfully connected
Ahora que Vonage conoce tu página de Facebook, vamos a conectarnos a tu aplicación de Vonage que se creó cuando configuraste la muestra con Glitch. Haz clic en "Vincular a una aplicación" o ve a la sección Applications del panel de control.
Your applications
Seleccione la aplicación que creó al configurar la muestra Glitch y, a continuación, haga clic en "Vincular".
Application details
Application details with Facebook page linked
Coloca la aplicación web en una ventana del navegador y abre Facebook Messenger en otra e inicia sesión si es necesario. Si aún no lo has hecho, introduce un nombre en la aplicación web para entrar en el panel de control. Piensa en esto como tu nombre o el nombre de un agente, es sólo una forma sencilla de "iniciar sesión". Ahora, en Messenger, busca la página de Facebook que vinculaste a la aplicación y envía un mensaje. En la ventana con tu aplicación web, debería aparecer una pequeña tarjeta en la sección "Todas las conversaciones". Haz clic en unirse, se abrirá una aplicación de chat y deberías ver el mensaje en el chat. Envía un mensaje desde la aplicación de chat y debería aparecer en tu Facebook Messenger.
Echemos un vistazo al código involucrado para que suceda lo anterior. Cuando un usuario envía un mensaje a tu página de Facebook, Vonage lo envía al webhook de entrada de tu aplicación web. El webhook devuelve un objeto que le permite a Vonage saber cómo manejar el mensaje. En este caso, estamos enviando la información que la integración de Client SDK Messages API necesita para conectar al usuario de Facebook con tu aplicación web para mantener una conversación. Esto incluye el id del usuario de Facebook y el nombre de la conversación (que establecemos como id del usuario de Facebook para que sea único).
// server.js
app.post("/webhooks/inbound", (request, response) => {
// By responding to the inbound message callback with this action you add -
// the message to a conversation so the agent client side will be notified about it
response.status(200).send([
{
action: "message",
// Creating a new conversation for every NEW incoming user.
// Messages from the same user will be tagged to the same conversation
conversation_name: request.body.from,
user: request.body.from,
geo: "region-code",
},
]);
});
Si es la primera vez que el usuario de Facebook envía un mensaje, se crea una nueva conversación. Esto emite un conversation:created evento que escuchamos en el webhook de eventos. El backend de la aplicación web toma este evento y lo reempaqueta como un evento personalizado, custom:new_convque puede utilizarse para notificar al panel de control del agente que muestre la nueva conversación.
// server.js
app.post("/webhooks/rtcevent", (request, response) => {
...
// If Facebook user is new, a new conversation should be created, so listen for it here
// and then send the custom event to the Agents Conversation
if (request.body.type === "conversation:created"){
vonage.conversations.events.create(process.env.AGENTS_CONV_ID, {
"type": "custom:new_conv",
"from": "system",
"body": request.body
},
(error, result) => {
if (error) {
console.error(error);
} else {
console.log(result);
}
});
}
response.status(200).send({code:200, status: 'got rtcevent request'});
});
En el código de la aplicación de chat, hay un receptor de eventos message que se activa cuando se recibe un mensaje del usuario de Facebook. A continuación, toma el mensaje y lo añade a la pantalla de chat.
// public/chat.js
// Adding conversation.id here in the on. means that we're filtering events to only the ones regarding this conversation. (it's called grouping)
conversation.on('message', conversation.id, (from, event) => {
console.log('message-received sender: ', from);
console.log('message-reveived event: ', event);
const formattedMessage = formatMessage(from, event, conversation.me);
// Update UI
messageFeed.innerHTML = messageFeed.innerHTML + formattedMessage;
messagesCountSpan.textContent = messagesCount;
});
Cuando el agente responde al usuario de Facebook, se trata de un mensaje saliente. El Client SDK tiene un método sendMessage con un método "message_type": "text" para enviar el mensaje del agente. Con eso, Vonage se encarga de todo lo necesario para que el mensaje llegue al usuario de Facebook.
// public/chat.js
// Listen for clicks on the submit button and send the existing text value
sendButton.addEventListener('click', async () => {
conversation.sendMessage({
"message_type": "text",
"text": messageTextarea.value
}).then((event) => {
console.log("message was sent", event);
}).catch((error)=>{
console.error("error sending the message ", error);
});
messageTextarea.value = '';
});
Para añadir un poco más de personalización, mostramos el nombre de la página de Facebook en la parte superior del chat. Para ello, se realiza una solicitud al endpoint getChatAppAccounts que realiza una llamada a la API de chatapp-accounts de Vonage con un JWT de administrador. El nombre de la página de Facebook se encuentra en la respuesta, que enviamos de vuelta al cliente.
Si tus mensajes salientes dejan de funcionar de repente, comprueba el registro de tu servidor en busca de errores. Si te encuentras con un error que tiene esto:
status: 'rejected',
error: { reason: 'Expired access Token', code: 1370 }Eso significa que el token de tu página de Facebook ha caducado y deberás actualizarlo. Ingresa al panel de Vonage y ve a Mensajes y envío, luego Canales sociales. Debería haber un botón junto a tu página de Facebook para actualizar tu token.
Ya está. Con Messages API integrado en Client SDK, es mucho más fácil comunicarse con un usuario de Facebook desde tu propia aplicación web.
Consulte nuestra Client SDK documentación. Hay más información sobre los métodos utilizados para crear el Panel de Agente, junto con Tutoriales, Guías y más. ¿Ha tenido algún problema con la aplicación de demostración? ¿Desea añadir nuevas funciones? Si tiene alguna pregunta, comentario o sugerencia, háganoslo saber en nuestro Canal Slack de la Comunidad.