Aller au contenu

Trouver votre chemin d'installation

Installer Dialog implique deux préoccupations distinctes, qui ne vivent pas toujours au même endroit :

  • Ingestion de data — uploader votre catalogue produit (et optionnellement blog / pages) pour que l’assistant réponde juste.
  • Intégration frontend — embedder le widget assistant sur votre storefront pour que les visiteurs puissent l’utiliser.

Certains chemins couvrent les deux d’un coup (app Shopify, module Prestashop). D’autres stacks demandent un mix (par ex. Shopify headless : l’app gère l’ingestion, vous embeddez le frontend vous-même).

Trouvez votre stack ci-dessous. Chaque carte renvoie vers les deux pages à suivre : une pour l’ingestion de data, une pour l’embed frontend.

Réponses aux questions de routage les plus fréquentes

Section intitulée « Réponses aux questions de routage les plus fréquentes »

« App Shopify, GTM, ou SDK — lequel choisir ? » Si votre boutique tourne sur Shopify, c’est toujours l’app Shopify — jamais GTM, jamais le SDK seul (sauf headless, ci-dessous). Sur Prestashop, toujours le module. GTM n’existe que pour les boutiques qui ne sont sur aucune des deux plateformes et sans développeur frontend — un chemin beta, de dernier recours, avec de vrais compromis.

« Nous sommes sur Shopify headless (Hydrogen, Next.js…). Qu’est-ce qui va où ? » Séparez les deux préoccupations : installez l’app Shopify pour la synchro catalogue, puis embeddez le widget avec @askdialog/dialog-react, @askdialog/dialog-vue ou le SDK. L’app block ne peut pas se rendre en dehors du renderer Online Store. Détails dans Installer sur Shopify → Headless.

« Je n’ai besoin que du catalogue. » Direction Intégration du catalogue. Shopify et Prestashop synchronisent automatiquement ; tout le reste passe par un upload via l’API selon le schéma du catalogue.

« Le widget est en ligne — il ne me manque que le tracking. » Direction la vue d’ensemble du tracking. Elle indique, par chemin d’installation, quels events sont automatiques et quels deux events site-level votre équipe doit câbler.

« API, SDK, package React, package Vue — à quoi sert chacun ? » L’API REST est server-side, uniquement pour l’upload du catalogue et du contenu. Le SDK et les packages React / Vue sont frontend, pour embedder le widget. Table de routage complète dans la vue d’ensemble développeurs.

« Qu’est-ce que je peux configurer moi-même, et qu’est-ce qui demande un développeur ? » Tout ce qui est dans le dashboard Dialog est self-serve : documents d’entraînement, guidelines, identité de l’assistant, personnalisation visuelle, Personal Shopper. Le code n’est nécessaire que pour les embeds sur storefront custom, le câblage GTM, la glue de rafraîchissement du panier et les uploads de catalogue custom. La carte complète des responsabilités est dans Avant de contacter le support.

Ce que votre équipe doit faire dépend du chemin :

  • Merchant Shopify ou Prestashop → vous installez l’app ou le module vous-même depuis le back office. Pas besoin de dev pour un setup standard ; quelques minutes de clics. Votre catalogue se synchronise automatiquement.
  • Thème Shopify legacy (< 2.0) → même install, mais un dev (le vôtre ou votre agence) doit coller quelques snippets dans votre thème — généralement moins d’une heure.
  • Shopify headless, ou n’importe quel storefront custom avec des devs frontend → vos devs intègrent Dialog dans le code de votre storefront. Ils ont le contrôle total sur la façon dont l’assistant se connecte à votre panier et à vos pages produit, donc ça s’imbrique proprement dans votre checkout. Comptez quelques heures à un jour de travail frontend.
  • Non-Shopify / non-Prestashop, sans dev frontend dispo → utilisez Google Tag Manager (Beta). Vous configurez depuis votre compte GTM, pas de code touché. Trade-off : le widget se charge après le reste de la page, donc les visiteurs ont un délai et un layout shift, et ça ne colle pas tout à fait au look de votre site. Chemin de dernier recours — à prendre seulement si une install SDK est impossible.

Options d’intégration frontend pour stacks custom ou headless

Section intitulée « Options d’intégration frontend pour stacks custom ou headless »

Si l’ingestion de data est gérée mais qu’il faut quand même embedder l’assistant sur un frontend custom, partagez ceci avec vos devs :

  • React@askdialog/dialog-reactDialogProductBlock et DialogInput drop-in.
  • Vue 3@askdialog/dialog-vue — mêmes composants, version Vue.
  • Autres frameworks JS (Svelte, SolidJS, Lit, vanilla, templating server-side genre Twig / Blade / ERB) → @askdialog/dialog-sdk — SDK vanilla, l’équipe construit l’UI shell autour.

Le refresh UI du panier (icône, bulle, mini-cart, drawer) est le souci #1, sur toutes les plateformes. Une fois Dialog installé, ouvrez l’assistant sur une page produit, ajoutez un produit, et vérifiez que votre UI panier se met à jour sans recharger la page. Si non, voir Problèmes d’ajout au panier — la solution dépend du chemin d’install.