Click-to-Call

O Click-to-Call permite aos seus contatosClosed A pessoa que interage com um agente, RVI ou bot em seu centro de contato. contatar um agente em tempo real utilizando um único clique. A partir de um botão no seu site da Web, os visitantes podem iniciar uma chamada direta a um agente. Isso pode ajudar você a reduzir ou eliminar:

  • Etapas adicionais ao se conectar a uma equipe de vendas ou de suporte.

  • Custos indiretos, como taxas de número de serviço e sobretaxas de celular.

O Click-to-Call funciona por meio de um kit de desenvolvimento de software (SDK) redigido em JavaScript. Para deixá-lo configurado, colabore com um criador para implementar o SDK no seu site da Web. Você também deve trabalhar com um Representante de contas que possa fornecer credenciais específicas.

Principais fatos sobre o Click-to-Call

  • O Click-to-Call é suportado em navegadores de computadores de mesa. No momento, não há suporte para dispositivos móveis.

  • Click-to-Call é atualmente suportado nestas regiões:

    • Canadá

    • Alemanha

    • Japão

    • Reino Unido

    • US

  • As principais informações sobre o SDK do Click-to-Call incluem:

  • O SDK consiste em um único arquivo clicktocall.js. Ele deve ser incluído ou referido em cada página da Web na qual se deseja exibir o botão Click-to-Call. Também é necessário implementar os seus próprios componentes da UI, como o botão Click-to-Call e os controles de chamadas. O botão Click-to-Call deverá chamar a função makeCall no SDK, que inicia uma chamada WebRTC. Caso a solicitação de chamada seja autenticada pelo CXone, a chamada será efetuada.

  • O SDK fornece uma opção para passar dados do usuário, metadados do site e dados de roteamento como parte da solicitação de convite SIP usando cabeçalhos X. Você deve configurar seu script Studio associado ao Click-to-Call ponto de contatoClosed O ponto de entrada que um contato de entrada usa para iniciar uma interação, como um número de telefone ou endereço de e-mail. para obter a tomada e usá-la conforme necessário. Isso pode incluir a exibição de dados do usuário em uma tela pop-up para agentes ou o uso dos dados de roteamento para tomar decisões de roteamento.

    Esta disposição é opcional e você só deve configurá-la se precisar. Se não precisar, você pode configurar a função makeCall() sem passar nenhum dado.

    A coleta e a transmissão de dados são de sua responsabilidade. O SDK fornece apenas o mecanismo para transmitir os dados. Ele não gera, valida ou gerencia os dados.

Pré-requisitos de integração

Para se preparar para integrar Click-to-Call ao seu site, faça o seguinte:

  • Obtenha um ID do cliente do seu NICE Representante de contas.

  • Trabalhe com seu NICE Representante de contas para provisionar números de telefone específicos para Click-to-Call.

  • Implemente uma API POST no seu próprio servidor. Esta API deve gerar um token JWT para autenticação. Isso confirma que as solicitações de chamadas recebidas sejam legítimas.

    A autenticação Click-to-Call utiliza um JWT (token Web de Json). Você deve gerar um par de chaves assimétricas RSA com um tamanho de 2.048 bits no formato PKCS#1. A primeira é uma chave privada que você usa para gerar seu JWT ou JWT1. O JWT deve ser assinado usando o algoritmo RS256. A segunda é uma chave pública, que você deve fornecer a NICE. Ao iniciar uma chamada telefônica, é necessário incluir o JWT1 na solicitação. O CXone valida o JWT1 da solicitação recebida com a chave pública que você tiver fornecido. Certifique-se de que o tempo de expiração do token JWT1 não exceda 20 segundos.

    Gere o JWT1 com uma API POST. É necessário implementar esta API no seu próprio servidor. O SDK espera esta API para poder aceitar o ponto de contatoClosed O ponto de entrada que um contato de entrada usa para iniciar uma interação, como um número de telefone ou endereço de e-mail. (endereço de contato) e o ClientID do corpo da solicitação. Ele deve retornar o token JWT com ContactAddress e ClientId como pedidos.

    O diretório do pacote do SDK IntegrationHelpers/Templates contém exemplos de snippets de código. Eles foram redigidos em .NET e Java. Eles ilustram como gerar as chaves assimétricas para autenticação, além da API POST, cuja implementação é necessária.

    Exemplo de terminal de API:

    POST /generate-jwt1-token
Content-Type: application/json
{
	"ContactAddress": "<CONTACT_ADDRESS>",
	"ClientId": "<CLIENT_ID>"
}
							
	// API response:
