Click-to-Call

Click-to-Call permite que sus contactosClosed The person interacting with an agent, IVR, or bot in your contact center. 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. Asimismo, 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 es compatible en estas regiones:

    • Canadá

    • Alemania

    • Japón

    • Reino Unido

    • NOS

  • Información clave sobre el SDK de 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 NiCE CXone 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 de Studio asociado con el punto de contactoClosed The entry point that an inbound contact uses to initiate an interaction, such as a phone number or email address. de Click-to-Call para obtener los datos y usarlos según sea necesario. Esto podría incluir mostrar datos de usuario en una ventana emergente para 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 la necesita, puede configurar la función makeCall() sin pasar ningún dato.

    Recopilar y transmitir los datos es su responsabilidad. El SDK solo proporciona el mecanismo para transmitir los datos. No genera, valida ni administra los datos.

  • Para actualizaciones del SDK de Click-to-Call:

    • Los cambios, incluidas las mejoras, las funcionalidades nuevas y las actualizaciones de compatibilidad, no se realizan conforme a una programación fija.

    • El SDK se entrega como un único archivo JavaScript. Cuando hay una actualización disponible, NiCE le proporciona la versión más reciente. Luego, debe sustituir el archivo existente en su implementación.

    • El SDK mantiene compatibilidad con versiones anteriores para que las versiones existentes continúen funcionando sin interrupciones. Sin embargo, si ocurre un cambio importante, es posible que deba actualizar a la versión más reciente.

Requisitos previos para la integración

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

  • Obtenga un Id DE cliente de su representante de cuenta.

  • Trabaje con su representante de cuenta para aprovisionar 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. La primera es una clave privada que usted utiliza para generar su JWT (JWT1). El JWT debe estar firmado utilizando el algoritmo RS256. El segundo es una clave pública, que debe proporcionar a NiCE.

    Puede generar el par de claves necesario en formato PEM utilizando estos comandos de OpenSSL:

    # Generate a 2048-bit RSA private key in PEM format
openssl genpkey -algorithm RSA -out private.pem -pkeyopt rsa_keygen_bits:2048
# Extract the corresponding public key in PEM format
openssl rsa -pubout -in private.pem -out public.pem

    Al iniciar una llamada telefónica, debe incluir el JWT1 en la solicitud. NiCE CXone valida el JWT1 en la solicitud entrante con la clave pública que usted proporcionó. Asegúrese de que el tiempo de expiración del token JWT1 no supere 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 The entry point that an inbound contact uses to initiate an interaction, such as a phone number or email address. (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. Proporcionan un ejemplo de referencia para implementar el POST API requerido.

    Ejemplo de terminal 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.

  • Proporcione la clave Pública a su representante de cuenta para la autenticación.

  • Considere el diseño de su interfaz de usuario. 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 gestiona en su aplicación de agente, por lo tanto, el desarrollo de la interfaz de usuario solo es necesario para el lado del contacto.

NiCE CXone 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 NiCE CXone. Su administrador de NiCE CXone puede configurar los componentes necesarios.

Asegúrese de:

  • Una habilidad de voz entrante ACD creada con los agentes necesarios asignados a ella.

  • Puntos de contacto (POC) configurados para 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 de Studio para enrutar las llamadas a un agente.

Según la configuración de su NiCE CXone, es posible que pueda usar componentes de enrutamiento existentes, o que necesite crear y configurar otros nuevos.

Integrar 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 la 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.

    • Establezca la configuración del servidor de teléfono 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 los recursos basados en la ubicación si desea asignar los recursos más cercanos para administrar las solicitudes de Click-to-Call. Para ello, realice lo siguiente en clicktocall.js:

    1. Use 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 las solicitudes de Click-to-Call.

    2. Integre la selección de ubicación en la UI. Puede hacerlo de una de DOs maneras:

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

      • Mapeado automático: Si el sistema puede determinar la ubicación del contacto, mapéela a una de las ubicaciones expuestas por la función getAvailableLocations() y pásela a la función makeCall().

    3. Configure la ubicación predeterminada. Para ello, establezca la variable defaultLocation en la ubicación desde la que sus contactos llaman con mayor 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 transmiten datos de usuario y de enrutamiento para su uso en las decisiones de enrutamiento o para su visualización en Agent Workspace (Agent). Esto se realiza como parte de la solicitud de invitación SIP mediante encabezados X. Luego, puede procesar los datos en el script Studio que se utiliza para el punto de contacto.

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

    • routingData: Muestra los datos utilizados para las decisiones de enrutamiento.

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

    • Contiene el objeto userData.

    • Contiene el objeto routingData.

    userData y routingData SOn objetos separados para que pueda dividir los datos si es necesario. Sin embargo, puede transmitir todos los datos requeridos en uno solo de los parámetros si lo prefiere. También puede transmitir todos los datos dentro de un solo encabezado X si su script Studio está configurado en consecuencia.

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

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

    • Sin pasar ningún parámetro:

      makeCall(contactAddress);

    • Pasando solo location:

      makeCall(contactAddress, "US");

    • Pasando location, userData y routingData:

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

    • Pasando solo 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 punto de contactoClosed The entry point that an inbound contact uses to initiate an interaction, such as a phone number or email address. Click-to-Call mediante estas acciones:

  10. Para enviar tonos DTMFClosed Signaling tones that are generated when a contact presses a key on the telephone keypad., llame a la función guiSendDTMF(digit) cuando se haga clic en un botón de Dtmf.

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