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. La pública va en el frontend; la privada queda server-side y se usa para los uploads de catálogo.

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?

Escribe a support@askdialog.com y menciona que estás en la vía API Integration.