Vista general developers

Esta sección cubre la integración frontend cuando no usas el app block de Shopify o el módulo Prestashop: típicamente un storefront custom o headless. La ingestión de data es separada: ver Integración del catálogo para el flow de upload (app Shopify, módulo Prestashop o upload API).

Si estás en Shopify o Prestashop gestionado y solo necesitas conectar el catálogo, estás en la sección equivocada: ve a Instalar en Shopify o Instalar en Prestashop.

Elige según tu framework

Tu frontend	Usa esto
React (cualquier storefront: Hydrogen, Next.js, Remix, CRA custom / Vite, etc.)	@askdialog/dialog-react: DialogProductBlock, DialogInput
Vue 3 (Nuxt, Vite custom, etc.)	@askdialog/dialog-vue: mismos componentes, sabor Vue
Svelte / SvelteKit, SolidJS, Lit, Astro, vanilla JS	@askdialog/dialog-sdk: SDK vanilla, construyes tu UI shell
Templating server-side (Twig, Blade, Liquid fuera de Shopify, ERB, etc.)	@askdialog/dialog-sdk: cárgalo como <script> normal y llama al SDK desde tu glue client-side
Sin dev frontend disponible, no Shopify / no Prestashop	Drop-in GTM: vía no-code, documentada en Instalación

Regla simple: si hay un paquete Dialog para tu framework, úsalo. No uses el SDK vanilla sobre un codebase React o Vue: estarías reinventando los componentes.

Lo que obtienes

Componentes (React, Vue)

• Un DialogProductBlock pre-construido para páginas de producto: renderiza sugerencias y el punto de entrada al asistente.
• Un DialogInput para páginas sin producto único (homepage, blog, colección).
• Integración del theme vía el constructor SDK: colores, fuentes, forma de los CTA.
• Todo el SDK por debajo: puedes seguir llamando client.sendProductMessage, client.registerAddToCartEvent, etc. cuando lo necesites.

SDK (vanilla)

• Clase con callbacks addToCart / getProduct, sendProductMessage / sendGenericMessage, getSuggestions, métodos de tracking, listeners de eventos.
• Sin UI: tú construyes la lista de preguntas y el campo input, llamando a los métodos del SDK en interacción del usuario.

Prerrequisitos para cada vía

1. Regístrate en app.askdialog.com/sign-up.
2. Crea tu organización Dialog. Elige un nombre, selecciona la card API Integration, y configura:
   • Todas las locales que usas en tu tienda.
   • Todos los dominios que alojan tu tienda (ej. mystore.com y fr.mystore.com como entradas separadas).
3. Obtén tus API keys pública y privada desde el dashboard (ver más abajo).

Dónde encontrar tus API keys

En el dashboard Dialog, ve a Account Settings → General. Tu API key pública está al final de la página: haz clic en Copy para copiarla.

Tu clave pública se usa en tu código frontend (app block de Shopify, snippet GTM, init del SDK, etc.). Tu clave privada se mantiene server-side y solo es necesaria para los uploads de catálogo vía API.

Workflow end-to-end

Crear cuenta → Crear organización → Obtener API keys
      ↓
Subir catálogo (+ blog, pages opcionales)        [private key, server-side]
      ↓
Instalar componentes O SDK, según tu framework
      ↓
Conectar callbacks addToCart y getProduct contra tus APIs
      ↓
Conectar el tracking para side-cart y checkout (eventos fuera del asistente)
      ↓
Customizar theme para matchear tu marca

Qué leer después

• Referencia del SDK: clase, métodos, callbacks, tipos.
• Componentes React: UI drop-in para React.
• Componentes Vue: UI drop-in para Vue 3.
• Referencia de la API: endpoints REST para el upload de catálogo.
• Schema del catálogo: el formato JSON exacto que tu catálogo debe respetar.
• Tracking SDK custom: conectar eventos tracking desde tu instalación SDK.

¿Necesitas ayuda?

Si la documentación no responde, Antes de contactar con soporte lista qué preparar. Escribe después a paul@askdialog.com mencionando que estás en la vía API Integration.