The Add-to-Cart feature allows your visitors to add a product recommended by your Assistant directly to their cart, without leaving the conversation. It simplifies the shopping experience by reducing the friction linked to navigation and speeds up the conversion journey, while keeping the visitor engaged in the conversation.

How add-to-cart works

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

1. The Assistant recommends products to the visitor during the conversation.
2. The visitor clicks on “Add to cart” directly from the conversation.
3. The visitor selects the variants (size, color, etc.) if the product has any.
4. The product is added to the cart on your e-commerce website and a confirmation is displayed in the conversation, with a “Go to cart” button that opens the cart page in a new tab.

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.

When your Assistant recommends a product, it recommends a specific variant, for example a sofa in white. That variant is preselected when the selection panel opens.

Only variants present in your iAdvize catalog appear in the selection panel. A variant missing from the catalog is not 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

The criteria displayed depend on the information present in your catalog. If your products have no size variation, that criterion is not offered.

In the example above, only one criterion (color) is offered, but multiple criteria can be proposed depending on the structure of your product catalog (color, 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: if several products in the same group have exactly the same values on the variant criteria, the selection panel is not displayed. The product recommended by your Assistant is added straight to the cart.

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.

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.

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 the on("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