The Add-To-Cart feature allows visitors to add a product directly to their cart from a conversation with the Assistant. Its goal: to simplify the shopping experience without leaving the chat, by reducing frictions linked to traditional navigation.

How add-to-cart works

The add-to-cart journey unfolds in five steps:

• The Assistant recommends products to the visitor.
• The visitor clicks on “Add to cart” without leaving the conversation.
• The visitor selects the variants (size, color, etc.) if the product has any.
• The product is immediately added to the cart on your e-commerce website.
• A confirmation message is displayed in the conversation.

This feature is especially useful to speed up the purchase journey and boost conversions, while keeping the user engaged in the conversational assistance.

The Add-To-Cart feature is activated on request: contact your CSM to benefit from it. For Shopify and PrestaShop, the technical integration is automatic once the iAdvize app for Shopify or the iAdvize module for PrestaShop is installed.

The feature is also available in your mobile apps via the iAdvize SDKs for iOS, Android and Flutter (from version 3.2). The integration is done on the app side: see the developer documentation.

Cart access from the Shopping Panel

A cart button sits in the Shopping Panel header. On desktop, it appears next to the reduce button. On mobile, it appears in the opposite corner.

Selecting it opens the cart in a new tab. The conversation with the Assistant stays open in the original tab: the visitor checks their cart, then returns to continue browsing without losing the thread.

The button is displayed once two conditions are met:

• the Add-to-Cart feature is active on your website;
• the cart page address is set.

Product variant handling

Which products can be added to the cart

Only products present in your iAdvize catalog (knowledge source) can be added to the cart. When a product exists in several variants (for example a t-shirt available in red, blue and green, or in sizes S, M, L), all the variants of the same product group are offered to the visitor.

Available variant criteria

If the product exists in several variants, a selection panel is displayed in the conversation. The core fields taken into account are the following:

• Brand
• Color
• Size
• Material
• Condition
• Gender

In the example above, only one variant (format) is offered, but multiple variants can be proposed depending on the structure of your product catalog (colors, storage, size, etc.)

Availability status

Only products with the following statuses can be added to the cart:

• In stock
• Pre-order
• Available on order

Edge cases

Product without variants: If the recommended product exists in a single version only (no color, size or other variation), the selection panel is not displayed. The product is added straight to the cart as soon as the visitor clicks "Add to cart".

Ambiguous variants: In some cases, variant criteria can be ambiguous, for example when several similar products share the same group identifier. The system detects this situation and adapts the display to avoid confusion.

Add-to-Cart with Shopify

The Add-to-Cart feature is fully compatible with Shopify and activates automatically upon installation of the iAdvize app for Shopify, requiring no manual configuration or technical integration.

Check out our Shopify installation guide

To use this feature, the iAdvize main tag must be enabled within the app. Once active, your product catalog syncs automatically, retrieving all available variants (size, color, material, condition, etc.) to offer them dynamically during the add-to-cart process.

The entire process is fully automated and requires no additional action on your part.

Add-to-Cart with PrestaShop

The Add-to-Cart feature is fully compatible with PrestaShop and activates automatically once the iAdvize module for PrestaShop is installed, requiring no manual configuration or technical integration.

Check out our Prestashop installation guide

Fields such as color, size, material, and gender cannot be directly mapped to fixed fields. Instead, they are entered as product_details.

The entire process is fully automated and requires no additional action on your part.

Custom integration (other platforms)

If you do not use Shopify or PrestaShop, you must implement a JavaScript callback on your website to enable the Add-to-Cart feature.

Overview

This guide provides detailed steps for e-commerce websites to integrate their add-to-cart process with the AI Shopping Assistant. The iAdvize solution allows e-commerce businesses to leverage an Assistant capable of recommending products to customers. The goal of this guide is to help developers connect their existing add-to-cart functionality to a callback exposed by the iAdvize platform, ensuring a smooth experience when a customer clicks the add-to-cart button recommended by the Assistant.

Technical requirements for integration

For the “Add-To-Cart” button to work:

• You must implement a JavaScript callback on your website to listen to and process add-to-cart events.
• The callback is automatically triggered when a visitor clicks on the “Add to cart” button in the chat.

Understand the callback structure

The iAdvize platform exposes a callback function that developers can use to handle the add-to-cart process. When a customer clicks the add-to-cart button of a product recommended by the bot, the following JavaScript callback is triggered:

