Crea un asistente para tu tienda como nuestra demo

Ver la demo

La demo retail convierte el catálogo de una tienda en dos experiencias de compra útiles. Pide “un regalo para alguien a quien le encanta la montaña, por menos de 60 €” y devuelve una recomendación en lenguaje claro con productos reales y enlaces a las fuentes.

Esta guía explica la construcción en el orden que hace más fácil seguir las decisiones: empezar por el catálogo, elegir las experiencias de compra, añadir datos en vivo donde importan y, por último, probar el resultado.

1. Empieza por el catálogo

El catálogo es la fuente de verdad del asistente. Crea un dataset de memoria y ejecuta un trabajo de captura web sobre las páginas que responden a preguntas de compra reales.

Incluye: páginas de producto y de categoría, guías de tallas y ajuste, y ayuda sobre envíos y devoluciones.

Excluye: las páginas de carrito, checkout, cuenta y marketing. Añaden ruido sin ayudar al asistente a responder la pregunta de un comprador.

Cuando termine la captura, revisa una muestra de registros. Los nombres de producto, precios, URL canónicas, indicaciones de talla y detalles de devolución deben estar presentes y ser legibles. Un bloque de navegación duplicado o una hoja de estilos de impresión pueden empeorar la recuperación en toda la experiencia.

Consulta Crear una base de conocimiento y Configurar trabajos de captura de datos.

2. Da a cada intención del comprador la superficie adecuada

La demo usa dos experiencias porque los compradores llegan con necesidades distintas.

El centro de búsqueda aparece en la página de inicio y en su propia página de búsqueda. El chat flotante está disponible en toda la tienda. Así una consulta rápida sobre un producto sigue siendo rápida, sin obligar a quien necesita consejo a empezar de nuevo en una caja de búsqueda.

Comparte la base de conocimiento

Las dos experiencias tienen puntos de entrada, modos de visualización y capacidades diferentes, pero usan un único dataset. Es intencionado:

• Mantén las respuestas coherentes. Un dato de producto no debe cambiar según dónde se pregunte.
• Mantén el catálogo una sola vez. Vuelve a indexar un cambio una vez y ambas experiencias lo reciben.
• Añade capacidades sin dividir el conocimiento. El chat puede usar formularios y consultas en vivo mientras responde a partir del mismo catálogo que la búsqueda.

Piensa en la base de conocimiento como el registro compartido de la tienda y en las dos experiencias como formas distintas de acceder a él.

“Un catálogo, dos formas de ayudar a un comprador a decidir.”

Define un personaje concreto y útil

El estilista es un estilista personal de esta tienda, no un asistente de uso general. Sus instrucciones de comportamiento fijan el rol y el tono, y después detallan los límites:

• Recomendar solo artículos que aparezcan en el catálogo.
• Citar el producto que se recomienda.
• No afirmar un precio o un nivel de stock que no se pueda verificar.
• Decirlo cuando la información disponible no responda a la pregunta.

Añade un nombre, un avatar y un mensaje de bienvenida que encajen con la tienda. Unas instrucciones claras y un rol bien definido hacen al asistente más fiable que una indicación vaga de “asistente útil”.

Consulta Crear un asistente y Lanzar un asistente.

3. Configura la búsqueda para preguntas naturales

Crea un Centro de búsqueda inteligente sobre el dataset compartido del catálogo. A diferencia de una caja de búsqueda solo por palabras clave, puede devolver una respuesta razonada junto a las tarjetas de producto que la respaldan.

Usa un texto de ejemplo que invite a hacer una pregunta real, como “Encuentra un regalo, un look o tu talla…”. Cuando la búsqueda esté vacía, muestra un mensaje de bienvenida corto y productos destacados. Así la página resulta útil antes de que el comprador escriba nada.

Haz que las sugerencias muestren capacidades reales

Las sugerencias son texto de producto. Cada una debe llevar a una respuesta que el catálogo o un servicio en vivo puedan respaldar de verdad.

• Un regalo para alguien a quien le encanta la montaña, por menos de 60 €
• Crea un look smart casual por menos de 150 €
• ¿Qué mochila es mejor para ir a diario al trabajo cuando llueve?
• ¿Dónde está mi pedido y cuándo llegará?

En conjunto, estos ejemplos muestran regalos, estilismo, comparación de productos y ayuda en vivo con la cuenta. Consulta Crear un centro de búsqueda, Crear un centro de búsqueda con el contenido de tu web y Escribir sugerencias útiles para un centro de búsqueda.

4. Usa formularios cuando unos pocos datos mejoran la respuesta

El texto basta para una pregunta directa como “¿Qué mochila es mejor para ir al trabajo cuando llueve?”. El estilismo y las tallas necesitan algo más de contexto. La demo usa formularios cortos dentro de la conversación para recogerlo.

En cada formulario, configura tres cosas: cuándo mostrarlo, qué campos pedir y qué ocurre al enviarlo. Un formulario bien situado convierte una pregunta abierta en una solicitud estructurada sin obligar al comprador a una conversación larga.

Consulta Captar leads y usar formularios.

