Building a WhatsApp Chatbot with Wix Headless API: A Developer's Journey
Tags: javascript, api, chatbots, whatsap
Published: 2023-05-24 12:21:58



Hello Dev Community! I'm Yitzi, a Creative Technologist at Wix and a chatbot enthusiast. Today, I want to share a project I've been working on - a WhatsApp chatbot that integrates with a Wix store. This chatbot allows customers to browse products, add items to their cart, and proceed to checkout - all within WhatsApp.

## The Concept

The chatbot uses the Wix Headless API to communicate with the Wix store. It fetches product information, manages the shopping cart, and handles the checkout process. Any changes made to the store, such as adding new products or adjusting prices, are automatically reflected in the chatbot.

You can find the code for the chatbot on [GitHub](https://github.com/YitziG/wa-store).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5ehguix5fhtnptarlom.png)


## Key Components

Here are the key components of the chatbot:

1. **wix_client.mjs**: Sets up the Wix API client and handles OAuth authentication, enabling the chatbot to communicate with the Wix store through the Headless API.
2. **message_handler.mjs**: Handles incoming WhatsApp messages and user interactions, managing the chat flow.
3. **products_api.mjs**: Retrieves the available products from the Wix store.
4. **token_management.mjs**: Manages user tokens and authentication for the Wix API, allowing the chatbot to interact with the Wix store on behalf of individual users.

## How It Works

The chatbot guides customers through the entire shopping process, providing a product catalog view, individual product information (including images), and options to add items to the cart or proceed to the checkout.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axfq86tx2e2bs12q825p.png)

Here's a brief overview of the flow:

1. The chatbot displays the product catalog, allowing users to browse available products. Users can select a product by sending the corresponding number.
2. The chatbot then displays detailed information and an image of the selected product. Users can add the selected product to their cart.
3. The chatbot confirms the product has been added to the cart and displays the current cart items. Customers can either proceed to checkout or return to the product list to continue shopping.
4. When users are ready to check out, the chatbot provides a link to complete the payment process on the store's website.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5u7gxmig01c4fgcimjb.png)



## Technical Details

The chatbot uses the Wix Headless Node SDK to fetch the list of available products in the store and maintains the state of each user's interaction with the store. It uses the user's current state to determine how to respond to their input, such as displaying a list of products, showing details about a specific product, or adding an item to their cart.

To add items to the user's cart, the chatbot calls the `wixClient.currentCart.addToCurrentCart()` method. When the user is ready to check out, the chatbot creates a checkout session using the `wixClient.currentCart.createCheckoutFromCurrentCart()` method and provides the user with a link to complete their purchase on the Wix store's website.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox24onqf8cfehtdp5aug.png)

## Conclusion

This project showcases how the Wix Headless API can be used to create engaging and unique shopping experiences across multiple platforms. As a developer and a chatbot enthusiast, I found this project to be a fascinating exploration of the potential of chatbots and the Wix Headless API.

In fact, I'm so obsessed with building chatbots that I've even created an AI rabbi that has been dispensing advice for over a year! This WhatsApp chatbot is just another step in my journey of exploring the possibilities of chatbot technology.

I'd love to hear your thoughts on this project. Have you worked with the Wix Headless API before? Do you have any experiences or insights to share? Let's start a discussion in the comments below!

If you want to follow my journey and see more of my projects, feel free to check out my [link-in-bio](http://hopp.to/yitzi) where you can connect with me on various social platforms.

{% cta https://github.com/YitziG/wa-store %} Check out the GitHub repository for the WhatsApp chatbot {% endcta %}

## Acknowledgments

Big thanks to Pedro López, whose [`whatsapp-web.js`](https://github.com/pedroslopez/whatsapp-web.js) was a lifesaver for this project. Pedro's work stands as a testament to the power of open source - it's been a great learning resource for me, and the backbone of my WhatsApp chatbot. Do check it out, it's worth it. Cheers, Pedro!