Como implementar o Clique para ligar
Embora o Flex ofereça seu próprio teclado de discagem para permitir que você insira números de tons de toque e faça chamadas do Flex, talvez você queira que os usuários possam clicar em um número de telefone em um sistema fora do Flex que inicie uma chamada telefônica usando o Flex.
Você pode implementar essa função usando os recursos de discagem ativa nativa do Flex. Continue a leitura para saber como implementar a função Clicar para ligar.
A ação de chamada outbound
A ação StartOutboundCall
permite que você defina sua própria lógica para acionar chamadas outbound e será fundamental para implementar a funcionalidade de clicar para ligar. StartOutboundCall
requer um número de telefone de destino (afinal de contas, precisamos ligar para alguém), mas também inclui parâmetros adicionais para definir detalhes como atributos personalizados de tarefa e o ID do autor da chamada que deve fazer a chamada. Saiba mais sobre a estrutura de ação e StartOutboundCall aqui.
Fazer uma chamada a partir de um CRM incorporado no Flex
Você incorporou seu CRM desenvolvendo um componente React. Você quer que os agentes possam clicar em um número de telefone no Plugin do CRM para iniciar uma chamada outbound no Flex.
A ação de chamada outbound
Em seu código do plugin Flex, você pode escrever uma função como esta:
function clickToDial(destinationNumber) {
Flex.Actions.invokeAction("StartOutboundCall", {
destination: destinationNumber
});
}
O destinationNumber
pode ser um número de telefone E.164 ou um URI SIP neste formato: sip:<sip_uri>
. Depois de definir como deseja chamar StartOutboundCall
, você pode definir essa função como o atributo onClick
para qualquer número, botão ou outro elemento clicável em sua IU. Por exemplo, em seu código de plugin, você pode ter um componente CustomerNumber
que usa a função clicar para ligar:
<CustomerNumber
number={props.customerNumber}
onClick={(e) => clickToDial(props.customerNumber, e)}
/>
Quando um agente clica no componente renderizado CustomerNumber
, o clickToDial
é acionado com o número do cliente, e o Flex invoca a ação StartOutboundCall
e inicia a chamada para você.
Personalizar a ação de chamada outbound
Também podemos usar a Estrutura de ações para estender o StartOutboundCall
. Por exemplo, podemos usar um ID do autor da chamada específico (do número) dependendo do agente que está fazendo a chamada. Ao usar replaceAction
, podemos modificar isso para nosso botão personalizado de clicar para ligar, bem como para o botão de chamada do componente Flex Dialpad:
async init(flex, manager) {
flex.Actions.replaceAction("StartOutboundCall", (payload, original) => {
var newPayload = payload;
newPayload.callerId = manager.workerClient.attributes.phone_number;
original(newPayload);
});
}
Agora que substituímos StartOutboundCall
, todas as chamadas serão feitas com o ID do autor da chamada especificado pelo atributo phone_number
no funcionário do TaskRouter do agente.
Fazer uma chamada quando o Flex está incorporado ao seu CRM
Nesse caso, você incorporou o Flex em seu CRM. Os agentes devem ser capazes de clicar em um número de telefone no CRM para iniciar o Flex e fazer uma chamada.
A função postMessage()
Por padrão, a maioria dos navegadores pode usar a função Window.postMessage()
para se comunicar entre elementos iframe. Você pode utilizar o postMessage()
para ajudar o Flex a entender que algo foi clicado em seu CRM e estabelecer uma chamada outbound. O fluxo pode ser semelhante a este:
1. Um agente clica em um elemento da IU para iniciar uma chamada.
2. Este evento de clique aciona uma chamada postMessage()
que se comunica com o Flex através de um iframe:
// Armazenar o elemento iframe do Flex em uma variável
const flexIframe = document.getElementById('flex').contentWindow;
function sendMessage(e) {
// Impedir qualquer comportamento do navegador padrão.
e.preventDefault();
// Enviar uma mensagem para o iframe com o número de telefone
flexIframe.postMessage(document.getElementById('phoneNumber').value, *);
}
Observe que este exemplo de código usa *
(um curinga) como o targetOrigin
, o que significa que qualquer site mal‐intencionado pode ler o conteúdo de sua mensagem. Sempre use um URL específico na produção para manter seus dados seguros!
3. O Flex recebe a mensagem com o payload da mensagem associada:
// Flex em um iFrame
if (window.self !== window.top) {
// Definir uma função para o que fazer quando uma mensagem de postMessage() chegar
function receiveMessage(event) {
// Invocar a ação de chamada outbound do Flex
flex.Actions.invokeAction("StartOutboundCall", {destination: event.data});
}
// Adicionar um ouvinte de evento para associar os dados de postMessage() à lógica receiveMessage
window.addEventListener("message", receiveMessage, false);
}
4. O Flex inicia a chamada outbound.
Integrações comuns
Algumas ferramentas de CRM oferecem suas próprias APIs para habilitar o recurso de clicar para ligar e simplesmente precisam ser integradas ao Flex. Por exemplo, a API OpenCTI do Salesforce, por exemplo, oferece uma série de funções para ativar a discagem externa.
Software | Plataforma Clicar para ligar |
Salesforce | OpenCTI |
Zendesk | ZAF |
Esta lista continuará a ser atualizada à medida que aprendermos sobre as plataformas de clicar para ligar de outros softwares.
Próximas etapas
Agora que você tem algumas ideias sobre como implementar o recurso de clicar para ligar, talvez esteja curioso sobre os detalhes da criação com o Flex. Por que não...
- Começar a criar um plugin clique para ligar.
- Saiba mais sobre o discador de saída.
- Saiba mais sobre outras ações disponíveis na Estrutura de ações.
Precisa de ajuda?
Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.