Créer un assistant de boutique en ligne comme notre démo

Voir la démo

La démo e-commerce transforme le catalogue d’une boutique en deux expériences d’achat utiles. Demandez « un cadeau pour quelqu’un qui adore la nature, à moins de 60 € » et elle renvoie une recommandation en langage clair avec de vrais produits et des liens vers les sources.

Ce guide présente la construction dans l’ordre qui rend les décisions les plus faciles à suivre : partir du catalogue, choisir les expériences d’achat, ajouter des données en direct là où elles comptent, puis tester le résultat.

1. Partir du catalogue

Le catalogue est la source de vérité de l’assistant. Créez un jeu de données mémoire, puis lancez une tâche de capture de site web sur les pages qui répondent à de vraies questions d’achat.

À inclure : les pages produits et catégories, les guides des tailles et de coupe, et l’aide sur la livraison et les retours.

À exclure : les pages panier, paiement, compte et marketing. Elles ajoutent du bruit sans aider l’assistant à répondre à la question d’un client.

Une fois la capture terminée, vérifiez un échantillon d’enregistrements. Les noms de produits, prix, URL canoniques, conseils de taille et conditions de retour doivent tous être présents et lisibles. Un bloc de navigation en double ou une feuille de style d’impression peut affaiblir la récupération dans toute l’expérience.

Consultez Créer une base de connaissances et Configurer les tâches de capture de données.

2. Donner à chaque intention d’achat la bonne interface

La démo utilise deux expériences, car les clients arrivent avec des besoins différents.

Le centre de recherche apparaît sur la page d’accueil et sur sa propre page de recherche. Le chat flottant reste disponible dans toute la boutique. Une recherche produit rapide reste ainsi rapide, sans obliger le client qui a besoin de conseils à tout recommencer dans un champ de recherche.

Partager la base de connaissances

Les deux expériences ont des points d’entrée, des modes d’affichage et des capacités différents, mais elles utilisent un seul jeu de données. C’est voulu :

• Des réponses cohérentes. Une information produit ne doit pas changer selon l’endroit où l’on pose la question.
• Un catalogue maintenu une seule fois. Réindexez un changement une fois et les deux expériences le reçoivent.
• Des capacités ajoutées sans fragmenter les connaissances. Le chat peut utiliser des formulaires et des recherches en direct tout en répondant à partir du même catalogue que la recherche.

Voyez la base de connaissances comme la fiche commune de la boutique, et les deux expériences comme deux façons d’y accéder.

« Un catalogue, deux façons d’aider un client à se décider. »

Définir un personnage ciblé et utile

Le styliste est un conseiller personnel pour cette boutique, pas un assistant généraliste. Ses instructions de comportement fixent le rôle et le ton, puis précisent les garde-fous :

• Ne recommander que des articles présents dans le catalogue.
• Citer le produit recommandé.
• Ne pas annoncer de prix ou de niveau de stock invérifiable.
• Le dire lorsque les informations disponibles ne répondent pas à la question.

Ajoutez un nom, un avatar et un message d’accueil adaptés à la boutique. Des instructions claires et un rôle ciblé rendent l’assistant plus fiable qu’une consigne vague du type « assistant serviable ».

Consultez Créer un assistant et Lancer un assistant.

3. Configurer la recherche pour des questions naturelles

Créez un centre de recherche intelligent sur le jeu de données partagé du catalogue. Contrairement à un champ de recherche par mots-clés, il peut renvoyer une réponse argumentée accompagnée des fiches produits qui l’étayent.

Utilisez un texte indicatif qui invite à poser une vraie question, comme « Trouvez un cadeau, une tenue ou la bonne taille… ». Lorsque la recherche est vide, affichez un court message d’accueil et des produits mis en avant. La page est ainsi utile avant même que le client ait tapé quoi que ce soit.

Des suggestions qui montrent de vraies capacités

Les suggestions sont du contenu produit. Chacune doit mener à une réponse que le catalogue ou un service en direct peut réellement fournir.

• Un cadeau pour quelqu’un qui adore la nature, à moins de 60 €
• Composer une tenue smart casual pour moins de 150 €
• Quel sac à dos choisir pour un trajet quotidien sous la pluie ?
• Où en est ma commande et quand arrivera-t-elle ?

Ensemble, ces exemples couvrent les cadeaux, le style, la comparaison de produits et l’aide sur le compte en direct. Consultez Créer un centre de recherche, Créer un centre de recherche à partir du contenu de votre site et Rédiger des suggestions utiles pour un centre de recherche.

4. Utiliser des formulaires quand quelques détails améliorent la réponse

Le texte suffit pour une question directe comme « Quel sac à dos choisir pour un trajet sous la pluie ? ». Le style et la taille demandent un peu plus de contexte. La démo le recueille avec de courts formulaires dans la conversation.

Pour chaque formulaire, configurez trois choses : quand l’afficher, quels champs demander et ce qui se passe à l’envoi. Un formulaire bien placé transforme une question de navigation ouverte en demande structurée, sans imposer au client une longue conversation.

Consultez Capturer des prospects avec des formulaires.

5. Connecter des actions en direct pour les questions de compte

