Configurar la interfaz de chat del Cliente

Crear un Perfil Chat

Puede crear múltiples perfiles de charla para una experiencia aún más personalizada; sin embargo, solo necesita crear uno para configurar la interfaz de charla del cliente. Decida si desea usar un perfil de charla V1 o V2 y, a continuación, siga la tarea correspondiente que se indica a continuación.

Crear Perfil de chat V1

Permisos requeridos: Perfiles de charla Crear

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Vaya a Configuración del contacto > Perfiles de charla.
3. Busque el perfil de chat que desea modificar y haga clic en él para abrirlo.
4. Hacer clicEditar.
5. Introducir el Nombre de perfil.
6. Para Intefaz, seleccione V1 ASPX de la lista desplegable. Una vez que haya guardado un perfil, ya no podrá editar este campo.
7. Configure the Color Scheme.
   Learn more about the color schemes

   Field	Details
   Color Scheme	The system color scheme in use. You can use one of the following templates as is, or modify it to meet your company's needs. Default: Gray with blue and white. Color Scheme 1: Blue with white. Color Scheme 2: Orange with yellow and white. Color Scheme 3: Red with gray and white.

8. Configure la configuración de estilo de la ventana de chat; use el área de Preview para ver sus actualizaciones.
   Obtenga más información sobre la imagen del logotipo

   Campo	Detalles
   Imagen del Logotipo	No puede agregar un logotipo a un perfil de chat existente. Si crea un perfil de chat sin logotipo y, posteriormente, decide incluir un logotipo en la interfaz de chat del cliente, debe crear un nuevo perfil de chat y asignarlo al punto de contacto correspondiente.

9. Configure la configuración de los diálogos de chat utilizando el área de Vista previa para ver sus actualizaciones. Puede cambiar el color de fondo y el color de fuente para los cuadros de diálogo de agente y contacto, pero solo el color de fuente para los mensajes del sistema. Los mensajes del Sistema generalmente son generados por acciones de Studio, como Quemsg y aparecer en la interfaz de chat sin contenedor.
10. Configure la configuración de los indicadores de estado y los mensajes del chat, usando el área Vista previa para ver sus actualizaciones.
11. Haga clic en Terminado.

Crear un Perfil de chat V2

Permisos requeridos: Crear Perfiles de charla

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Vaya a Configuración del contacto > Perfiles de charla.
3. Para crear un perfil, haga clic en Crear nuevo.
4. Introduzca un Nombre de perfil.
5. Para Interfaz, seleccione V2 (HTML5). Una vez que haya guardado un perfil, ya no podrá editar este campo.
6. Configure los campos de Apariencia según sea necesario, utilizando el Avance para ver sus actualizaciones.
7. If you want to, enable and configure a pre-chat form.
   1. Seleccione la casilla Habilitar formulario de pre-chat.
   2. Modificar el Mensaje de bienvenida según sea necesario.
   3. Configure los campos según sea necesario seleccionando Agregar campo.

   El contenido enviado mediante este formulario se pasa a la acción comenzar de su script de enrutamiento como parámetros que comienzan con la entrada P0.

8. If you want to, enable and configure the Waiting Queue window.
   1. Seleccione la casilla Habilitar Cola Esperando.
   2. Ingrese un Mensaje Esperando. Si el script Studio asociado con este perfil utiliza la acción Quemsg para informar a los clientes su posición en la cola, ese mensaje se alterna con el mensaje que usted configura aquí.
   3. Si lo desea, cambie el color del fondo y el tono del texto.

   4. Si lo desea, agregue un logotipo seleccionando la casilla Logotipo y luego realice una de las siguientes acciones:

      • If you already uploaded the logo to NiCE CXone for another purpose, select Select Existing. Click Browse and locate the image in the Select File window. Click the image to select it. Click OK.
      • If you want to upload a new logo, select Upload New. Click Choose File and locate the image you want to upload. Click the image to select it. Click Open.

   5. Si lo desea, agregue una imagen más grande seleccionando la casilla imagen del héroe y luego realice una de las siguientes acciones:

      • If you already uploaded the image to NiCE CXone for another purpose, select Select Existing. Click Browse and locate the image in the Select File window. Click the image to select it. Click OK.
      • If you want to upload a new image, select Upload New. Click Choose File and locate the image you want to upload. Click the image to select it. Click Open.

   Debe dimensionar su logotipo o imagen antes de subirlo a NiCE CXoneDe lo contrario, el logotipo o la imagen del héroe se estira para ajustarse al tamaño máximo especificado. Los Logotipos y las imágenes deben ser de tipo de archivo SVG o PNG.

9. Si está creando un perfil, haga clic en Guardar.

Agregar puntos de contacto a un Perfil de chat

