Composants React

@askdialog/dialog-react fournit des composants prêts à l’emploi par-dessus @askdialog/dialog-sdk. Utilise-le quand tu veux une UI rapide et thémée sans la construire de zéro.

Requiert React 19+.

Install

npm install @askdialog/dialog-sdk @askdialog/dialog-react

Importe la feuille de style une fois à l’entrée de ton app :

import '@askdialog/dialog-react/style.css'

Initialiser le client SDK

Instancie le SDK une fois (typiquement au scope module ou dans un provider top-level), puis passe-le à chaque composant.

import { Dialog, type SimplifiedProduct } from '@askdialog/dialog-sdk'

const client = new Dialog({
  apiKey: 'YOUR_PUBLIC_API_KEY',
  locale: 'fr',
  callbacks: {
    addToCart: async ({ productId, quantity, variantId }) => {
      // Appelle ton API panier, refresh ton UI
    },
    getProduct: async (productId, variantId): Promise<SimplifiedProduct> => {
      // Renvoie ton produit au format SimplifiedProduct
    },
  },
})

Voir la Référence SDK pour toutes les options du constructor.

DialogProductBlock

Le composant principal. Pose-le sur une page produit pour render les suggestions de questions générées par l’IA et le point d’entrée vers l’assistant.

import { DialogProductBlock } from '@askdialog/dialog-react'

function ProductPage({ product }) {
  return (
    <DialogProductBlock
      client={client}
      productId={product.id}
      productTitle={product.title}
      selectedVariantId={product.currentVariantId}
    />
  )
}

Props

Prop	Type	Requis	Défaut	Description
client	Dialog	Oui	—	Instance SDK depuis new Dialog(...).
productId	string	Oui	—	L’ID du produit affiché. Doit matcher l’ID dans ton catalogue.
productTitle	string	Oui	—	Nom affiché du produit.
selectedVariantId	string	Non	—	La variante actuellement sélectionnée. Passe-la chaque fois que l’utilisateur change de variante pour que l’assistant ait le contexte.
enableInput	boolean	Non	true	Affiche le champ de saisie sous les suggestions. Mets à false si tu veux seulement les suggestions.

DialogInput

Un champ de saisie autonome pour poser une question libre. Utile comme point d’entrée sur les pages sans contexte produit unique (homepage, blog, collection).

import { DialogInput } from '@askdialog/dialog-react'

function Homepage() {
  return (
    <DialogInput
      client={client}
      productId="homepage"
      productTitle="Homepage"
    />
  )
}

Props

Prop	Type	Requis	Description
client	Dialog	Oui	Instance SDK.
productId	string	Oui	Identifiant stable du contexte (ex. "homepage", "collection-ete").
productTitle	string	Oui	Label lisible du contexte.

Layout typique

Un setup courant :

• <DialogInput> sur la homepage comme point d’entrée discovery.
• <DialogProductBlock> sur chaque PDP, entre la galerie et la description.
• Un handler de changement de variante qui met à jour la prop selectedVariantId.

Theming

Les composants héritent du thème passé au constructor SDK. Mets à jour les couleurs de marque, les polices, la forme des CTA, et les tailles de police spécifiques aux composants :

const client = new Dialog({
  apiKey: 'YOUR_PUBLIC_API_KEY',
  locale: 'fr',
  theme: {
    backgroundColor: '#ffffff',
    primaryColor: '#000000',
    ctaTextColor: '#ffffff',
    ctaBorderType: 'rounded',
    capitalizeCtas: false,
    fontFamily: 'Inter, sans-serif',
    title: { fontSize: '18px', color: '#1a1a1a' },
    description: { fontSize: '14px', color: '#666666' },
    content: { fontSize: '14px', color: '#333333' },
  },
  callbacks: { /* ... */ },
})

Étapes suivantes

• Référence SDK — API complète de client.
• Tracking — SDK custom — câble le tracking side-cart et checkout.
• Problèmes d’ajout au panier — garder ton UI synchro.