Click-to-Call

Click-to-Call permite que sus contactosClosed 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.

Datos clave sobre Click-to-Call

  • Click-to-Call es admitido en los navegadores de escritorio. Actualmente no es compatible con dispositivos móviles.

  • Click-to-Call actualmente se admite en estas regiones:

    • Canadá

    • Alemania

    • Japón

    • Reino Unido

    • NOS

  • La información clave sobre el SDK Click-to-Call incluye:

  • 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.

  • El SDK proporciona una opción para pasar datos de usuario, metadatos del sitio web y datos de enrutamiento como parte de la solicitud de invitación SIP mediante encabezados X. Debe configurar su script Studio asociado con el Click-to-Call punto de contactoClosed 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. para obtener la toma y utilizarla según sea necesario. Esto podría incluir mostrar datos del usuario en una pantalla emergente para los agentes o usar los datos de enrutamiento para tomar decisiones de enrutamiento.

    Esta disposición es opcional y solo debe configurarla si la necesita. Si no lo necesita, puede configurar la función makeCall() sin pasar ningún dato.

    La recopilación y transmisión de datos es su responsabilidad. El SDK solo proporciona el mecanismo para transmitir los datos. No genera, valida ni gestiona los datos.

Requisitos previos para integración

Para prepararse para integrar Click-to-Call en su sitio, complete lo siguiente:

  • Obtenga un ID de cliente de su NICE Representante de cuenta.

  • Trabaje con su NICE Representante de cuenta para proporcionar 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 utilizas para generar tu JWT o JWT1. El JWT debe firmarse utilizando el algoritmo RS256. La segunda es una clave pública, que debes proporcionar a NICE. 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ó. Asegúrese de que el tiempo de vencimiento del token JWT1 no exceda los 20 segundos.

    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 contactoClosed 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. 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.

  4. 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>';

  5. 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

  6. 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 

    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 basados en la ubicación si desea asignar los recursos más cercanos para manejar Click-to-Call solicitudes. Para ello, haga lo siguiente en clicktocall.js:

    1. Utilice la función getAvailableLocations() para devolver una lista de ubicaciones donde se implementan los recursos necesarios, como los controladores de borde de sesión (SBC). Estas ubicaciones ayudan a determinar el mejor recurso para procesar solicitudes Click-to-Call.

    2. Integrar la selección de ubicación en la interfaz de usuario. Puedes hacer esto de dos maneras:

      • Control seleccionable por el usuario: proporcione un elemento seleccionable, como un menú desplegable o un botón de opción, que permita a los contactos seleccionar su ubicación más cercana entre las opciones proporcionadas por la función getAvailableLocations().

      • Mapeo automático: si el sistema puede determinar la ubicación del contacto, lo asigna a una de las ubicaciones expuestas por la función getAvailableLocations() y lo pasa a la función makeCall().

    3. Configurar la ubicación predeterminada. Para ello, configure la variable defaultLocation en la ubicación desde donde sus contactos llaman con más frecuencia. La ubicación predeterminada debe ser una de las ubicaciones devueltas por la función getAvailableLocations().

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

  8. Agregar el método makeCall(contactAddress, [location], [userData], [routingData]) al botón Click-to-Call. Los parámetros location, userData y routingData son opcionales.

    Los parámetros userData y routingData pasan datos de usuario y de enrutamiento para usar en decisiones de enrutamiento o para mostrar en Agent. Esto se hace como parte de la solicitud de invitación SIP utilizando encabezados X. Luego puede procesar los datos en el script Studio utilizado para el punto de contacto.

    • userData: Muestra información relacionada con el usuario.

    • routingData: Muestra datos utilizados para decisiones de enrutamiento.

    Estos parámetros deben proporcionarse como objetos que contengan pares clave-valor. El SDK convierte ambos objetos en cadenas usando JSON.stringify() y los transmite como encabezados X en la solicitud de invitación SIP:

    • X-user-data: Contiene el objeto userData.

    • X-routing-data: Contiene el objeto routingData.

    userData y routingData son objetos separados para facilitar la separación de los datos si es necesario. Sin embargo, puede pasar todos los datos requeridos en solo uno de los parámetros si lo prefiere. También puede transmitir todos los datos dentro de un único encabezado X si su script Studio está configurado en consecuencia.

    Debido a las limitaciones en el tamaño de los datos que se pueden pasar en los encabezados X, la longitud de caracteres de cada objeto userData y routingData no debe superar los 1000 caracteres (1 KB) después de la conversión de la cadena.

    Consulte los siguientes ejemplos para configurarlo para su caso de uso particular:

    • Sin pasar ningún parámetro:

      makeCall(contactAddress);

    • Pasando sólo location:

      makeCall(contactAddress, "US");

    • Pasando location, userData y routingData:

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

    • Pasando solamente userData:

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

  9. Si configuró el método makeCall() para usar los objetos userData o routingData, debe procesar los datos del encabezado X en el script Studio asociado con el Click-to-Call punto de contactoClosed 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. utilizando estas acciones:

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

  11. Pruebe su configuración para asegurarse de que pueda iniciar y enrutar llamadas correctamente.