5. Conecta acciones en vivo para las preguntas de cuenta

El contenido del catálogo responde a ¿qué vendéis? Las acciones en vivo responden a ¿dónde está mi pedido?

Registra cada consulta en vivo como un servicio vinculado. El asistente llama al servicio por un ID corto; el endpoint real y las cabeceras secretas se quedan en el servidor, así que no llegan al navegador.

La configuración es deliberadamente pequeña:

1. Da al servicio un ID, un método y una URL.
2. Usa marcadores {{params.x}} para los valores de la URL de cada llamada. Se codifican para URL.
3. Guarda cualquier secreto en una cabecera de autenticación.
4. Pasa el ID del servicio como proxyId desde un formulario, o llámalo directamente desde un widget o un botón.

// Look up the signed-in shopper's order, then render the reply in the conversation.
skdwn.instance.executeProxyRequest(
  'order-status',            // the linked-service ID
  { orderId },               // request body (POST)
  (res) => renderReply(res), // endpoint response
  { locale: 'en' }           // fills {{params.locale}} in the service URL
);

Haz que el endpoint devuelva una respuesta pequeña y lista para mostrar: un reply en markdown y una lista de references. Es más sencillo y fiable que pedir al asistente que formatee el JSON de dominio en bruto.

Consulta Servicios vinculados y Formularios del asistente.

6. Adapta la experiencia a cada página

Adapta el modo de visualización del asistente a la página en la que está el comprador.

Usa la plantilla base (superpuesta o integrada) y el botón de acción flotante en cada página. Los metadatos por página pueden aportar una descripción, sugerencias y contexto adicional. En una página de producto, esto mantiene una pregunta sencilla en su sitio; en una página de cuenta, hace que la conversación sea relevante para los pedidos del comprador.

Adapta el lenguaje visual de la tienda

Ajusta los colores de marca y de acento, las superficies, el texto, el botón principal y la cabecera de búsqueda para que encajen con el sitio. La apariencia se configura en la entidad y llega a la integración en vivo sin depender de un despliegue del sitio, así que puedes ajustarla sobre la página real.

Consulta la sección de apariencia de Lanzar un asistente.

7. Añade la integración y el contexto del comprador

Carga el runtime una sola vez y luego inicia el asistente en su contenedor.

<div id="seekdown-assistant-root"></div>
<script src="https://saas.seekdown.ai/js/seekdown-assistant.js"></script>
<script>
  skdwn.startAssistant({ assistantId: 'your-assistant-id', accessToken: 'your-api-key' });
</script>

Para usar la búsqueda de la tienda y el estilista flotante en la misma página, da a cada uno un contenedor e inícialos con sus propios ajustes de visualización:

skdwn.startAssistant({ assistantId: 'store-search', container: '#store-search',
  config: { settings: { baseTemplate: 'overlay' } } });
skdwn.startAssistant({ assistantId: 'stylist', container: '#stylist',
  config: { settings: { floatingActionButton: { useFloatingActionButton: true } } } });

Para las preguntas sobre pedidos, pasa una vez al comprador que ha iniciado sesión cuando se carga el asistente. userId y una cadena additionalContext concisa quedan entonces disponibles para cada respuesta y para la analítica.

skdwn.startAssistant({ assistantId: 'stylist', accessToken: 'your-api-key',
  userId: shopper.id,
  additionalContext: 'Signed-in shopper: ' + shopper.name + ', 2 open orders.' });

Antes del lanzamiento, genera una clave de API y añade tu sitio a los orígenes permitidos. Consulta Desplegar un asistente, incluidos los orígenes permitidos.

8. Constrúyelo y mantenlo con confianza

La mayor parte de esta construcción es configuración más un poco de código de integración. Si usas un cliente MCP como Claude Code, GitHub Copilot o Codex, puede trabajar directamente con tu espacio de trabajo de Seekdown. Puede ayudarte a crear la base de los endpoints de pedidos y stock, escribir la integración, redactar instrucciones de comportamiento y sugerencias, y probar el asistente en vivo a partir de un encargo claro. Consulta Conectar clientes MCP.

Prueba las preguntas que de verdad harán los compradores

Prueba algo más que indicaciones pulidas de demo. Incluye:

• Nombres exactos de productos y peticiones amplias como “un regalo para mi padre”.
• Preguntas sobre talla y ajuste.
• Preguntas sobre el estado de un pedido.
• Preguntas sobre productos que no vendes.

En cada resultado, revisa tanto la respuesta escrita como el producto enlazado. Una respuesta con la fuente equivocada sigue siendo un defecto.

Mantén la respuesta al día

Define una programación de captura que se ajuste a la frecuencia con la que cambia el catálogo. Tras actualizar un precio, un producto o una política, confirma el cambio en tres lugares: la página de origen, el registro del dataset y la respuesta del asistente.

Relacionado: Crear una base de conocimiento · Crear un centro de búsqueda · Crear un asistente · Servicios vinculados · Desplegar un asistente · Conectar clientes MCP. Para la versión de catálogo técnico de esta configuración, consulta Cómo se creó la demo del catálogo industrial.