Personalizar Dialog

Dialog ya está instalado y entrenado. Toca hacerlo tuyo. Personalizar Dialog ayuda a que encaje con tu tienda y refleje tu marca.

1. Personalización visual en Shopify

Desde los settings del theme de Shopify, ajusta:

• Font y colors para que peguen con tu marca.
• Custom CSS para lo que los settings no cubren: espaciados, bordes, tamaños, o un elemento concreto de Dialog.

2. Personalización del asistente en Dialog

Desde tu dashboard Dialog, define la identidad del asistente:

• Name: dale a tu asistente un nombre cercano o alineado con tu marca.
• Assistant logo: sube tu logo.
• Add-to-cart logo: elige un icono que encaje con tu sector.

Un asistente bien personalizado se ve mejor y genera más confianza en los clientes.

3. Personalizar el asistente con CSS

El asistente Dialog se renderiza con hooks documentados: IDs de elementos y clases CSS que puedes apuntar con tu propio CSS. Funcionan en cualquier plataforma (Shopify, PrestaShop o una instalación SDK a medida): úsalos para reestilizar cualquier parte del asistente (fonts, colores, bordes, espaciados).

Los selectores de esta página son la superficie soportada. Prefiérelos a cualquier cosa que encuentres inspeccionando el DOM: los elementos internos muy anidados pueden moverse cuando actualizamos los componentes de Dialog, y un override que los apunte puede necesitar una revisión tras una actualización.

Dónde añadir el CSS depende de tu instalación:

• Shopify: el campo Custom CSS en los settings de tu theme.
• PrestaShop: la hoja de estilos de tu theme, o un módulo CSS custom.
• SDK / a medida: cualquier hoja de estilos cargada en las páginas donde aparece el asistente.

Limita cada override a Dialog

En una tienda el CSS fluye en los dos sentidos: una regla demasiado amplia escrita para Dialog puede reestilizar toda tu tienda, y las reglas amplias de tu theme pueden colarse en Dialog (más abajo). El mismo hábito te protege de ambos: ancla siempre tu selector a un ID o clase de Dialog, nunca a un elemento a secas.

/* Bien: solo afecta a los mensajes de Dialog */
#dialog-drawer .dialog-message {
  font-size: 14px !important;
}

/* Mal: todos los botones de tu tienda, incluidos varios dentro de Dialog */
button {
  border-radius: 0;
}

Contenedores (apuntar por ID)

Úsalos para estilizar regiones enteras del asistente. El selector # apunta a un ID.

Selector	Objetivo
#dialog-shopify-ai	Contenedor raíz de la app Shopify de Dialog
#dialog-ai-bar	La AI bar y su input
#dialog-drawer	El panel del drawer: contenedor raíz de la conversación
#dialog-ai-container	El área de conversación del asistente
#dialog-ai-input	El campo de entrada de la pregunta
#dialog-bookmark	El botón de bookmark

Elementos (apuntar por clase)

Úsalos para elementos individuales dentro de la conversación. El selector . apunta a una clase.

Selector	Objetivo
.dialog-human-message	Mensajes del cliente (shopper)
.dialog-message	Mensajes del asistente (IA)
.dialog-suggestions-item	Preguntas sugeridas
.dialog-feedback-button	Botones de feedback pulgar arriba / abajo
.dialog-diagnostic-choice-with-photo	Card de elección del diagnóstico visual (con foto)
.dialog-diagnostic-choice-without-photo	Card de elección del diagnóstico visual (sin foto)
.dialog-diagnostic-action-button	Botón de acción del diagnóstico visual

Variables CSS

Variable	Controla
--dialog-overlay-bg	Color de fondo del overlay (se define en #dialog-drawer)

#dialog-drawer {
  --dialog-overlay-bg: rgba(0, 0, 0, 0.45);
}

Tips

• Cambia la font. Dialog aplica su font en #dialog-drawer. Sobreescríbela ahí para reestilizar todos los mensajes de golpe, o apunta a una clase concreta como .dialog-human-message para un control más fino.
• Usa !important cuando una regla no se aplica. Dialog incluye estilos inline con scope, así que tu override puede necesitar !important para ganar.

Ejemplo

/* Font custom para los mensajes del shopper */
#dialog-drawer .dialog-human-message {
  font-family: "Georgia", serif !important;
}
/* Reestilizar las preguntas sugeridas */
#dialog-drawer .dialog-suggestions-item {
  border-color: red;
}
/* Recolorear los botones de feedback */
#dialog-drawer .dialog-feedback-button {
  border-color: orange;
}
/* Reducir todo el texto de la conversación */
#dialog-drawer .dialog-human-message,
#dialog-drawer .dialog-message,
#dialog-drawer .dialog-message * {
  font-size: 10px !important;
}

Resultado:

4. Cuando el CSS de tu theme se cuela en Dialog

La mayoría de themes traen reglas globales para los elementos de formulario, algo como:

input[type="text"] {
  height: 52px;
  padding: 16px;
  border: 1px solid #000;
}

Dialog se renderiza dentro de tu página, así que esas reglas también alcanzan sus inputs. Si el input de la AI bar se ve demasiado alto, carga un padding que nunca tuvo o hereda un borde de tu theme, esta es casi siempre la causa.

No suavices la regla del theme: los formularios de tu tienda dependen de ella. Resetea las propiedades heredadas dentro de Dialog y luego vuelve a añadir lo que quieras.

Resetear el input de la AI bar

#dialog-shopify-ai #dialog-ai-bar input[type="text"],
#dialog-ai-bar #dialog-ai-input {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

Después reaplica los estilos que sí quieres:

#dialog-ai-bar #dialog-ai-input {
  font-size: 14px !important;
  color: #111 !important;
}

Resetear el input del drawer

Mismo patrón, limitado al drawer:

#dialog-drawer #dialog-ai-input,
#dialog-drawer input[type="text"] {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

El doble anclaje (un contenedor de Dialog más el selector de input) evita que el reset toque nada fuera de Dialog y le da la especificidad suficiente para ganar a la regla del theme.

5. Solución de problemas

El input de la AI bar se ve demasiado alto o desalineado

Una regla del theme que apunta a todos los campos de texto (normalmente input[type="text"]) se está colando. Aplica el reset de la AI bar de arriba.

Un botón de Dialog cambió tras una actualización del theme

La actualización probablemente añadió o cambió un selector amplio como button, .button o [type="button"]. No lo contrarrestes con otra regla global; limita el arreglo a Dialog:

#dialog-drawer .dialog-feedback-button {
  border-radius: 8px !important;
}

Una personalización funciona en una página pero no en otra

El CSS no está cargado en todas las páginas donde aparece Dialog. En Shopify, comprueba que está en el Custom CSS del theme activo, no en una sección específica de una página.

Un selector dejó de funcionar tras una actualización de Dialog

El override probablemente apuntaba a un elemento interno en lugar de a un hook documentado. Reescríbelo con los IDs y clases de esta página, y trata cualquier override profundo como algo a revisar tras una actualización de Dialog.

6. Cuándo contactar con el soporte de Dialog

Escribe a paul@askdialog.com cuando:

• necesites reestilizar un elemento que no tiene ID ni clase documentados en esta página: preferimos exponer un hook antes que verte apuntar a elementos internos;
• un selector documentado dejó de funcionar tras una actualización de Dialog;
• una actualización del theme rompió la apariencia de Dialog y no encuentras la regla en conflicto.

Incluye la URL de tu tienda, la página donde aparece el problema, una captura y el CSS que añadiste. Antes de contactar con soporte explica por qué con esos elementos la respuesta llega en un solo intercambio.