Vue d'ensemble développeurs

Cette section couvre l’intégration frontend quand tu n’utilises pas l’app block Shopify ou le module Prestashop — typiquement un storefront custom ou headless. L’ingestion de data est séparée : voir Intégration du catalogue pour le flow d’upload (app Shopify, module Prestashop ou upload API).

Si tu es sur Shopify ou Prestashop managé et qu’il te faut juste câbler le catalogue, tu es dans la mauvaise section — va voir Installer sur Shopify ou Installer sur Prestashop.

Choisir selon ton framework

Ton frontend	Utilise ça
React (n’importe quel storefront — Hydrogen, Next.js, Remix, CRA custom / Vite, etc.)	@askdialog/dialog-react — DialogProductBlock, DialogInput
Vue 3 (Nuxt, Vite custom, etc.)	@askdialog/dialog-vue — mêmes composants, version Vue
Svelte / SvelteKit, SolidJS, Lit, Astro, vanilla JS	@askdialog/dialog-sdk — SDK vanilla, construis ton UI shell
Templating server-side (Twig, Blade, Liquid hors Shopify, ERB, etc.)	@askdialog/dialog-sdk — charge-le en <script> normal et appelle le SDK depuis ta glue client-side
Pas de dev frontend dispo, non-Shopify / non-Prestashop	Drop-in GTM — voie no-code, documentée dans Installation

Règle simple : s’il existe un package Dialog pour ton framework, utilise-le. N’utilise pas le SDK vanilla sur un codebase React ou Vue — tu réinventerais les composants.

Ce que tu obtiens

Composants (React, Vue)

• Un DialogProductBlock pré-construit pour les pages produit — render les suggestions et le point d’entrée vers l’assistant.
• Un DialogInput pour les pages hors-produit (homepage, blog, collection).
• Intégration du thème via le constructor SDK — couleurs, polices, forme des CTA.
• Tout le SDK dessous — tu peux toujours appeler client.sendProductMessage, client.registerAddToCartEvent, etc. quand c’est nécessaire.

SDK (vanilla)

• Classe avec callbacks addToCart / getProduct, sendProductMessage / sendGenericMessage, getSuggestions, méthodes de tracking, listeners d’events.
• Pas d’UI — tu construis la liste de questions et le champ input, en appelant les méthodes du SDK sur interaction utilisateur.

Prérequis pour chaque chemin

1. Inscris-toi sur app.askdialog.com/sign-up.
2. Crée ton organisation Dialog. Choisis un nom, sélectionne la carte API Integration, et configure :
   • Toutes les locales utilisées sur ton store.
   • Tous les domaines qui hébergent ton store (ex. mystore.com et fr.mystore.com comme entrées séparées).
3. Récupère tes clés API publique et privée depuis le dashboard. La publique va dans le frontend ; la privée reste côté serveur et sert aux uploads catalogue.

Workflow end-to-end

Créer compte → Créer organisation → Récupérer API keys
      ↓
Uploader catalogue (+ blog, pages optionnels)   [private key, côté serveur]
      ↓
Installer composants OU SDK, selon ton framework
      ↓
Câbler les callbacks addToCart et getProduct contre tes APIs
      ↓
Câbler le tracking pour side-cart et checkout (events hors assistant)
      ↓
Customiser le thème pour matcher ta marque

À lire ensuite

• Référence SDK — classe, méthodes, callbacks, types.
• Composants React — UI drop-in pour React.
• Composants Vue — UI drop-in pour Vue 3.
• Référence API — endpoints REST pour l’upload catalogue.
• Schéma du catalogue — le format JSON exact que ton catalogue doit respecter.
• Tracking SDK custom — câbler les events tracking depuis ton install SDK.

Besoin d’aide ?

Écris à support@askdialog.com et précise que tu es sur le chemin API Integration.