){kind=small}
Crie um aplicativo web para conversar com os usuários da sua página do Facebook
Tempo de leitura: 4 minutos
A publicação foi atualizada para usar Client SDK do JavaScript versão 8.3.0 , que agora é capaz de processar mensagens enviadas.
A Messages API está sendo integrada ao Client SDK. Isso proporcionará uma maneira simples de seus clientes, por meio do Facebook Messenger, WhatsApp, Viber e outros, se comunicarem com um aplicativo criado por você.
Ao final deste post, você terá um aplicativo web capaz de enviar e receber mensagens da sua página do Facebook e do Messenger dessa página. Serão fornecidos exemplos de código e explicadas as partes relevantes para a integração com a Messages API.
Faça login no Facebook e crie uma página de teste no Facebook. Você também pode testar com uma página que já exista.
Crie sua própria cópia do aplicativo web de exemplo modificar este Glitch. Para configurar seu aplicativo, siga as etapas descritas no arquivo “readme”. O aplicativo de exemplo segue o cenário de um agente fazendo login em um painel, com conversas atuais entre clientes da página do Facebook e o agente. No lado esquerdo é onde todas as conversas estão ocorrendo, e o agente pode participar de uma delas.
Sample application's agent dashboard
Quando o agente clica em uma conversa, um aplicativo de bate-papo com o usuário do Facebook é aberto em uma nova janela. O aplicativo de bate-papo é baseado naquele criado no tutorial “Criando um aplicativo de chat”.
Chat application demo
Tudo o que falta para concluir a configuração é conectar sua página do Facebook ao aplicativo web para que eles possam se comunicar entre si. Seguem os passos:
Faça login no Painel da Vonage
Na seção “Mensagens e envio”, clique em “Canais sociais”
Vonage Dashboard Messages and Dispatch menu
Na página “Canais sociais”, clique em Facebook Messenger
Vonage Dashboard Social channels section
Siga as etapas para conectar sua página do Facebook à sua conta da Vonage
Connect Facebook Page
Selecione a(s) página(s) do Facebook para conectar ao Vonage
Select a Facebook Page
Verifique se você está usando o Account correto do Facebook
Continue as user
Verifique as permissões concedidas à Vonage
Ask for permissions
Confirmação de que foi possível conectar o Vonage com sucesso
Confirmation of Facebook Page being successfully linked
Selecione uma página do Facebook que tenha sido vinculada ao Vonage e conclua a configuração
Select your Facebook Business Page
Parabéns, sua página do Facebook foi conectada com sucesso
Confirmation that Facebook Business page was successfully connected
Agora que a Vonage já conhece sua página do Facebook, vamos conectar-nos ao seu aplicativo da Vonage, criado quando você configurou o exemplo com o Glitch. Clique em “Vincular a um aplicativo” ou acesse a seção “Applications” do painel de controle.
Your applications
Selecione o aplicativo que você criou ao configurar a amostra do Glitch e, em seguida, clique em “Vincular”.
Application details
Application details with Facebook page linked
Coloque o aplicativo web em uma janela do navegador e abra o Facebook Messenger em outra e faça login, se necessário. Caso ainda não tenha feito isso, digite um nome no aplicativo web para acessar o painel. Pense nisso como seu nome ou o nome de um agente; é apenas uma maneira simples de “fazer login”. Agora, no Messenger, encontre a Página do Facebook que você vinculou ao aplicativo e envie uma mensagem. Na janela com seu aplicativo web, um pequeno cartão deve aparecer na seção “Todas as conversas”. Clique em “Participar”; um aplicativo de bate-papo será aberto e você deverá ver a mensagem no bate-papo. Envie uma mensagem a partir do aplicativo de bate-papo, e ela deverá aparecer no seu Facebook Messenger.
Vamos dar uma olhada no código necessário para que isso aconteça. Quando um usuário envia uma mensagem para sua página do Facebook, ela é encaminhada pela Vonage para o webhook de entrada do seu aplicativo web. O webhook retorna um objeto que informa à Vonage como lidar com a mensagem. Nesse caso, estamos enviando de volta as informações de que a integração da Messages API do Client SDK precisa para conectar o usuário do Facebook ao seu aplicativo web e iniciar uma conversa. Isso inclui o ID do usuário do Facebook e o nome da conversa (que definimos como o ID do usuário do Facebook para que seja ú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",
},
]);
});
Se for a primeira vez que o usuário do Facebook enviar uma mensagem, uma nova conversa é criada. Isso gera um conversation:created evento que monitoramos no webhook de eventos. O backend do aplicativo web recebe esse evento e o reestrutura como um evento personalizado, custom:new_conv, que pode ser usado para notificar o painel do agente a exibir a nova conversa.
// 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'});
});
No código do aplicativo de bate-papo, há um message ouvinte de evento que é acionado quando uma mensagem é recebida do usuário do Facebook. Em seguida, ele pega a mensagem e a adiciona à janela de bate-papo.
// 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;
});
Quando o agente responde ao usuário do Facebook, isso é considerado uma mensagem de saída. O Client SDK possui um sendMessage método com uma "message_type": "text" para enviar a mensagem do agente. Com isso, a Vonage cuida de tudo o que é necessário para que a mensagem chegue ao usuário do 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 dar um toque a mais de personalização, exibimos o nome da página do Facebook na parte superior do chat. Para isso, é feita uma solicitação ao getChatAppAccounts , que, por sua vez, faz uma chamada à API da Vonage chatapp-accounts com um JWT de administrador. O nome da página do Facebook consta na resposta, que enviamos de volta ao cliente.
Se suas mensagens enviadas deixarem de funcionar repentinamente, verifique se há erros no log do servidor. Se você encontrar um erro que contenha o seguinte:
status: 'rejected',
error: { reason: 'Expired access Token', code: 1370 }Isso significa que o token da sua página do Facebook expirou e precisará ser atualizado. Faça login no painel da Vonage e acesse Mensagens e Envio e, em seguida, Canais Sociais. Deve haver um botão ao lado da sua página do Facebook para atualizar seu token.
É isso aí! Com a Messages API integrada ao Client SDK, ficou muito mais fácil se comunicar com um usuário do Facebook a partir do seu próprio aplicativo web.
Por favor, consulte nossa documentação do Client SDK. Lá você encontrará mais informações sobre os métodos usados para criar o Painel do Agente, além de tutoriais, guias e muito mais. Encontrou algum problema com o aplicativo de demonstração? Quer adicionar novas funcionalidades? Se tiver alguma dúvida, comentário e/ou sugestão, entre em contato conosco pelo nosso canal da Comunidade no Slack.