> 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-comerciales/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md). # Construye tu experiencia de chat Las herramientas de Zoom facilitan personalizar e iniciar su experiencia de chat con poco o nada de código. ### Ventana de participación del chat La ventana de participación del chat es la forma en que sus usuarios envían mensajes a 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 con ella y que coincida con la marca de su empresa. Para crear o editar su Ventana de participación del chat, vaya al administrador web de Zoom. | Si estás usando... | Luego haz clic... | | ------------------ | ---------------------------------------- | | centro de contacto | centro de contacto, Gestión de campañas. | | Agente virtual | AI Studio, Agentes virtuales, Campañas. | Desde allí haga clic en **+Añadir campaña** o abra el borrador de una campaña existente. Desplácese hasta la **Ventana de participación del chat** sección para crear o editar su ventana. #### Tamaño de la ventana y experiencia móvil La ventana de participación del chat de Zoom es adaptable, lo que significa que ajusta automáticamente su diseño si su usuario accede a su sitio desde su computadora de escritorio o su 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 seleccionar entre tres opciones de tamaño para la altura de la ventana: * **P:** 540 píxeles * **M:** 650 píxeles, **predeterminado** * **L:** 780 píxeles {% hint style="info" %} **Nota** El ancho siempre se fija 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 El **barra de encabezado del chat** es un elemento clave del diseño de su chat. Cuando se diseña cuidadosamente, les da 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; Seleccione la que prefiera. **Imagen completa del encabezado** 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 de avatar** Añadir una imagen de 40 por 40 píxeles para que aparezca en la barra de encabezado, sola o junto al texto del encabezado. {% columns %} {% column %}

{% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %} **Solo texto del 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 simplificado y minimalista, puede optar por **dejarlo vacío**, para 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 del encabezado y los iconos**, útil para integrar el diseño del chat en su sitio web. {% hint style="warning" %} **Atención** Si cambia el color de fondo, asegúrese de que todavía pueda ver los iconos de minimizar y menú. Puede que también necesite cambiar el color del icono. 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 la ventana de participación le permite seleccionar los colores exactos que desea para su chat. 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 El **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 configurar, haga clic en el **Participación del 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-comerciales/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 hagan clic en él, la ventana de chat se abrirá e iniciará su experiencia. Para crear o editar una invitación, vaya al administrador web de Zoom. | Si estás usando... | Luego haz clic... | | ------------------ | ---------------------------------------- | | centro de contacto | centro de contacto, Gestión de campañas. | | Agente virtual | AI Studio, Agentes virtuales, Campañas. | 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?"

