Smart Discovery

Smart Discovery (antes Modal configuration) controla cuándo y cómo el asistente Dialog aparece por sí solo, en cualquier página de tu tienda. Es distinto del bloque de preguntas de producto: en vez de esperar a que un visitante interactúe en una página de producto, tú haces surgir el asistente de forma proactiva: en la URL que elijas, tras un trigger de carga o de scroll, con tus propios textos y preguntas sugeridas.

Cada configuración se muestra en una de las dos surfaces:

• el Modal: una ventana de bienvenida con sugerencias,
• la AI Bar: una search bar flotante discreta, que además puede llevar un botón personal shopper.

Puedes correr múltiples configuraciones Smart Discovery en paralelo, cada una apuntando a un patrón de URL distinto con su propia surface, trigger y contenido.

Tutorial en vídeo

El tutorial de instalación cubre la creación de una configuración de principio a fin:

Si el vídeo no se carga, abre el tutorial en Loom.

Dónde se configura

Todo es self-serve desde el dashboard Dialog, en Smart Discovery en la navegación:

https://app.askdialog.com/organization/{tu-org-slug}/modal-configs

Desde ahí creas, editas y borras configuraciones. Cada una es una fila de la tabla; Create Smart Discovery abre el formulario.

Cómo funciona una configuración

Cada configuración liga:

• una surface: Modal o AI Bar,
• un patrón de URL de página: dónde es elegible para aparecer,
• un evento trigger: qué la hace aparecer (carga de página o scroll),
• un delay: cuánto esperar después del trigger,
• el contenido: textos y preguntas sugeridas (y, en la AI bar, un botón personal shopper opcional).

Cuando un visitante llega a una URL que matchea y el trigger se dispara, la surface se abre tras el delay. Una configuración cuyo patrón de URL no matchea nada nunca aparece.

Modal

Campos de configuración

Campo	Qué hace
Description (requerido, traducible)	Nota interna sobre cuándo y por qué debe aparecer este modal. Mínimo 5 caracteres. No se muestra a los visitantes.
Page URL Pattern (Regex)	Regex comparada contra el path de la página. Anclada automáticamente (^pattern$). Ejemplos: .* (todas las páginas), /products/.* (páginas de producto), /product/[0-9]+ (IDs numéricos). Un tester en vivo te deja pegar una URL y comprobar si matchea.
When should the modal appear?	El evento trigger: On Page Load o On Scroll.
Delay before showing modal	Tiempo de espera tras el trigger antes de que el modal se abra: 0s, 5s, 10s, 15s, 30s o 60s. 0s = inmediatamente.
Assistant Name (traducible)	Nombre mostrado en el modal (por ej. Shopping Assistant, Style Guide).
Input Placeholder (traducible)	Texto placeholder en el input de pregunta del modal.
Suggested Questions (2, requeridas, traducibles)	Dos preguntas presentadas al visitante al abrirse el modal, como puntos de entrada rápidos a la conversación.

Notas de comportamiento

• La primera vez vs. después. La primera vez que un visitante dispara el modal, se abre entero. Una vez visto, los triggers posteriores muestran un bookmark más pequeño como punto de entrada en vez de volver a desplegar el modal completo: así no resulta intrusivo en cada página.
• Sin doble apertura. Si el asistente ya está abierto (modal, chat, bookmark o splash), el trigger se ignora.
• Path, no URL completa. El patrón se testea contra el path (por ej. /products/shoe), no contra la query string ni el dominio.
• Regex anclada. El patrón se envuelve como ^pattern$, así que debe matchear el path entero. Usa segmentos .* para matches parciales (por ej. /products/.*).

AI Bar

La AI Bar es la segunda surface de Smart Discovery: una search bar flotante discreta en vez de una ventana de bienvenida completa. Usa la misma mecánica de targeting que el modal, patrón de URL, evento trigger (carga de página o scroll) y delay, pero con una huella más ligera: el visitante ve una barra compacta que puede desplegar hacia la conversación completa con el asistente.

