Configurar Interfaz de Chat del cliente

Crear un perfil de chat

Puede crear varios perfiles de chat para una experiencia extra personalizada, sin embargo, solo necesita crear uno para configurar el interfaz de chat de cliente. Decide si quieres usar un perfil de chat V1 o V2, luego siga la tarea correspondiente a continuación.

Crear perfil de chat V1

Permisos requeridos: Perfiles de chat Crear

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Ir aConfiguración de contacto >Perfiles de chat.
3. Busque el perfil de chat que desea modificar y haga clic en él para abrirlo.
4. Haga clic en Editar.
5. Introducir el Nombre de perfil.
6. Para la Interfaz, seleccione V1 ASPX desde el menú desplegable. Una vez que haya guardado un perfil, ya no podrá editar este campo.
7. Configure el Esquema de colores.
   Obtenga más información sobre los esquemas de color.

   Campo	Detalles
   Esquema de colores	El esquema de color del sistema en uso. Puede utilizar una de las siguientes plantillas como está, o modificarlo para satisfacer las necesidades de su empresa. Defecto - Gris con azul y blanco. Esquema de color 1 - Azul con blanco. Esquema de color 2 - Naranja con amarillo y blanco. Esquema de colores 3- Rojo con gris y blanco.

8. Configure los ajustes de estilo para la ventana de chat, usando el área Avance para ver sus actualizaciones.
   Obtenga más información sobre la imagen del logotipo

   Campo	Detalles
   Logotipo	No puede agregar un logotipo a un perfil de chat existente. Si crea un perfil chat sin un logotipo y más tarde decide que desea incluir un logotipo en la interfaz de chat del cliente, debe crear un nuevo perfil de chat y asignarla al punto de contacto adecuado.

9. Configure los ajustes para los cuadros de diálogo de chat, utilizando el área Avance 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 suelen estar controlados por las Studio acciones como Quemsg y aparecen en la interfaz de chat sin contenedor.
10. Configure los ajustes para los indicadores y mensajes de estado del chat, usando el área Avance para ver sus actualizaciones.
11. Haga clic en Aceptar.

Crear un perfil de chat V2

Permisos requeridos: Perfiles de chat Crear

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Ir aConfiguración de contacto >Perfiles de chat.
3. Para crear un perfil, haga clic enCrear nuevo.
4. Introduzca un nombre de perfil.
5. Para la 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.
   Ver imagen

   
7. Si lo desea, habilite y configure un formulario previo al chat.
   Ver imagen

   
   1. Selecciona la caja Habilitar formulario de pre-chat.
   2. Modificar el Mensaje de bienvenida según sea necesario.
   3. Configure los campos según sea necesario seleccionando Agregue campo.

   Los contenidos enviados mediante este formulario se pasan a la acción Begin de su script de enrutamiento como parámetros que comienzan con la entrada P0.

8. Si lo desea, habilite y configure la ventana Cola de espera.
   Ver imagen

   
   1. Seleccione la caja Habilitar cola de espera.
   2. Entrar a Mensaje en espera. Si el Studio script asociado con este perfil utiliza la acción Quemsg para que los clientes sepan su lugar en la cola, ese mensaje se alterna con el mensaje que 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 de verificación Logo y luego realice una de las siguientes acciones:

      • Si ya has subido el logo a CXone para otro propósito, seleccione Seleccionar existente. Haga clic en Examinar y localice la imagen en la ventana de selección de archivo . Haga clic en la imagen para seleccionarla. Haga clic en OK.
      • Si desea cargar un nuevo logotipo, seleccione Cargar nuevo. Haga clic en Seleccionar archivo y busque la imagen que desea cargar. Haga clic en la imagen para seleccionarla. Haga clic en Abrir.

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

      • Si ya has subido la imagen a CXone para otro propósito, seleccione Seleccionar existente. Haga clic en Examinar y localice la imagen en la ventana de selección de archivo . Haga clic en la imagen para seleccionarla. Haga clic en OK.
      • Si desea cargar una nueva imagen, seleccione Subir nuevo. Haga clic en Seleccionar archivo y busque la imagen que desea cargar. Haga clic en la imagen para seleccionarla. Haga clic en Abrir.

   Debe dimensionar su logotipo o imagen antes de subirlo a 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 tipos de archivo SVG o PNG.

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

Agregar punto de contactos a un perfil de chat

Permisos requeridos: Perfiles de chat Editar

1. Haga clic en el selector de aplicaciones y seleccioneACD.
2. Ir aConfiguración de contacto >Perfiles de chat.
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 el Agregar puntos de contacto de la tabla, seleccione las casillas de verificación correspondientes a los puntos de contacto al 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 activa, haga clic en Agregar todas.

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 de 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 <body> sección 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 <script type ="text/javascript"> línea:

      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. Añade el .badge2 clasifique al CSS de su sitio web y diseñe los efectos de la insignia en el botón de chat en vivo personalizado como lo desee.

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

      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 serie de cadenas que pasan a Studio script 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 </script>etiqueta. El enlace 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. Selecciona eltop yleft configuración a la cantidad de píxeles de la parte superior e izquierda de la ventana del navegador que desea que la esquina superior izquierda de la ventana de chat se coloque en su sitio web.
   3. Selecciona elheight ywidth ajustes a 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 arriba de la </script> etiqueta.

      icPatronChat.setDimension(dimensions);

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

Agrega una Interfaz de chat de cliente Ventana emergente 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. Ir aConfiguración de contacto >Perfiles de chat.
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 la URL son una serie de cadenas que pasan a Studio script en tiempo de ejecución. Puede incluir hasta 10.