Configure las siguientes opciones de Configuración para su **invitación fija** icono: * **Tamaño del botón:** El tamaño del icono de invitación de chat debe ser lo suficientemente grande como para que se note fácilmente y se pueda hacer clic o tocar, pero no tan grande como para que interrumpa la experiencia del usuario o cubra contenido importante. Zoom ofrece tres tamaños de invitación: * **P:** 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. Le recomendamos seguir [las directrices de 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 la 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 qué pueden esperar al pulsar el botón. Zoom ofrece algunos diseños predeterminados; Seleccione uno que indique el inicio de un chat. También es posible Añadir su propio icono personalizado usando un archivo SVG. Los archivos SVG deben ser inferiores a 10 MB. * **Radio de las esquinas:** ¿Qué tan redondeado o cuadrado quiere que sea el icono de la invitación? Eche un vistazo a su sitio web para ver si tiene un patrón para el aspecto de 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 abarrotar la pantalla, especialmente en móvil. Asegúrese de considerar a su audiencia y los Dispositivo que usan con más frecuencia. Si va a Añadir una fuente, Seleccione entre las opciones de fuente preestablecidas Arial, Georgia, Tahoma o Verdana; o cargue 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 desplazamiento de 20 píxeles desde la parte inferior y lateral. Normalmente es fácil de encontrar sin bloquear contenido clave. Recomendamos revisar su propio sitio web 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 del usuario. Si ya tiene un elemento (como un banner de cookies, una barra de navegación u otro widget) en el mismo lugar que su icono de invitación de chat, considere Cambie la alineación a la izquierda o a la derecha, o ajuste el desplazamiento desde la parte inferior o los laterales. {% hint style="success" %} **Ejemplo** Si descubre que el botón de invitación de chat está cubriendo un enlace crítico en la parte inferior de su página en dispositivos móviles, aumente el desplazamiento 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 lograrlo. * **Opción 1:** Cambie la posición del icono de invitación en la página. Puede mover la ubicación de la invitación en la página mediante las opciones de desplazamiento y posición. Esto se configura editando la invitación. * **Opción 2:** Mostrar u ocultar el icono de chat según la ubicación de la página. Si desea eliminar la invitación de chat por completo de 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 icono de invitación aparezca en los sitios móviles, desmarque la opción "teléfono móvil" en Segmentación de campaña. Para configurar, haga clic en **Campaña**, **Segmentación**. Zoom Campaigns ofrece una [**invitación incrustada**](/technical-library/es/servicios-comerciales/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) opción si no desea usar el icono fijo 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 desencadenante para abrir la ventana del chat. Para ello, crea el elemento en el HTML de su sitio y usa el SDK de Zoom Campaign para conectarlo con el chat. Cuando un usuario hace clic en ese elemento, abre la ventana del chat y comienza la experiencia de la campaña. También puede usar HTML existente en su sitio web para desencadenar la ventana del chat si lo prefiere.

Image of the Create Embedded Invitation screen.

{% hint style="warning" %} **Atención** ¿Quiere tanto un icono de invitación fija como desencadenar 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 fija, y luego use [el SDK de Zoom Campaign](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) para desencadenar la apertura del chat. {% endhint %} *** ### Las Características de Mensajería proactiva ¿Y si quiere una forma más activa, es decir, más activo, de captar la atención de su usuario para que chateen con su equipo o agente virtual? Las Características de Mensajería proactiva de Zoom le permiten configurar que las empresas inicien conversaciones con los visitantes, en lugar de esperar a que el cliente empiece el chat haciendo clic en la invitación. #### Cómo ayuda * **Mayor interacción:** Puede captar la atención de las personas y ofrecer ayuda en el momento adecuado. * **Más oportunidades:** Los mensajes y botones personalizados pueden animar a las personas a obtener más información al chatear con un agente, o a compartir sus datos para una llamada de seguimiento. * **Soporte más rápido:** Conecte 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 botones para iniciar un flujo específico. #### Dónde configurarlo Las Características se configuran en **Campañas**, y está Disponible para campañas de chat en páginas web que usan el tipo de invitación. **Fija** tipo de invitación. #### Dirija a sus usuarios Puede configurar su 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 puede decidir si desea que el usuario vea el mensaje solo una vez en un período de 24 horas, o si quiere 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 ("Campaign A"), y otra campaña ("Campaign B") para la página en la que desea tener un mensaje proactivo. Para cada campaña, querrá definir las ubicaciones de la campaña para que no se solapen. {% 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 ese modo, los usuarios que visiten cualquier URL que incluya "zoom.us" verán la invitación normal, 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 configurar un único avatar predeterminado en todas sus experiencias, o puede configurar un avatar único para cada flujo de chat individual. Esto le da la flexibilidad de mantener la coherencia o adaptar la experiencia a distintas 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 del flujo predeterminados. Si está usando **Solo Zoom Virtual Agent**, haga clic en lo siguiente: 1. AI Studio 2. Agentes virtuales 3. Chatbots 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 el avatar del agente. Puede elegir mostrar la imagen de perfil del agente del centro de contacto, sus iniciales o una imagen de avatar configurada. Para configurarlo, haga clic en lo siguiente: 1. Preferencias 2. Experiencia del consumidor 3. Mostrar imagen *** ### Configuración adicional del chat #### Controle 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 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 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 concreto. Vea [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 a medida que se mueve entre distintas páginas de su sitio web. * **Cuando la persistencia está *****habilitada***** (predeterminado):** El mismo chat permanece abierto entre páginas, para que el usuario pueda Continuar su conversación sin interrupciones. * **Cuando la persistencia está *****deshabilitada*****:** El chat no continúa cuando el usuario navega a una página nueva, a menos que esa página forme explícitamente parte de la ubicación definida de la primera campaña. Este cambio facilita que las empresas con varias marcas o departamentos en el mismo dominio mantengan 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 **Preferencias de Zoom Virtual Agent**. #### Notificaciones de Audio De forma predeterminada, cuando tu agente o agente virtual envía un mensaje en chat web, los consumidores escuchan un Audio de Notificación. Si los sonidos predeterminados resultan disruptivos 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ú de 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-comerciales/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.