# Construye tu experiencia de chat Las herramientas de Zoom facilitan la personalización y el lanzamiento de su experiencia de chat con poco o ningún código. ### Ventana de interacción de chat La ventana de interacción de chat es la forma en que sus usuarios se comunican con su agente virtual o agente humano. Con las herramientas de Zoom, puede crear una ventana de chat que sea fácil de ver e interactuar y que coincida con la marca de su empresa. Para crear o editar su Ventana de interacción de chat, vaya al Administrador web de Zoom. Desde allí, haga clic en **+Añadir Campaña** o abra el borrador de una Campaña existente. Desplácese hasta la **Ventana de interacción de chat** sección para crear o editar su ventana. #### Tamaño de la ventana y experiencia móvil La ventana de interacción de chat de Zoom es responsiva, lo que significa que adapta automáticamente su diseño si su usuario accede a su sitio desde su computadora de escritorio o smartphone. En los dispositivos móviles, la ventana del chat se abre a pantalla completa para maximizar el espacio limitado de pantalla y garantizar una experiencia limpia y legible.

Image of mobile Zoom Virtual Agent window, opened full-screen.

Para los usuarios que acceden a su chat en dispositivos de escritorio, puede Seleccione entre tres opciones de tamaño para la altura de la ventana: * **S:** 540 píxeles * **M:** 650 píxeles, **predeterminado** * **L:** 780 píxeles {% hint style="info" %} **Nota** El ancho siempre está fijo en 420 píxeles para garantizar la legibilidad. {% endhint %}

Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window.

#### Barra de encabezado La **barra de encabezado del chat** es un elemento clave del diseño de su chat. Cuando se diseña cuidadosamente, brinda a los usuarios contexto sobre qué esperar de su experiencia de Soporte y confianza en la conversación. Puede usar el encabezado para compartir información sobre su equipo de Soporte y/o añadir el logotipo o los colores de su marca. Zoom CX ofrece varias opciones de diseño de encabezado entre las que puede Seleccione. **Imagen de encabezado completa** Añadir una imagen de 426 píxeles por 95 píxeles que llene todo el espacio del encabezado, ideal para diseños personalizados.

This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space.

**Tamaño de la imagen del avatar** Añadir una imagen de 40 por 40 píxeles para que aparezca en la barra de encabezado, ya sea sola o junto al texto del encabezado. {% columns %} {% column %}

{% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %} **Solo texto de encabezado** Comparta una breve nota sobre cualquier cosa, como el nombre de su equipo, la disponibilidad o el horario de Soporte. Controle el tamaño del texto del encabezado usando H1, H2, H3 o el tamaño del párrafo del cuerpo.

Image of a chat screen with header text only in the header bar.

Para un diseño optimizado y minimalista, puede optar por **dejarlo vacío**, enfocando a sus usuarios en el chat.

Image of a chat screen with nothing in the header bar.

Puede usar **Seleccione cualquier color para el fondo y los iconos del encabezado**, útil para integrar el diseño de su chat con su sitio web. {% hint style="warning" %} **Atención** Si Cambie el color de fondo, asegúrese de que aún pueda ver los iconos de minimizar y menú. Puede que también necesite Cambie el color del icono. Image of a chat screen with a blue header bar, with no logo or text.

{% endhint %} #### Colores para el globo de chat, el texto, los iconos y más El creador de la ventana de interacción le permite elegir los colores exactos que desea para su chat. Usted Introducir códigos hexadecimales para cada parte de la ventana y revisar la vista previa para ver cómo se ve. Zoom proporciona una plantilla para comenzar. Para que todo siga viéndose bien (y sea fácil de leer), mantenga los colores de su marca y asegúrese de que haya suficiente contraste entre los colores del texto y del fondo.

Image of the template for formatting your engagement window.