"GENERATED_JWT1_TOKEN"

    Exemplo de URL de terminal de API de token JWT1:

    let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>'; //This is where you enter the URL for the POST API you implement.

  • Disponibilize a chave pública ao Representante de contas, para que seja autenticada.

  • Leve em conta a concepção da IU. Você deverá criar a sua própria IU do lado do contato da chamada, inclusive os botões de controle de chamada, como colocação de chamadas no mudo ou encerramento de chamadas. O SDK inclui exemplos de componentes Reagir e Angular que poderão ser usados pelos criadores como referência e inspiração. O lado do agente da chamada é administrado no aplicativo de agente. Portanto, a criação da IU é necessária apenas do lado do contato.

Configuração do CXone

Além de incluir a funcionalidade do Click-to-Call ao seu site da Web, você também deverá garantir que os componentes de roteamento estejam configurados no CXone. O seu administrador CXone poderá configurar os componentes necessários.

Assegure-se de ter:

  • Uma ACD competência de voz de entrada criada com os agentes necessários a ela atribuídos.

  • Pontos de contato configurados para as chamadas de voz. É necessário haver pontos de contato telefônicos em cada Click-to-Call número de telefone. O criador que estiver implementando o Click-to-Call no seu site deverá utilizar isso para contactAddress no arquivo JavaScript.

  • Um script Studio para encaminhar as chamadas a um agente.

Dependendo da configuração do CXone, é possível que você consiga utilizar componentes de encaminhamento existentes ou poderá haver a necessidade de criar e configurar novos componentes.

Integração de SDK

Assegure-se de ter concluído ou preparado os itens necessários da seção prerrequisitos.

  1. Conforme a necessidade, incorpore o arquivo clicktocall.js à sua página da Web.

  2. No arquivo clicktocall.js, defina o URL de terminal de API da API POST.

    let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';

  3. Adicione os seguintes componentes da IU ao seu site da Web. Assegure-se de atribuir a cada componente um identificador exclusivo. O pacote de SDKs inclui exemplos de componentes da IU em Reagir e Angular. É possível encontrá-los no diretório do IntegrationHelpers/UIComponents.

    • Botão para iniciar a chamada de voz.

    • Botão para desligar ou desconectar a chamada.

    • Botão para colocar o áudio da chamada no mudo ou restituir o som.

    • Botão para exibir um teclado de entradas de sinalização multifrequencial de dois tons.

    • Um <div> para exibir as teclas do teclado.

    • Rótulo para exibir o êxito na chamada ou as mensagens de erro.

    • Um tag <audio> que executará determinados sons, como tons de discagem ou de conexão de chamadas, por exemplo.

  4. Atualize o arquivo clicktocall.js com referências aos componentes da IU que tiverem sido adicionados na etapa anterior.

    let clickToCallButtonId = '<YOUR_CLICK_TO_CALL_BUTTON_ID>';
let hangUpButtonId = '<YOUR_HANG_UP_BUTTON_ID>';
let muteAudioButtonId = '<YOUR_MUTE_AUDIO_BUTTON_ID>';
let keypadButtonId = '<YOUR_KEYPAD_BUTTON_ID>';
let dtmfKeyDivId = '<YOUR_DTMF_KEY_DIV_ID>';
let callStatusMessageLabelId = '<YOUR_CALL_STATUS_MESSAGE_LABEL_ID>';
let remoteAudioId = '<YOUR_AUDIO_CONTROL_ID>';

  5. Ajuste as suas preferências na seção de configurações do arquivo clicktocall.js. Esta é uma seção com diversas variáveis de configuração que controlam certos tipos de comportamentos.

    • Ajuste a contagem de tentativas repetidas com retryCount. Caso uma chamada seja desconectada, este é o número de vezes que o sistema tentará reconectá-la. O padrão é 3.

    • Ajuste o POCREnvironmentXHeaderValue valor como sendo PROD.

    • Ajuste as configurações do servidor telefônico em phoneServerConfig e clientId.

      let phoneServerConfig = {
	domain: '<Domain of the SIP server>', //Set value of this configuration to 'cxonevoice.com'
	addresses: [], //Keep this array empty
	iceServers: [], //Keep this array empty
	userName: '<username>', //This configuration is a human-readable string used to identify the sender in a more friendly way. In agent applications like CXone Agent, this might be displayed on the screen during a call. Tthis value should not contain any spaces and should not exceed 20 characters. 
	displayName: '', // This is an optional field and its value can be kept the same as userName 
	password: '' //Keep this field empty
}
let clientID = '<YOUR_CLIENT_ID>'; //Set the value of this configuration as provided by CXone

  6. Caso você queira personalizar as notificações recebidas pelos contatos relacionadas às chamadas com falhas ou desconexão, modifique as sequências de texto das seguintes variáveis em clicktocall.js.

    • callFailedToConnectErrorMessage

    • uiErrorMessage

    • contactSupportTeamMessage 

    let callFailedToConnectErrorMessage = 'Call failed to connect. Service not available!';
