> 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.md).

# Personalizar la experiencia de chat de Soporte del usuario

### Productos

* Zoom centro de contacto
* Zoom Virtual Agent

### Requisitos previos

[Incorpore Campaign SDK en su sitio web o aplicación móvil](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)

### Descripción general

Su ventana de chat suele ser la primera interacción real que un cliente tiene con su empresa, ya sea que esté chateando con un agente virtual o en vivo. Con Zoom centro de contacto y Zoom Virtual Agent, tiene pleno control sobre cómo se ve y funciona esa experiencia en su sitio web.

Esta guía le muestra todas las herramientas disponibles para ayudarle a diseñar una experiencia de chat que se ajuste a su marca, mejore la usabilidad y mantenga a los Clientes comprometidos.

### Crear un plan

La interfaz de usuario de su chat debe sentirse como una extensión natural de su sitio web o aplicación. Al planificar el diseño de la interfaz de usuario de su chat, tenga en cuenta lo siguiente:

* **Colores:** ¿Cuáles son los colores principales y de acento de su empresa? Use estos colores para distintos elementos de su experiencia de chat, como los globos de chat, los iconos, los botones y los colores de fondo. Seleccionará los colores mediante códigos hexadecimales (por ejemplo, #FFFFFF), por lo que es útil tener a mano los códigos de su marca.
* **Fuentes:** Haga coincidir la tipografía de su sitio para mantener la coherencia. Puede seleccionar entre varias fuentes comunes o cargar su propio archivo TTF para añadir una fuente personalizada.
* **Logotipo:** Considere añadir su logotipo o imagen de la empresa a su experiencia de chat. Puede cargar un archivo JPG/JPEG, PNG, SVG o GIF de hasta 10 MB. Según el diseño de chat que elija, hay dimensiones de imagen recomendadas; más información a continuación.
* **Avatar:** Un avatar es la representación visual del bot o agente. Para los mensajes del bot o del sistema, use su logotipo o un personaje/avatar que represente su marca. Al igual que los favicons en los navegadores web, estos iconos son pequeños, pero marcan una diferencia en la experiencia cuando están bien alineados con la marca de la empresa. Los avatares tienen un tamaño de 40x40 píxeles, y puede cargar un archivo JPG/JPEG, PNG, SVG o GIF de hasta 2 MB.

### Las partes

[El generador de campañas de Zoom](https://zoom.us/cci/index/admin#/admin-campaign-management) se utiliza para personalizar tanto el diseño de su chat como su disponibilidad en su sitio web o aplicación.

En Campañas, configurará:

* **Ventana de interacción de chat:** Utilizada por los consumidores para chatear con su bot o agente. Puede elegir el diseño de todos los globos, botones, iconos y el encabezado. La ventana de chat tiene un gran impacto en la apariencia general de su experiencia de soporte digital.
* **Ubicación:** Le permite controlar dónde debe estar disponible su soporte en su sitio (asegúrese de incrustar primero el Campaign SDK). Puede ofrecer soporte en todo su sitio o especificar qué páginas deben incluirse o excluirse según la URL.
* **Invitaciones:** Cómo sus usuarios inician o abren su centro de contacto en el sitio web o aplicación de su empresa. Hay dos tipos de invitación: Sticky y Embedded.
  * **Sticky:** Una forma sencilla de invitar a las personas a usar su soporte digital. Los usuarios ven un icono o widget en la pantalla que, al hacer clic, abre la experiencia de soporte. Puede controlar el color, la forma y el icono, e incluso añadir texto.
  * **Embedded:** Con las invitaciones incrustadas, puede convertir cualquier botón o enlace de su sitio web en un enlace en el que se pueda hacer clic y que abra el soporte.
* **Mensajes proactivos:** Saludaciones que puede usar para enviar un mensaje después de que sus usuarios visiten una página específica durante un tiempo determinado. Los mensajes proactivos se pueden añadir a cualquier campaña mediante un tipo de invitación Sticky.

  **Por ejemplo:** "¿Necesita ayuda para elegir un plan?"

Además, también configurará un **avatar**, que es la representación visual del bot o agente. Sus consumidores verán estos avatares del bot o agente que representan su marca.

### Cree su experiencia de chat

Más información sobre cómo crear su experiencia de chat, incluidos el tamaño, las imágenes, los diseños, la mensajería y la configuración adicional.

{% content-ref url="/pages/5a8d93769a0b9eae65d6f845cb2418bee8c733ae" %}
[Construye tu experiencia de chat](/technical-library/es/servicios-comercial/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md)
{% endcontent-ref %}

### Resumen

Zoom centro de contacto y Zoom Virtual Agent le ayudan a crear un chat de soporte que se sienta alineado con la marca y sea fácil de usar. Puede personalizar completamente el diseño, elegir dónde y cuándo aparece el chat, y añadir mensajes proactivos para atraer a los usuarios en el momento adecuado. Una vez que el Campaign SDK esté incrustado, puede controlarlo todo desde la interfaz de administrador o con código. Es flexible, limpio y está diseñado para adaptarse a su sitio.

Está listo para lanzar una experiencia de chat que ayude a sus Clientes y represente su marca.

### Recursos relacionados

* [Configure una campaña digital de Zoom centro de contacto](https://zoom.us/cci/index/admin#/admin-campaign-management)
* [Integre funciones de Zoom centro de contacto en su sitio web](/technical-library/es/servicios-comercial/zoom-contact-center/expert-insights/integrate-zoom-contact-center-features-into-your-website.md)
* [Incorpore Campaign SDK en su sitio web o aplicación móvil](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)


---

# 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:

```
GET https://library.zoom.com/technical-library/es/servicios-comercial/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md?ask=<question>
```

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.
