> For the complete documentation index, see [llms.txt](https://library.zoom.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://library.zoom.com/technical-library/es/servicios-comercial/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md). # Construye tu experiencia de chat Las herramientas de Zoom hacen que sea fácil personalizar y lanzar tu experiencia de chat con poco o nada de código. ### Ventana de interacción del chat La ventana de interacción del chat es la forma en que tus usuarios envían mensajes con tu agente virtual o agente humano. Con las herramientas de Zoom, puedes crear una ventana de chat que sea fácil de ver e interactuar con ella y que coincida con la marca de tu empresa. Para crear o editar tu Ventana de interacción del chat, ve al Administrador web de Zoom. Desde allí, haz clic en **+Añadir Campaign** o abre el borrador de una Campaign existente. Desplázate hasta la **Ventana de interacción del chat** sección para crear o editar tu ventana. #### Tamaño de la ventana y experiencia móvil La ventana de interacción del chat de Zoom es adaptable, lo que significa que ajusta automáticamente su diseño si tu usuario accede a tu sitio desde su computadora de escritorio o smartphone. En dispositivos móviles, la ventana de chat se abre a pantalla completa para maximizar el espacio limitado de la 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, ofrece 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 que puede Seleccione. **Imagen de encabezado completa** Añadir una imagen de 426 por 95 píxeles que ocupe 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, sola o junto con el 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 de párrafo del cuerpo.

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

Para un diseño limpio y minimalista, puede optar por **dejarlo vacío**, centrar 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 de la cabecera y los iconos**, útil para integrar el diseño de su chat con su sitio web. {% hint style="warning" %} **Aviso** Si necesita hacer un Cambie del color de fondo, asegúrese de que todavía pueda ver los iconos de minimizar y menú. Es posible que también tenga que hacer un Cambie del color de los iconos. Image of a chat screen with a blue header bar, with no logo or text.

{% endhint %} #### Colores para su burbuja de chat, texto, iconos y más El generador de ventanas de interacción le permite elegir los colores exactos que desea para su chat. Tendrá que 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 se vea genial (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. Esto está disponible para la experiencia de chat web. Para Configure, haga clic en la **Interacción de chat** ventana, luego 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 la [**Fija** 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, la ventana de chat se abrirá y comenzará su experiencia. Para crear o editar una invitación, vaya al administrador web de Zoom. Desde allí, haga clic en **+Añadir Campaign** o abre el borrador de una Campaign existente. Desplázate 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 las siguientes 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 pulsarse o tocarse fácilmente, pero no tanto como para interrumpir la experiencia del usuario o cubrir 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 establecen una relación mínima de contraste 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 que Seleccione entre ellos, que indican el inicio de un chat. También puede Añadir su propio icono personalizado utilizando un archivo SVG. Los archivos SVG deben ser menores de 10 MB. * **Radio de las esquinas:** ¿Qué tan redondo o cuadrado quieres que sea el icono de invitación? Echa un vistazo a tu sitio para ver si tiene un patrón sobre cómo se ven los botones, o pregunta a tu equipo de marca si tienen una preferencia. Usar un radio de esquina más bajo, como 8 píxeles, hará que tu invitación sea más cuadrada. Un radio de esquina más alto, como 28 píxeles, hará que tu invitación sea más redonda. * **Añadir texto a tu 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 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 recargar la pantalla, especialmente en dispositivos móviles. Asegúrate de considerar a tu público y los dispositivos que usan con más frecuencia. Si añades una fuente, puedes Seleccione entre las opciones de fuente preestablecidas Arial, Georgia, Tahoma o Verdana; o cargar tu 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 desplazamiento de 20 píxeles desde la parte inferior y lateral. Por lo general, es fácil de ver sin bloquear contenido clave. Recomendamos revisar tu propio sitio tanto en escritorio como en móvil. Si tu sitio ya tiene un banner o botón en esta ubicación, esto podría perjudicar la usabilidad de tu cliente o posiblemente interrumpir los flujos del usuario. Si ya tienes un elemento (como un banner de cookies, una barra de navegación u otro widget) en el mismo lugar que tu icono de invitación de chat, considera cambiar la alineación a la izquierda o a la derecha, o ajustar el desplazamiento desde la parte inferior o los lados. {% hint style="success" %} **Ejemplo** Si ves que tu botón de invitación de chat está cubriendo un enlace crítico en la parte inferior de tu página en dispositivos móviles, aumenta el desplazamiento hasta que el icono de invitación ya no cubra ese elemento. {% endhint %} También puede "Habilitar que los consumidores arrastren y muevan la invitación" para dar a sus usuarios aún más flexibilidad para mover el ícono por la página. #### Pregunta común El ícono de invitación de chat está bloqueando o distrayendo a los usuarios en una página en particular 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 la invitación de chat por completo 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:** Configura la segmentación por Dispositivo. Si no quieres que el icono de invitación aparezca en los sitios móviles, desmarca la opción "teléfono móvil" en Segmentación de campañas. Para configurarlo, haz 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 quieres usar el icono adhesivo predeterminado para iniciar el chat. Esto te permite convertir cualquier elemento de tu sitio web, como un botón en tu menú o un enlace en una página, en un desencadenante para abrir la ventana de chat. Para hacer esto, creas el elemento en el HTML de tu sitio y usas el SDK de campañas de Zoom 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 puedes usar HTML existente en tu sitio web para desencadenar la ventana de chat si lo prefieres.

Image of the Create Embedded Invitation screen.

{% hint style="warning" %} **Aviso** ¿Quieres tanto un icono de invitación adhesivo como desencadenar la apertura del chat mediante un clic en un botón de tu sitio web? Crea una campaña usando la opción de invitación adhesiva, luego usa [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 quieres una forma más activa de captar la atención de tu usuario para que chatee con tu equipo o con Zoom Virtual Agent? La función de mensajería proactiva de Zoom te permite configurar y permite a las empresas 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 * **Mejor interacción:** Puedes captar la atención de las personas y ofrecer ayuda en el momento adecuado. * **Más clientes potenciales:** Los mensajes y botones personalizados 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 con 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 botones para iniciar un flujo específico. #### Dónde configurarlo Esta función se configura en **Campañas**, y está disponible para campañas de chat en páginas web que usan el **Fija** tipo de invitación. #### Dirige a tus usuarios Puedes configurar tu mensaje proactivo para que tenga un retraso, de modo que solo aparezca para los usuarios que hayan estado en esa página durante una cantidad específica de tiempo. También puedes elegir si quieres que el usuario vea el mensaje solo una vez en un período de 24 horas, o si quieres 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** Tendrás que crear dos Campañas: una para tu invitación Estándar en todo tu sitio web ("Campaign A"), y otra Campaña ("Campaign B") para la página donde quieres tener un mensaje proactivo. Para cada Campaña, tendrás que definir las Ubicaciones de la Campaña para que no se superpongan. {% hint style="success" %} **Ejemplo** La Ubicación de la Campaign A debe excluir "zoom.us/pricing" y la Ubicación de la Campaign B debe contener "zoom.us/pricing". De ese modo, los usuarios que visiten cualquier URL que incluya "zoom.us" verán la invitación habitual, pero los usuarios que lleguen a la página específica "zoom.us/pricing" verán el mensaje proactivo emergente. {% 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), puedes configurar un único avatar predeterminado para todas tus experiencias, o puedes configurar un avatar único para cada flujo de chat individual. Esto te da la flexibilidad de mantener la coherencia o adaptar la experiencia a distintas marcas o casos de uso. Si estás usando **Zoom Centro de contacto**, haz clic en lo siguiente: 1. Preferencias 2. Experiencia del consumidor 3. Avatar y nombre predeterminados del mensaje del flujo. Si estás usando **Solo Zoom Virtual Agent**, haz clic en lo siguiente: 1. AI Studio 2. Agentes virtuales 3. Chatbots 4. Configuración

Cuando tu cliente pasa del bot a un agente en vivo en Zoom Centro de contacto, también puedes controlar cómo aparece el avatar del agente. Puedes elegir mostrar la imagen de perfil del agente del centro de contacto, sus iniciales o una imagen de avatar establecida. Para configurarlo, haz clic en lo siguiente: 1. Preferencias 2. Experiencia del consumidor 3. Mostrar imagen *** ### Configuración adicional del chat #### Controla la ventana de chat web con Zoom Campaign SDK El SDK de Campaign de Zoom Centro de contacto (ZCC) y Zoom Virtual Agent (ZVA) ofrece a los desarrolladores más control sobre cómo se comporta el chat web y cómo interactúa con tu 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 lógica personalizada. Por ejemplo, puedes hacer que la ventana del chat se abra automáticamente cuando tus usuarios hayan estado en la página durante una cantidad específica de segundos o hagan clic en un botón concreto. Consulta [Referencia del SDK de la documentación para desarrolladores de Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) para obtener 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 cuando pasa entre diferentes páginas de tu 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á *****deshabilitado*****:** El chat no puede Continuar cuando el usuario navega a una nueva página, a menos que esa página sea parte explícita 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. Encuentre esta configuración en **Zoom Centro de contacto** y **Zoom Virtual Agent Preferencias**. #### Notificación de Audio De forma predeterminada, cuando su agente o agente virtual envía un mensaje en el web chat, los consumidores escuchan un sonido de Notificación. Si los sonidos predeterminado parecen disruptivos para la experiencia de su marca, puede deshabilitarlos en **Zoom Centro de contacto** o **Zoom Virtual Agent Preferencias**. Los consumidores seguirán teniendo la opción de Habilitar los en el menú del chat, si lo prefieren. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` 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=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.