Copy page

Open in ChatGPT Open in Claude

Add to cart

When a shopper taps Add to cart on a chat product card, the widget calls your JavaScript so the item goes into your own cart. Website widget only.

Add the hook

On every page with the widget, before or after it loads:

<script>
  window.Kothok = window.Kothok || {};
  window.Kothok.onAddToCart = function (item) {
    // Add the item with your own cart code, e.g.:
    // return myCart.add({ sku: item.sku, qty: item.quantity });
    return true;
  };
  // Optional: an http(s) address or path for the Checkout link. Defaults to /checkout.
  window.Kothok.checkoutUrl = "/checkout";
</script>

When set, it handles Add to cart on every card, Shopify and WooCommerce included.

The item you receive

Field	Example	Notes
product_id	"K-77"	Your product id, or null.
variant_id	"4012345"	The chosen variant's id, or null.
sku	"KURTA-M"	The chosen variant's SKU, or null.
title	"Cotton Kurta"
size	"M"	The size, or the pack amount for a pack. null when there is none.
color	"Blue"	null when there is none.
option	"Slim"	A third choice such as Fit or Material, or null.
quantity	1	1 to 10.
price	1200	The chosen variant's price, else the lowest listed. A number or null.
currency	"BDT"	null when it is not known.
url	"https://your.shop/products/kurta"	The product page.

What to return

You return	The card
Anything but false, including nothing or a Promise that resolves	Shows Added ✓ and a Checkout link to checkoutUrl. The page gets a kothok:cart-updated event.
false, a thrown error, a rejected Promise, or no answer within 8 seconds	Opens the product page in a new tab instead, or offers an Open product page link if the browser blocks the tab.

Return a Promise for async adds. Refresh your cart icon on the event:

window.addEventListener("kothok:cart-updated", refreshMyCartIcon);

Test it

Run this in the browser console, then tap Add to cart in the chat:

window.Kothok.onAddToCart = (item) => { console.log("add", item); return true; };