Como la barra es más minimal, su contenido difiere del modal:

Campo	Qué hace
Input Placeholder (traducible)	Texto placeholder en el input de pregunta de la barra.
Suggested Questions (opcional, traducible)	En la AI bar, las preguntas sugeridas son opcionales (en el modal son requeridas).

Los campos propios del modal (assistant name, description message) no aplican a la AI bar.

Personal shopper (solo AI bar)

La AI bar puede llevar un botón personal shopper. Al activarlo, la barra desplegada muestra un botón que abre directamente el Personal Shopper seleccionado: un punto de entrada en un click desde la barra hacia el flow guiado correcto.

Activa el toggle Personal shopper en el formulario y luego rellena:

Campo	Qué hace
Personal shopper (requerido cuando está activado)	Selecciona qué personal shopper lanza el botón.
Button label (traducible)	El texto del botón (por ej. Start the personal shopper).

Esta sección solo aparece cuando la surface de la configuración es AI Bar.

Multiidioma

Los campos traducibles (description, assistant name, input placeholder, suggested questions, label del botón personal shopper) se editan por locale desde el selector de idioma arriba del formulario. En el locale principal, Translate to all languages rellena por IA todos los demás locales activos a partir del valor actual en un click.

Overrides CSS avanzados

No es una superficie de customización oficial

El CSS custom es técnicamente posible del lado de la integración, pero no es un sistema de customización oficial y estable expuesto en la config. Las clases de abajo son los hooks de override soportados; cualquier cosa más allá apunta a markup interno que puede cambiar sin aviso. Mantén el CSS custom mínimo y vuelve a testear después de cada update del widget.

El modal se renderiza junto con el resto del widget Dialog, así que aplican las mismas clases de override. Sobrescríbelas desde el campo Custom CSS de Shopify, o desde tu propia hoja de estilos en instalaciones custom:

Clase	Objetivo
.dialog-input	El input de pregunta
.dialog-suggestions-item	Preguntas sugeridas
.dialog-add-to-cart-button	Botón add-to-cart
.dialog-human-message	Mensajes del cliente
.dialog-ai-message	Respuestas de la IA
.dialog-feedback-button	Botones de feedback

Ejemplo: modal alineado con tu marca

/* Input and suggestions */
.dialog-input {
  border-color: #4f46e5;
  border-radius: 12px;
}
.dialog-suggestions-item {
  border-color: #c7d2fe;
  background-color: #eef2ff;
}

/* Conversation bubbles */
.dialog-human-message {
  background-color: #4f46e5;
  color: #ffffff;
}
.dialog-ai-message {
  background-color: #f8fafc;
}
.dialog-human-message,
.dialog-ai-message * {
  font-size: 15px !important;
  line-height: 1.5;
}

/* Actions */
.dialog-add-to-cart-button {
  background-color: #16a34a;
  border-radius: 999px;
}
.dialog-feedback-button {
  border-color: #f59e0b;
}

Tips para overrides seguros

• Apunta fino. Sobrescribe solo las clases documentadas arriba. Apuntar a selectores internos más profundos es frágil.
• Cuidado con la especificidad. El widget trae sus propios estilos; puede que necesites !important en propiedades como font-size para ganar, como arriba.
• Prioriza primero el camino soportado. Para instalaciones SDK / headless, el objeto theme es la surface de styling estable: úsalo antes de recurrir al CSS custom.
• Vuelve a testear tras los updates. Los snippets Shopify y el widget se actualizan periódicamente. Revisa tus overrides después de cada update.

Enlaces útiles

• Personalizar Dialog: la vista general de la customización.
• Personal Shopper: flows guiados disparados por un click en vez de por una URL.
• Referencia SDK: objeto theme para el styling en stacks custom.
• Dialog no es visible en la tienda: si el modal nunca se abre.