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.

• The Assistant recommends products to the visitor.
• The visitor clicks on “Add to cart” without leaving the conversation.
• 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 available for all iAdvize users, including those using Shopify (where the activation is automatic).

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.

Add-to-Cart with Shopify

The Add-To-Cart conversational feature is fully compatible with Shopify and is automatically activated upon installing the iAdvize app for Shopify, with no manual configuration or technical integration required. To benefit from this feature, the iAdvize tag must be enabled within the app. Once activated, the product catalog is automatically synchronized, allowing the retrieval of all available variants (size, color, material, condition, etc.) so they can be dynamically suggested during the add-to-cart interaction. The entire process is fully automated, requiring no additional action from the user.

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.

Integration guide

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.

Integration steps

1. 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>

2. 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.

3. 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>

4. 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.

5. 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.

6. 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.