#### Pantalla de bienvenida La **Pantalla de bienvenida** en Zoom centro de contacto y Zoom Virtual Agent es una pantalla de introducción opcional que aparece antes de que comience el chat, dándole la oportunidad de saludar a sus Clientes, recopilar información de ellos y adaptar la experiencia a su marca. Está Disponible para la experiencia de chat web. Para Configure, haga clic en el **Chat Engagement** ventana y luego en la **Pantalla de bienvenida** pestaña. *** ### Diseño de la invitación La invitación es lo que iniciará la experiencia de soporte en su sitio web. Lo más común es usar el [**Sticky** tipo de invitación](/technical-library/es/servicios-comercial/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts), que es un icono flotante que aparece en su sitio web. Cuando sus usuarios hacen clic en él, se abrirá la ventana de chat y comenzará su experiencia. Para crear o editar una invitación, vaya al Administrador web de Zoom. Desde allí, haga clic en **+Añadir Campaña** o abra el borrador de una Campaña existente. Desplácese hasta la **invitación** sección para crear una nueva invitación.

Image of a Zoom Support window that says "Hello! How can we help?"

Puede Configure la siguiente Configuración para su **Invitación fija** icono: * **Tamaño del botón:** El tamaño de su icono de invitación de chat debe ser lo suficientemente grande como para notarse y hacerse clic o tocar fácilmente, pero no tan grande que interrumpa la experiencia del usuario o cubra contenido importante. Zoom ofrece tres tamaños de invitación: * **S:** 40 píxeles * **M:** 56 píxeles, **predeterminado** * **L:** 72 píxeles * **Color del botón:** Seleccione un color de botón que tenga un alto contraste con el fondo de su sitio web. Recomendamos seguir [las directrices WCAG 2.1](https://www.w3.org/TR/WCAG21/#contrast-minimum), que es una relación de contraste mínima de 3:1 para componentes de interfaz de usuario (UI), como iconos y botones, frente a su fondo. * **Icono:** Un icono puede ayudar a sus usuarios a hacerse una idea de lo que pueden esperar al tocar el botón. Zoom ofrece algunos diseños predeterminados para Seleccione que indican iniciar un chat. También puede Añadir su propio icono personalizado usando un archivo SVG. Los archivos SVG deben ser menores de 10 MB. * **Radio de las esquinas:** ¿Qué tan redondo o cuadrado quiere que sea el icono de invitación? Eche un vistazo a su sitio web para ver si tiene un patrón sobre cómo se ven los botones, o pregunte a su equipo de marca si tiene alguna preferencia. Usar un radio de las esquinas más bajo, como 8 píxeles, hará que su invitación sea más cuadrada. Un radio de las esquinas más alto, como 28 píxeles, hará que su invitación sea más redonda. * **Añadir texto a su invitación:** Añadir una etiqueta de texto a un botón de invitación lo hace más claro y atractivo. Los usuarios saben al instante cuál es el propósito del botón, así que no hay que adivinar qué significa el icono. Sin embargo, también ocupa más espacio y podría saturar la pantalla, especialmente en dispositivos móviles. Asegúrese de considerar a su audiencia y los dispositivos que usan con más frecuencia. Si añade una fuente, puede Seleccione entre las opciones de fuente predefinidas Arial, Georgia, Tahoma o Verdana; o cargar su propia fuente personalizada usando un archivo TTF. #### **Ubicación de la invitación en la página** La ubicación más popular para un icono de invitación de Soporte es la esquina inferior derecha, con un margen desde la parte inferior y el lateral de 20 píxeles. Por lo general, es fácil de ver sin bloquear contenido importante. Recomendamos revisar su propio sitio tanto en escritorio como en móvil. Si su sitio ya tiene un banner o botón en esta ubicación, esto podría perjudicar la usabilidad de su cliente o incluso interrumpir los flujos de usuario. Si ya tiene un elemento (como un banner de cookies, una barra de navegación u otro widget) en el mismo lugar que el icono de su invitación de chat, considere cambiar la alineación a la izquierda o a la derecha, o ajustar el margen desde la parte inferior o los lados. {% hint style="success" %} **Ejemplo** Si descubre que el botón de invitación de chat está cubriendo un enlace importante en la parte inferior de su página en dispositivos móviles, aumente el margen hasta que el icono de invitación ya no cubra ese elemento. {% endhint %} También puede "Habilitar a los consumidores para arrastrar y mover la invitación" para dar a sus usuarios aún más flexibilidad para mover el icono por la página. #### Pregunta común El icono de invitación de chat está bloqueando o distrayendo a los usuarios en una página concreta en dispositivos móviles. ¿Cuáles son mis opciones? **Respuesta:** Hay varias maneras de lograr esto. * **Opción 1:** Cambie la posición del ícono de la invitación en la página. Puede mover la ubicación de la invitación en la página usando las opciones de desplazamiento y posición. Esto se configura editando la invitación. * **Opción 2:** Mostrar u Ocultar el ícono de chat según la Ubicación de la página. Si desea eliminar por completo la invitación de chat para todas las páginas de Finalización de compra, edite la Ubicación para excluir las páginas de finalización de compra. Por ejemplo, puede excluir todas las páginas que contengan "finalización de compra" en la URL. * **Opción 3:** Configure la segmentación por Dispositivo. Si no desea que el ícono de la invitación aparezca en sitios móviles, desmarque la opción "teléfono móvil" en Segmentación de campaña. Para configurarlo, haga clic en **Campaña**, **Segmentación**. Zoom Campaigns ofrece una [**invitación incrustada**](/technical-library/es/servicios-comercial/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) opción si no quiere usar el icono adhesivo predeterminado para iniciar el chat. Esto le permite convertir cualquier elemento de su sitio web, como un botón en su menú o un enlace en una página, en un activador para abrir la ventana de chat. Para hacerlo, cree el elemento en el HTML de su sitio y use el SDK de Zoom Campaign para conectarlo al chat. Cuando un usuario hace clic en ese elemento, se abre la ventana de chat y comienza la experiencia de la campaña. También puede usar HTML existente en su sitio web para activar la ventana de chat si lo prefiere.

Image of the Create Embedded Invitation screen.

{% hint style="warning" %} **Atención** ¿Quiere tanto un icono de invitación adhesivo como activar la apertura del chat mediante un clic en un botón de su sitio web? Cree una campaña usando la opción de invitación adhesiva, luego use [el SDK de Campañas de Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) para activar la apertura del chat. {% endhint %} *** ### Mensajería proactiva ¿Qué pasa si quiere una forma más activo de captar la atención de su usuario para que chatee con su equipo o agente virtual? La Características de Mensajería proactiva de Zoom le permite Configure a las empresas para iniciar conversaciones con los visitantes, en lugar de esperar a que el cliente inicie el chat haciendo clic en la invitación. #### Cómo ayuda * **Mayor participación:** Puedes captar la atención de las personas y ofrecer ayuda en el momento adecuado. * **Más clientes potenciales:** Los mensajes personalizados y los botones pueden animar a las personas a obtener Más información chateando con un agente o a compartir su información para una llamada de seguimiento. * **Soporte más rápido:** Conecta rápidamente a los visitantes con un bot o un agente en vivo, para que obtengan respuestas sin demora. Cuando un usuario llega a una página donde la mensajería proactiva está habilitada, recibirá un mensaje y podrá hacer clic en los botones para iniciar un flujo específico. #### Dónde configurarlo Esta Características se configura en **Campañas**, y está disponible para campañas de chat en páginas web que usan la **Sticky** tipo de invitación. #### Dirija a sus usuarios Puede configurar su mensaje proactivo para que tenga un retraso, de modo que solo aparezca para usuarios que hayan estado en esa página durante una cantidad específica de tiempo. También puede seleccionar si desea que el usuario vea el mensaje solo una vez en un período de 24 horas, o si desea que el mensaje proactivo vuelva a aparecer si el usuario actualiza la página o visita otra página coincidente.

Image of a Zoom Campaign window that asks "How can I help".

#### Pregunta común Quiero tener un icono de invitación para que mis usuarios puedan iniciar un chat en cualquier momento, pero también quiero enviar a mis clientes un mensaje proactivo en una página específica (por ejemplo, la página de precios de mi empresa). ¿Cómo configuro esto? **Respuesta** Querrá crear dos Campañas: una para su invitación estándar en todo su sitio web ("Campaña A"), y otra Campaña ("Campaña B") para la página donde desea tener un mensaje proactivo. Para cada Campaña, deberá definir las Ubicaciones de la Campaña para que no se superpongan. {% hint style="success" %} **Ejemplo** La Ubicación de la Campaña A debe excluir "zoom.us/pricing" y la Ubicación de la Campaña B debe contener "zoom.us/pricing." De esa manera, los usuarios que visiten cualquier URL que incluya "zoom.us" verán la invitación regular, pero los usuarios que lleguen a la página específica "zoom.us/pricing" verán aparecer el mensaje proactivo. {% endhint %} *** ### Avatares Un avatar es la imagen que aparece junto a los mensajes en el chat web. Ayuda a aportar personalidad e Imagen de marca a la conversación.

Para los mensajes enviados antes de que un usuario se conecte con un agente (por ejemplo, un mensaje de bienvenida o Zoom Virtual Agent), puede establecer un único avatar predeterminado en todas sus experiencias, o puede establecer un avatar único para cada flujo de chat individual. Esto le brinda la flexibilidad de mantener la coherencia o adaptar la experiencia para diferentes marcas o casos de uso. Si está usando **Zoom centro de contacto**, haga clic en lo siguiente: 1. Preferencias 2. Experiencia del consumidor 3. Avatar y nombre del mensaje de flujo predeterminado. Si está usando **Solo Zoom Virtual Agent**, haga clic en lo siguiente: 1. AI Studio 2. Agentes virtuales 3. Chats 4. Configuración

Cuando su cliente pasa del bot a un agente en vivo en Zoom centro de contacto, también puede controlar cómo aparece la imagen del agente. Puede Seleccione mostrar la imagen de perfil del agente desde centro de contacto, sus iniciales o una imagen de avatar predefinida. Para configurar, haga clic en lo siguiente: 1. Preferencias 2. Experiencia del consumidor 3. Mostrar imagen *** ### Configuración adicional de chat #### Controle la ventana de chat web con Zoom Campaign SDK El SDK de campaña de Zoom centro de contacto (ZCC) y Zoom Virtual Agent (ZVA) brinda a los desarrolladores más control sobre cómo se comporta el chat web y cómo interactúa con su sitio web. Permite abrir, cerrar y controlar el comportamiento del chat mediante programación en función de las acciones del usuario, el contexto de la página o una lógica personalizada. Por ejemplo, puede hacer que la ventana de chat se abra automáticamente cuando sus usuarios hayan estado en la página durante un número específico de segundos o hagan clic en un botón determinado. Ver [Referencia de SDK de la documentación para desarrolladores de Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) para más detalles. #### Persistencia del chat en todo el sitio La persistencia del chat controla si la sesión de chat de un usuario continúa a medida que se mueve entre diferentes páginas de su sitio web. * **Cuando la persistencia está *****habilitada***** (predeterminado):** El mismo chat permanece abierto entre páginas, por lo que el usuario puede continuar su conversación sin interrupción. * **Cuando la persistencia está *****deshabilitada*****:** El chat no continúa cuando el usuario navega a una nueva página, a menos que esa página sea explícitamente parte de la ubicación definida de la primera campaña. Este Cambie hace que sea más fácil para las empresas con varias marcas o departamentos en el mismo dominio mantener separadas las campañas de chat. Evita que los usuarios lleven un chat entre páginas no relacionadas y reduce la necesidad de configuración manual. Encuentra esta configuración en **Zoom centro de contacto** y **Preferencias de Zoom Virtual Agent**. #### Notificaciones de audio De forma predeterminada, cuando tu agente o agente virtual envía un mensaje en el chat web, los consumidores escuchan un sonido de notificación. Si los sonidos predeterminados resultan demasiado molestos para la experiencia de tu marca, puedes desactivarlos en **Zoom centro de contacto** o **Preferencias de Zoom Virtual Agent**. Los consumidores seguirán teniendo la opción de volver a habilitarlos en el menú del chat, si lo prefieren. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://library.zoom.com/technical-library/es/servicios-comercial/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.