Personalizar la superficie del chat

El Chat App Customizer es donde aplicas tu marca a la superficie de chat de página completa renderizada por el shortcode [mga_chat_app]. Cada cambio que hagas pertenece al bot seleccionado en el desplegable Espacio del bot — no hay configuración “global” y nunca puedes guardar sin querer contra el bot equivocado.

Un bot por guardado

La URL del personalizador es /wp-admin/admin.php?page=mga-wp#/bots/<id>/chat-app/<sección>. El <id> en esa URL es el bot del que el formulario lee y al que escribe. Cambia el desplegable, la URL cambia, y el formulario recarga para el nuevo bot — tus ediciones sin guardar no se trasladan.

Abrir el personalizador

1. En el admin de WP, abre MGA WP.

2. En el desplegable Espacio del bot, elige el bot al que quieres aplicar la marca.

3. Haz clic en Secciones del chat → Marca en la barra lateral (o cualquier otra sección).

4. La columna derecha es el formulario en vivo; a la derecha del formulario hay una vista previa que refleja cada cambio antes de guardar.

5. Haz clic en Guardar cambios en la barra superior fija. Restablecer revierte el formulario a los valores por defecto; Descartar deshace ediciones sin guardar.

Cómo se ve el personalizador

M

MyGPT Assistantspara WordPress

Espacio del bot

Seleccionar bot

Soporte CCreators

1

Secciones del chat

BrandingWelcomeMessagesComposerSidebarFooter & LegalBehaviorAdvancedEmbed

2

←

Chat App Customizer Unsaved changes

Soporte CCreators — Configure the full-page [mga_chat_app] shortcode

↺ Reset↻ Discard

✓ Save changes3

⚙

Conversation behavior

How the chat surface reacts during a conversation.

Auto-scroll to newest messageScrolls down automatically as the assistant streams a reply.

1Seleccionar bot — todo lo que edites debajo pertenece a este bot.

2Secciones del chat — Marca, Bienvenida, Mensajes, Compositor… cada pestaña controla una porción de la superficie del chat.

3Guardar cambios — escribe la configuración en la fila del bot. Mientras hay ediciones sin guardar verás el chip “Unsaved changes”.

El personalizador es por bot

Abajo está el mismo panel del personalizador después de cambiar el desplegable a otro bot. Fíjate cómo se actualiza el título en la barra superior — y los valores guardados son independientes.

M

MyGPT Assistantspara WordPress

Espacio del bot

Seleccionar bot

Asesor de ventas

Secciones del chat

BrandingWelcomeEmbed

←

Chat App Customizer

Asesor de ventas — Configure the full-page [mga_chat_app] shortcode

✓ Save changes

🎨

Colores

Paleta de marca para la superficie del chat.

Color primario

#3b82f6

Se usa para acentos, focus rings y el botón de enviar.

Vista previa en vivo

En pantallas más anchas, el personalizador renderiza un segundo panel de vista previa a la derecha del formulario. Todo lo que escribas se actualiza al instante, antes de guardar — esa vista previa usa la misma superficie React y la misma hoja de estilos que el shortcode [mga_chat_app] publicado, así que lo que ves es exactamente lo que los visitantes verán.

Qué puedes personalizar

Sección	Qué controla
Marca	Tema (auto/claro/oscuro), densidad, ancho máximo, radio de bordes, colores primario/acento/fondo/superficie/texto, familia tipográfica, logo, avatar del bot.
Bienvenida	Título y subtítulo de cabecera, encabezado y subencabezado de bienvenida, sugerencias (una por línea, máx. 6), ocultar tras el primer mensaje, aleatorizar.
Mensajes	Forma de la burbuja, colores por lado, mostrar avatares, mostrar marcas de tiempo, acciones por mensaje (fuentes / regenerar / copiar / feedback).
Compositor	Texto del placeholder, longitud máxima de mensaje, Enter vs Cmd/Ctrl+Enter para enviar.
Barra lateral	Activar panel de conversaciones, título, etiqueta del botón “Nueva conversación”.
Pie y legales	Línea “powered by”, HTML del pie, URLs de privacidad y términos.
Comportamiento	Auto-scroll, Requerir inicio de sesión en WordPress, copia de inicio de sesión y redirección, modo invitado, copia de errores.
Avanzado	CSS personalizado inyectado como <style> con scope dentro de la superficie del chat.
Incrustar	Shortcode por bot que pegas en una página o entrada — ver el siguiente tutorial.

Continúa con Copiar el shortcode de incrustación →.