Let the chat add products to the cart

Shops on Shopify get this by themselves: see Chat Revenue on Shopify. On any other shop, the chat can't put a product in your cart on its own, so you hand it a small function that does. Once it's there, product cards in the chat get an Add to cart button, and Chat Revenue can show sales driven by chat.

Register a handler with window.Zuzana.onAddToCart

Add this to every page of your shop, since the chat can be opened anywhere:

<script>
  (function () {
    function register() {
      window.Zuzana.onAddToCart(async function (item) {
        await yourShop.addToCart(item.variant_id, item.quantity);
      });
    }
    if (window.Zuzana) {
      register();
    } else {
      window.addEventListener('zuzana-loaded', register, { once: true });
    }
  })();
</script>

Replace yourShop.addToCart with the code your own Add to cart button runs. Then your cart counter, mini cart and any confirmation you show update as usual. The last lines wait for the chat script, in case your page runs this first.

You don't need to change any settings. The button shows up as soon as a handler is registered.

What your handler receives

  • variant_id: the product id from your product feed, for the exact variant the customer picked. Report the same id as variant_id when you report the order.
  • product_id: the id of the product it belongs to, when your feed has one.
  • quantity: how many to add.
  • title: the product name, with the variant name if there is one.

The same ids are also there as variantId and productId.

The button only shows on products with a price above 0. For a product with several variants, the customer picks one first.

When adding fails

If the product could not be added, throw an error, or return a promise that rejects. The chat then tells the customer Sorry, we couldn't add that to your cart. Please try again. and records nothing.

When your handler finishes without an error, the chat says Added to your cart. and records the add. That record is what counts the order as a sale driven by chat when the customer buys it, as long as the order itself reaches Zuzana: see Report orders to Zuzana.

Check that it works

  1. Open the chat on your shop and ask for a product.
  2. Click Add to cart on a product card.
  3. Check that the chat says Added to your cart. and that the product is in your cart.

If the button doesn't show, check that your handler runs on the page, and ask Zuzana whether your chat has a custom cart setting that overrides it.