Le contenu du catalogue répond à que vendez-vous ? Les actions en direct répondent à où en est ma commande ?

Enregistrez chaque recherche en direct comme service connecté. L’assistant appelle le service par un ID court ; le véritable point de terminaison et les éventuels en-têtes secrets restent côté serveur et n’atteignent donc pas le navigateur.

La configuration est volontairement réduite :

1. Donnez au service un ID, une méthode et une URL.
2. Utilisez des espaces réservés {{params.x}} pour les valeurs d’URL propres à chaque appel. Elles sont encodées pour l’URL.
3. Conservez tout secret dans un en-tête d’authentification.
4. Transmettez l’ID du service comme proxyId depuis un formulaire, ou appelez-le directement depuis un widget ou un bouton.

// Look up the signed-in shopper's order, then render the reply in the conversation.
skdwn.instance.executeProxyRequest(
  'order-status',            // the linked-service ID
  { orderId },               // request body (POST)
  (res) => renderReply(res), // endpoint response
  { locale: 'en' }           // fills {{params.locale}} in the service URL
);

Faites renvoyer au point de terminaison une réponse courte et prête à afficher : un reply en markdown et une liste references. C’est plus simple et plus fiable que de demander à l’assistant de mettre en forme du JSON métier brut.

Consultez Services connectés et Formulaires de l’assistant.

6. Adapter l’expérience à la page

Adaptez le mode d’affichage de l’assistant à la page où se trouve le client.

Utilisez le modèle de base (superposition ou intégré) et le bouton d’action flottant page par page. Des métadonnées par page peuvent fournir une description, des suggestions et un contexte supplémentaire. Sur une page produit, une question simple reste ainsi sur place ; sur une page de compte, la conversation devient pertinente pour les commandes du client.

Reprendre l’identité visuelle de la boutique

Réglez les couleurs de marque et d’accent, les surfaces, le texte, le bouton principal et l’en-tête de recherche pour qu’ils correspondent au site. L’apparence est configurée sur l’entité et s’applique à l’intégration en ligne indépendamment d’un déploiement du site : vous pouvez donc l’ajuster sur la vraie page.

Consultez la section sur l’apparence de Lancer un assistant.

7. Ajouter l’intégration et le contexte client

Chargez le script d’exécution une seule fois, puis démarrez l’assistant dans son conteneur.

<div id="seekdown-assistant-root"></div>
<script src="https://saas.seekdown.ai/js/seekdown-assistant.js"></script>
<script>
  skdwn.startAssistant({ assistantId: 'your-assistant-id', accessToken: 'your-api-key' });
</script>

Pour utiliser la recherche de la boutique et le styliste flottant sur la même page, donnez à chacun un conteneur et démarrez-les avec leurs propres paramètres d’affichage :

skdwn.startAssistant({ assistantId: 'store-search', container: '#store-search',
  config: { settings: { baseTemplate: 'overlay' } } });
skdwn.startAssistant({ assistantId: 'stylist', container: '#stylist',
  config: { settings: { floatingActionButton: { useFloatingActionButton: true } } } });

Pour les questions de commande, transmettez le client connecté une seule fois, au chargement de l’assistant. userId et une chaîne additionalContext concise sont alors disponibles pour chaque réponse et pour l’analytique.

skdwn.startAssistant({ assistantId: 'stylist', accessToken: 'your-api-key',
  userId: shopper.id,
  additionalContext: 'Signed-in shopper: ' + shopper.name + ', 2 open orders.' });

Avant le lancement, générez une clé d’API et ajoutez votre site aux origines autorisées. Consultez Déployer un assistant, notamment les origines autorisées.

8. Construire et maintenir en toute confiance

L’essentiel de cette construction relève de la configuration, plus un peu de code d’intégration. Si vous utilisez un client MCP comme Claude Code, GitHub Copilot ou Codex, il peut travailler directement avec votre espace Seekdown. Il peut aider à créer les points de terminaison de commande et de stock, écrire l’intégration, rédiger les instructions de comportement et les suggestions, et tester l’assistant en ligne à partir d’un brief clair. Consultez Connecter des clients MCP.

Tester les questions que les clients poseront vraiment

Ne testez pas seulement des questions de démo soignées. Incluez :

• Des noms de produits exacts et des demandes larges comme « un cadeau pour mon père ».
• Des questions de taille et de coupe.
• Des questions sur l’état d’une commande.
• Des questions sur des produits que vous ne vendez pas.

Pour chaque résultat, vérifiez à la fois la réponse rédigée et le produit lié. Une réponse avec la mauvaise source reste un défaut.

Garder les réponses à jour

Définissez un calendrier de capture adapté à la fréquence des changements du catalogue. Après une mise à jour de prix, de produit ou de politique, confirmez le changement à trois endroits : la page source, l’enregistrement du jeu de données et la réponse de l’assistant.

À lire aussi : Créer une base de connaissances · Créer un centre de recherche · Créer un assistant · Services connectés · Déployer un assistant · Connecter des clients MCP. Pour la version catalogue technique de cette configuration, consultez Comment la démo de catalogue industriel a été construite.