Vue d'ensemble développeurs

Cette section couvre l’intégration frontend quand vous n’utilisez 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 vous êtes sur Shopify ou Prestashop managé et qu’il vous faut juste câbler le catalogue, vous êtes dans la mauvaise section : allez voir Installer sur Shopify ou Installer sur Prestashop.

Choisir selon votre framework

Votre frontend	Utilisez ç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, construisez votre UI shell
Templating server-side (Twig, Blade, Liquid hors Shopify, ERB, etc.)	@askdialog/dialog-sdk : chargez-le en <script> normal et appelez le SDK depuis votre 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 votre framework, utilisez-le. N’utilisez pas le SDK vanilla sur un codebase React ou Vue : vous réinventeriez les composants.

Ce que vous obtenez

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 : vous pouvez 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 : vous construisez la liste de questions et le champ input, en appelant les méthodes du SDK sur interaction utilisateur.

Prérequis pour chaque chemin

1. Inscrivez-vous sur app.askdialog.com/sign-up.
2. Créez votre organisation Dialog. Choisissez un nom, sélectionnez la carte API Integration, et configurez :
   • Toutes les locales utilisées sur votre store.
   • Tous les domaines qui hébergent votre store (ex. mystore.com et fr.mystore.com comme entrées séparées).
3. Récupérez vos clés API publique et privée depuis le dashboard (voir ci-dessous).

Où trouver vos clés API

Dans le dashboard Dialog, allez dans Account Settings → General. Votre clé API publique est affichée en bas de la page : cliquez sur Copy pour la copier.

Votre clé publique s’utilise dans votre code frontend (app block Shopify, snippet GTM, init SDK, etc.). Votre clé privée reste côté serveur et n’est nécessaire que pour les uploads catalogue via l’API.

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 votre framework
      ↓
Câbler les callbacks addToCart et getProduct contre vos APIs
      ↓
Câbler le tracking pour side-cart et checkout (events hors assistant)
      ↓
Customiser le thème pour matcher votre 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 votre catalogue doit respecter.
• Tracking SDK custom : câbler les events tracking depuis votre install SDK.

Besoin d’aide ?

Si la doc ne répond pas, Avant de contacter le support liste quoi préparer. Écrivez ensuite à paul@askdialog.com en précisant que vous êtes sur le chemin API Integration.