<script>
  window.iAdvizeInterface = window.iAdvizeInterface || [];
  window.iAdvizeInterface.push(function(iAdvize) {
    // Register the Add-to-Cart callback
    iAdvize.on("addToCart:clicked", ({productId, resolve, reject}) => {
      // Custom implementation of Add-to-Cart by the website
      // Perform Add-to-Cart logic here
      const success = true; // Replace with real logic

      if (success === true) {
        resolve(true); // iAdvize will know the action succeeded
      } else {
        resolve(false); // or reject('error message')
      }
    });
  });
</script>

Key steps in the add-to-cart process

• Callback registration: The script initializes the window.iAdvizeInterface array if it doesn’t already exist. It then pushes a function to be executed once the iAdvize interface is loaded.

• Listening for add-to-cart events: cb method of on("addToCart:clicked", cb)listens for add-to-cart events triggered by customer interaction with Assistant-recommended products.

• Executing the add-to-cart logic: When called, the cb function receives a productId as an argument, representing the product the customer wants to add to the cart.

• Complete the operation: The function must notify by using the resolve or reject methods
  received as arguments to indicate the status of the operation:

  • Resolve with True if successful.

  • Resolve with False or reject in case of failure.

Implement the add-to-cart process

Follow these steps to implement your custom logic:

• Access the productId: Use the productId provided in the callback to identify the product.

• Execute your add-to-cart logic:

  • Validate the productId, check product availability, or perform other necessary checks.

  • Call your backend API or update the cart state.

While the logic is running, a loading state is shown on the button to enhance the customer experience.

• Resolve or reject the Promise:

  • If successful, resolve with True.

  • If an error occurs, resolve with False or reject with an appropriate error message.

Example implementation:

<script>
  window.iAdvizeInterface = window.iAdvizeInterface || [];
  window.iAdvizeInterface.push(function(iAdvize) {
    // Register the callback for Add-to-Cart events
    iAdvize.on("addToCart:clicked", ({productId, resolve, reject}) => {
        // From here, the loading state is automatically enabled

        // Perform Add-to-Cart logic
        addToCart(productId)
          .then((response) => {

            if (response.success) {
              // Successfully added to cart
              // Loading state will be disabled
              resolve(true);
            } else {
              // Failed to add to cart
              // Loading state will be disabled
              resolve(false);
            }
          })
          .catch((error) => {
            reject(error);
          });
    });
  });

  function addToCart(productId) {
    // Example implementation of adding to cart (call your server-side API or update cart state here)
    return fetch('/api/cart/add', {
      method: 'POST',
      body: JSON.stringify({ productId: productId }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(response => response.json());
  }
</script>

Handle confirmation messages

If theon("addToCart:clicked") callback resolves successfully, a confirmation message is displayed in iAdvize indicating that the item has been added to the cart.

If it resolves with false or is rejected, a failure message will be shown to the customer.

Test your integration

To make the add-to-cart button functional, you must implement the on("addToCart:clicked", cb) method as described. Without it, the button will not be displayed.

To test before going live:

Using Google Chrome:

1. Open your JavaScript file in an editor and copy the entire on("addToCart:clicked", cb) code.

2. Go to the page where you want to test.

3. Right-click > “Inspect” to open Chrome DevTools.

4. Go to the “Console” tab.

5. Paste the code.

6. Press Enter.

7. Start a conversation and search for a product to trigger the "Product Discovery" use case.

8. When the Assistant recommends a product, the “Add to Cart” button should appear below the “View Product” link.

9. Click the button to trigger the callback. Monitor the console for messages or errors.

Scenarios to test:

• Success:

  • Product is correctly added to the cart.

  • Confirmation message is displayed.

  • Loading state appears during the process.

• Failure:

  • A failure message is displayed.

  • The button exits the loading state.

Go live

Once testing is complete and everything works as expected, you can deploy the integration to production. Monitor the implementation for any unexpected issues.

Best practices

• Ensure each product has a unique identifier (productId) consistent with your e-commerce system.
• Ensure the add-to-cart logic is robust, especially in cases of product unavailability or technical errors.
• Anticipate variant handling by structuring your catalog with fields like Item Group ID, color, size, etc.

Points of attention