let uiErrorMessage = {
'Default': 'Error occurred. Please try again!',
'Terminated': 'Call ended successfully!',
'Canceled': 'Call cancelled. Please try again!',
'Failed': callFailedToConnectErrorMessage,
'login failed': callFailedToConnectErrorMessage,
'disconnected': callFailedToConnectErrorMessage,
'logout': callFailedToConnectErrorMessage,
'SIP Failure Code': callFailedToConnectErrorMessage,
'RTP Timeout':  'RTP Timeout': 'The call ended unexpectedly due to network issues. Please ensure your internet is stable and try placing the call again!',
'Token Claims': 'An error occurred during the call attempt. Please retry!'
						}
let contactSupportTeamMessage = "We're sorry, could not connect the call. Please try again later or contact our support team!";

  7. Configure recursos baseados em local se quiser alocar os recursos mais próximos para lidar com Click-to-Call solicitações. Para fazer isso, faça o seguinte em clicktocall.js:

    1. Use a função getAvailableLocations() para retornar uma lista de locais onde os recursos necessários, como SBCs (Controladores de Borda de Sessão), são implantados. Esses locais ajudam a determinar o melhor recurso para processar Click-to-Call solicitações.

    2. Integre a seleção de local à interface do usuário. Você pode fazer isso de duas maneiras:

      • Controle selecionável pelo usuário: Forneça um elemento selecionável, como um menu suspenso ou botão de opção, que permita que os contatos selecionem o local mais próximo entre as opções fornecidas pela função getAvailableLocations().

      • Mapeamento automático: Se o sistema puder determinar a localização do contato, mapeie-o para um dos locais expostos pela função getAvailableLocations() e passe-o para a função makeCall().

    3. Configure o local padrão. Para fazer isso, defina a variável defaultLocation para o local de onde seus contatos ligam com mais frequência. O local padrão deve ser um dos locais retornados pela função getAvailableLocations().

      // Variable to store default location
let defaultLocation = "US";

  8. Adicione o makeCall(contactAddress, [location], [userData], [routingData]) método ao Click-to-Call botão. Os parâmetros location, userData e routingData são opcionais.

    Os parâmetros userData e routingData passam dados de usuário e roteamento para uso em decisões de roteamento ou para exibição em Agent. Isso é feito como parte da solicitação de convite SIP usando cabeçalhos X. Em seguida, você pode processar os dados no script Studio usado para o ponto de contato.

    • userData: exibe informações relacionadas ao usuário.

    • routingData: exibe os dados usados para decisões de roteamento.

    Esses parâmetros devem ser fornecidos como objetos que contêm pares de chave-valor. O SDK converte os dois objetos em strings usando JSON.stringify() e os transmite como cabeçalhos X na SIP solicitação de convite:

    • X-user-data: contém o objeto userData.

    • X-routing-data: contém o objeto routingData.

    userData e routingData são objetos separados para a conveniência de separar os dados, se necessário. No entanto, você pode passar todos os dados necessários em apenas um dos parâmetros, se preferir. Você também pode transmitir todos os dados em um único cabeçalho X se o script Studio estiver configurado adequadamente.

    Entrega às limitações no tamanho dos dados que podem ser passados em cabeçalhos X, o comprimento de caracteres de cada objeto userData e routingData não deve exceder 1.000 caracteres (1 KB) após a conversão da cadeia de caracteres.

    Consulte os exemplos a seguir para configurá-lo para seu caso de uso específico:

    • Sem passar nenhum parâmetro:

      makeCall(contactAddress);

    • Aprovação apenas location:

      makeCall(contactAddress, "US");

    • Passando location, userData e routingData:

      makeCall(contactAddress, "US", { name: "Elizabeth Bennet", age: 20 }, { skill: "sales" });

    • Passando apenas userData:

      makeCall(contactAddress, undefined, { name: "John Doe", age: 30 }, undefined);

  9. Se você configurou o método makeCall() para usar os objetos userData ou routingData, deverá processar os dados do cabeçalho X no script Studio associado ao Click-to-Call ponto de contatoClosed O ponto de entrada que um contato de entrada usa para iniciar uma interação, como um número de telefone ou endereço de e-mail. usando estas ações:

  10. Para enviar sons de sinalização multifrequencial de dois tons (DTMF), mobilize a função guiSendDTMF(digit) quando se clicar em um botão de DTMF.

  11. Teste sua configuração para garantir que ela possa iniciar e rotear chamadas com êxito.