Click-to-Call

Click-to-Call permite que sus contactosCerrado La persona que interactúa con un agente, IVR o bot en su centro de contacto. llamen a un agente en vivo con un solo clic. Desde un botón en su sitio web, los visitantes pueden iniciar una llamada directa a un agente. Esto puede ayudar a reducir o eliminar:

  • Pasos adicionales para conectar con un equipo de Ventas o Soporte.

  • Gastos generales, como las tarifas de los números de servicio y los recargos de servicio móvil.

Click-to-Call funciona a través de un kit de desarrollo de software (SDK) escrito en JavaScript. Para configurarlo, debe trabajar con un desarrollador para implementar el SDK en su sitio web. También debe trabajar con un Representante de cuenta que pueda proporcionar credenciales específicas.

Click-to-Call es admitido en los navegadores de escritorio.

Click-to-Call Detalles de SDK

El SDK consta de un único archivo clicktocall.js. Esto debe incluirse o referenciarse en cada página web donde desee que se muestre el botón Click-to-Call. También debe implementar sus propios componentes de UI, como los botones Click-to-Call y los controles de llamada. El botón Click-to-Call debe invocar la función makeCall en el SDK, que inicia una llamada WebRTC. Si CXone Mpower autentica la solicitud de llamada, se realiza la llamada.

Requisitos previos para integración

Para preparar a sus desarrolladores para la integración Click-to-Call en su sitio, debe realizar lo siguiente:

  • Obtener un ID de Cliente desde su Representante de cuenta.

  • Trabajar con su Representante de cuenta para indicar números de teléfono específicos para Click-to-Call.

  • Implementar un POST API en su propio servidor. Esta API debe generar un token JWT para autenticación. Esto valida que sean legítimas las solicitudes de llamadas entrantes.

    La autenticación Click-to-Call utiliza un JWT. Debe generar un par de claves asimétricas RSA con un tamaño de 2048 bits en el formato PKCS#1. La primera es una clave privada que usted utiliza para generar su JWT, o JWT1. La segunda es una clave pública, que debe proporcionar a NICENICE. Al iniciar una llamada telefónica, debe incluir el JWT1 en la solicitud. CXone Mpower valida el JWT1 en la solicitud entrante con la clave pública que usted indicó.

    Debe generar el JWT1 con una API POST. Debe implementar esta API en su propio servidor. El SDK espera que esta API acepte el punto de contactoCerrado El punto de entrada que utiliza un contacto entrante para iniciar una interacción, como un número de teléfono o una dirección de correo electrónico. (dirección de contacto) y el ClientID en el cuerpo de la solicitud. Debería devolver el token JWT con ContactAddress y ClientId como afirmaciones.

    Puede encontrar snippets de código de ejemplo en el directorio IntegrationHelpers/Templates del paquete SDK. Estos están escritos en .NET y Java. Ejemplifican cómo generar las claves asimétricas para la autenticación y también la API POST que necesita implementar.

    Ejemplo de punto de referencia de la API:

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

    Ejemplo de URL de punto de referencia de la API del token JWT1:

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

  • Ingrese la clave pública a su Representante de cuenta para su autenticación.

  • Considere su diseño de UI. Debe desarrollar su propia interfaz de usuario para el lado de contacto de la llamada, incluidos botones para los controles de llamada como silenciar o finalizar la llamada. El SDK incluye componentes React y Angular de muestra que sus desarrolladores pueden usar como referencia e inspiración. El lado del agente de la llamada se maneja en su La aplicación del agente, por lo tanto, solo es necesario el desarrollo de UI para el lado del contacto.

CXone Mpower Configuración

Además de agregar la funcionalidad Click-to-Call a su sitio web, también debe asegurarse de que estén configurados sus componentes de enrutamiento en CXone Mpower. Su administrador de CXone Mpower puede configurar los componentes necesarios.

Asegúrese de:

  • Crear una habilidad ACD de voz entrante con los agentes necesarios asignados a ella.

  • Configurar los Puntos de contacto (POC) en las llamadas de voz. Estos deben ser POC telefónicos por cada número de teléfono Click-to-Call. El desarrollador que implemente Click-to-Call en su sitio debe usar esto para contactAddress en el archivo JavaScript.

  • Un script Studio para enrutar las llamadas a un agente.

Dependiendo de su configuración de CXone Mpower, quizá pueda usar componentes de enrutamiento existentes o que necesite crear y configurar nuevos.

Integración de SDK

Asegúrese de haber concluido o preparado los elementos necesarios en la sección de requisitos previos.

  1. Incorpore el archivo clicktocall.js en su página web según considere conveniente.

  2. En el archivo clicktocall.js, configure la URL del punto de referencia de la API de su API POST.

    let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';

  3. Actualice la variable getJWT2TokenURL con el siguiente punto de referencia de la API. CXone Mpower utiliza esto para validar su JWT:

    let getJWT2TokenURL = 'https://api-na1.niceincontact.com/ClickToCall/GetJWT2Token';

  4. Agregue los siguientes componentes de UI a su sitio web. Asegúrese de darle a cada componente un identificador único. El paquete SDK incluye componentes de UI de muestra en React y Angular. Puedes encontrarlos en el directorio IntegrationHelpers/UIComponents.

    • Botón para iniciar la llamada de voz.

    • Botón para colgar o desconectar la llamada.

    • Botón para silenciar y reactivar el audio de la llamada.

    • Botón para mostrar un teclado para entradas DTMF.

    • Un <div> para mostrar las teclas del teclado.

    • Etiqueta para mostrar mensajes de éxito o error de llamada.

    • Una etiqueta <audio> para reproducir ciertos sonidos, como tonos de marcado o sonidos de conexión de llamada.

  5. Actualice el archivo clicktocall.js con referencias a los componentes de UI que agregó en el paso 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>';

  6. Agregar el método makeCall(contactAddress) al botón Click-to-Call.

  7. Para enviar tonos DTMF, llame a la función guiSendDTMF(digit) cuando se haga clic en un botón DTMF.

  8. Defina sus preferencias en la sección de configuraciones del archivo clicktocall.js. Esta es una sección con varias variables de configuración que controlan ciertos tipos de comportamiento.

    • Defina el número de reintentos con retryCount. Si se desconecta una llamada, este es el número de veces que el sistema intenta reconectar la llamada. El valor predeterminado es 3.

    • Ponga el valor de POCREnvironmentXHeaderValue en PROD.

    • Defina los ajustes de configuración para el servidor telefónico en phoneServerConfig y 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

  9. Si desea personalizar las notificaciones del lado del contacto relacionadas con las llamadas fallidas o desconectadas, cambie las cadenas de texto en las siguientes variables en clicktocall.js.

    • callFailedToConnectErrorMessage

    • uiErrorMessage

    • contactSupportTeamMessage

  10. Asegúrese de realizar pruebas suficientes para asegurarse de poder iniciar y enrutar las llamadas correctamente.