Developers overview

This section covers the frontend integration path when you’re not using the Shopify app block or the Prestashop module — typically a custom or headless storefront. Data ingestion is separate: see Catalog integration for the upload flow (Shopify app, Prestashop module, or API upload).

If you’re on managed Shopify or Prestashop and just need the catalog wired, you’re in the wrong section — go to Install on Shopify or Install on Prestashop.

Pick by framework

Your frontend	Use this
React (any storefront — Hydrogen, Next.js, Remix, custom CRA / Vite, etc.)	@askdialog/dialog-react — DialogProductBlock, DialogInput
Vue 3 (Nuxt, custom Vite, etc.)	@askdialog/dialog-vue — same components, Vue flavor
Svelte / SvelteKit, SolidJS, Lit, Astro, vanilla JS	@askdialog/dialog-sdk — vanilla SDK, build your own UI shell
Server-side templating (Twig, Blade, Liquid outside Shopify, ERB, etc.)	@askdialog/dialog-sdk — load it as a normal <script> and call the SDK from your client-side glue
No frontend dev available, non-Shopify / non-Prestashop	GTM drop-in — no code path, documented under Installation

Rule of thumb: if there’s a Dialog package for your framework, use that. Don’t reach for the vanilla SDK on a React or Vue codebase — you’d be reinventing the components.

What you get

Components (React, Vue)

• A pre-built DialogProductBlock for product pages — renders suggestions and the assistant entry point.
• A DialogInput for non-product pages (homepage, blog, collection).
• Theme integration via the SDK constructor — colors, fonts, CTA shape.
• The full SDK underneath — you can still call client.sendProductMessage, client.registerAddToCartEvent, etc. when you need to.

SDK (vanilla)

• Class with addToCart / getProduct callbacks, sendProductMessage / sendGenericMessage, getSuggestions, tracking methods, event listeners.
• No UI — you build the question list and the input field, calling the SDK methods on user interaction.

Prerequisites for every path

1. Sign up at app.askdialog.com/sign-up.
2. Create your Dialog organization. Choose a name, select the API Integration card, and configure:
   • All locales you use on your store.
   • All domains that host your store (e.g. mystore.com and fr.mystore.com as separate entries).
3. Get your public and private API keys from the dashboard. The public key goes in the frontend; the private key stays server-side and is used for catalog uploads.

End-to-end workflow

Create account → Create organization → Get API keys
      ↓
Upload catalog (+ optional blog, pages)        [private key, server-side]
      ↓
Install components OR SDK, depending on your framework
      ↓
Wire addToCart and getProduct callbacks against your APIs
      ↓
Wire tracking for side-cart and checkout (events outside the assistant)
      ↓
Customize theme to match your brand

What to read next

• SDK reference — class, methods, callbacks, types.
• React components — drop-in UI for React.
• Vue components — drop-in UI for Vue 3.
• API reference — REST endpoints for catalog upload.
• Catalog schema — the exact JSON shape your catalog must respect.
• Tracking SDK custom — wiring tracking events from your SDK install.

Need help?

Email support@askdialog.com and mention you’re on the API integration path.