Permisos requeridos: Editar Perfiles de charla

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Vaya a Configuración del contacto > Perfiles de charla.
3. Busque el perfil de chat que desea asignar a los puntos de contacto y haga clic para abrirlo.
4. Haga clic en la ficha puntos de contacto .
5. En la tabla Agregar puntos de contacto, seleccione las casillas de verificación correspondientes a los puntos de contacto a los que desea asignar el perfil de chat. Si desea asignar este perfil a todos los puntos de contacto, omita este paso.
6. Haga clic en Agregar puntos de contacto. Para asignar el perfil de chat a todos los puntos de contacto de chat activo, haga clic en Agregar todo.

Incrustar y Personalizar Live Chat V2 (HTML5) en una página web

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Vaya a Configuración del contacto > punto de contacto.
3. Seleccione una existente ocrear un nuevo punto de contacto.
4. Copie el código que se encuentra en la parte inferior de la página.
5. Pegue el texto copiado al final de la sección <body> de su página web.

6. Si desea reemplazar el icono de chat en vivo predeterminado que aparece en su sitio web, agregue lo siguiente al script que pegó en su sitio web:

   Ver el icono de chat en vivo predeterminado

   

   1. Agregue lo siguiente al script, justo debajo de la línea <script type ="text/javascript">:

      function showBadge( i) { 
       var divBadge = document.getElementById("divBadge");
      	if(i>0) {
      		divBadge.innerHTML=i;
      		divBadge.style.display="block";
      		divBadge.classList.add('badge2');
      	}
      	else if(i==0 && divBadge) { divBadge.style.display="none";}	
      }

   2. Agregue la clase .badge2 al CSS de su sitio web y aplique estilo a los efectos de la insignia en el botón personalizado de chat en vivo como desee.

   3. Agregue el siguiente código resaltado al bloque de código icPatronChat.init:

      icPatronChat.init(
        {
          serverHost:'http://home-b2.incontact.com',
          bus_no:50,
          poc:'c7744b03-fe43-437f-a464-aec52e56f683',
          params:['FirstName','Last Name','first.last@company.com',555-555-5555],
      	customChatButton: true
        }, 
        showBadge);
      

      params es una matriz de cadenas que se pasan al script Studio en tiempo de ejecución. Puede enviar un máximo de 10 parámetros de consulta personalizados, incluidos los campos de formulario previos al chat.

   4. Agregue el botón personalizado con HTML, justo después de la etiqueta </script>. El vínculo debe incluir onclick="icPatronChat.setStateWindowToggle()". Vea el siguiente ejemplo:

      <a class="button2" onclick="icPatronChat.setStateWindowToggle()">
      	<span>Live Chat</span><div id="divBadge" class="badge2"></div>
      </a>

   5. Guarde la página web y pruébela. Haga los cambios necesarios.

7. Si desea personalizar el tamaño y la posición de la ventana de chat en vivo en su sitio web cuando un contacto lo abre, haga lo siguiente al script que pegó en su sitio web:

   Ver el tamaño predeterminado de la ventana del chat en vivo

   

   1. Sobre la línea icPatronChat.init, agregue el siguiente bloque de código:

      var dimensions = {top:20,left:200,height:50,width:600};

   2. Configure los parámetros top y left con el número de píxeles desde la parte superior y el lado izquierdo de la ventana del navegador en los que desea que se posicione la esquina superior izquierda de la ventana de chat en su sitio web.
   3. Configure los parámetros de height y width con la cantidad de píxeles de alto y ancho que desea que tenga la ventana cuando un contacto la abra.

   4. Agregue la siguiente línea justo encima de la etiqueta </script>.

      icPatronChat.setDimension(dimensions);

   5. Guarde la página web y pruébela. Haga los cambios necesarios.

Agregar una ventana emergente de la interfaz de Chat del Cliente a una página web

Estas instrucciones funcionan para los perfiles de chat V1 (ASPX) y V2 (HTML5).

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Vaya a Configuración del contacto > Perfiles de charla.
3. Seleccione una existente ocrear un nuevo punto de contacto.
4. Copie la URL del punto de contacto .

5. Agregue estas líneas de código al final de la sección <body> de su página web. Sustituir el texto resaltado con su URL.

   <script type = "text/javascript">
     var popupPatronChat = function() {
       var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&&bu=50&P1=First Name&P2=Last Name&P3=first.last@company.com&P4=555-555-5555;
      window.open(url, 'icPatronChatWin', 'location=no,height=630,menubar=no,status-no,width=410', true);
     };
   </script>

   Los parámetros después de URL son una matriz de cadenas que se pasan al script de Studio en tiempo de ejecución. Puede incluir hasta 10.