Integrating Add To Cart
Connecting user shopping actions occurring inside the chat bot to your host store logic.
Overview
When your customer interacting directly with Loop Smart AI clicks "Add to Cart" inside a product carousel or step message, the product is NOT natively kept in our cart memory. Instead, we simply post an event payload mapping Which Product, How Many, and (if present) Which Variant were selected down to your host webpage.
Your host page is responsible for reacting to this notification by actually appending the product data to your native E-commerce shopping cart, which usually updates your cart icon counter in the top-right header!
We rely on the global JavaScript browser standard "message" event listener for pushing those notifications.
How to capture the Event in Your Own Site?
Since almost all webshop integrations contain a method to append cart details, you just have to ask your developer or frontend team to drop this code inside the page body </body> or a global utility function:
// A simple global listener to intercept postMessage payloads.
window.addEventListener("message", (event) => {
// Event 'data' contains all the info dispatched by the assistant
const data = event.data;
// Let's filter to see if this event came from Loops AI specifically requesting 'addToCart'
if (data && data.action === "addToCart") {
// The data body will definitively include at minimum:
const skuCode = data.productCode; // Example: 'SHR-011'
const itemQuantity = data.quantity || 1; // Default is mostly 1 interaction
// 1- Feed these two directly into your native shop addToCart logic
console.log(`The customer requested ${itemQuantity} of item ${skuCode} to their cart.`);
// 2- (Optional) When dealing with variations, it might output a VariantId
const varIdentifier = data.variantId; // e.g., "Medium" or "64GB"
}
});