Ajout au panier pour les boutiques personnalisées

Comment ça marche

1. 1Dans le Dashboard Rivet, ajoutez des produits avec un lien produit et une URL d'image pour que le chat affiche des cartes.
2. 2Vous pouvez définir external_id avec votre SKU / variant id pour que le callback ajoute le bon article.
3. 3Définissez window.RivetChat.onAddToCart avant SmartReply.init et appelez votre API panier à l'intérieur.

Exemple d'intégration par script

Collez dans le footer ou le layout du site. Remplacez le tenant id et les endpoints par les vôtres.

<!-- Rivet AI customer service widget -->
<link rel="stylesheet" href="https://rivet-chat.com/static/chat.css?v=39">
<script src="https://rivet-chat.com/static/chat.js?v=39" defer></script>
<script>
// Hook Add to cart before SmartReply.init
window.RivetChat = {
  onAddToCart: function (item) {
    // item: name, price, product_url, image_url, external_id, handle, variants…
    return fetch("/api/cart/add", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "same-origin",
      body: JSON.stringify({
        id: item.external_id || item.id,
        url: item.product_url,
        quantity: 1
      })
    }).then(function (r) {
      if (!r.ok) throw new Error("cart failed");
      // Open your side cart / update bag badge here
      if (window.MyStore && typeof window.MyStore.openCart === "function") {
        window.MyStore.openCart();
      }
    });
  }
};

window.addEventListener("DOMContentLoaded", function () {
  SmartReply.init({
    server: "https://rivet-chat.com",
    tenantId: "t-xxxxxxxx",
    platform: "custom"
  });
});
</script>

Exemple React / Next.js

À exécuter uniquement dans un client component. Renvoyez une Promise depuis le hook pour que Rivet affiche un toast succès/erreur.

// Client component (Next.js / React)
useEffect(() => {
  window.RivetChat = {
    onAddToCart: async (item) => {
      await yourCart.add({
        id: item.external_id || item.id,
        url: item.product_url,
        qty: 1,
      });
      yourCart.openDrawer();
    },
  };

  SmartReply.init({
    server: 'https://rivet-chat.com',
    tenantId: 'your-tenant-id',
    platform: 'custom',
  });
}, []);