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.
Key Components
Here are the key components of the chatbot:
- 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.
- message_handler.mjs: Handles incoming WhatsApp messages and user interactions, managing the chat flow.
- products_api.mjs: Retrieves the available products from the Wix store.
- 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.
Here's a brief overview of the flow:
- The chatbot displays the product catalog, allowing users to browse available products. Users can select a product by sending the corresponding number.
- The chatbot then displays detailed information and an image of the selected product. Users can add the selected product to their cart.
- 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.
- When users are ready to check out, the chatbot provides a link to complete the payment process on the store's website.
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.
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 where you can connect with me on various social platforms.
Check out the GitHub repository for the WhatsApp chatbot
Acknowledgments
Big thanks to Pedro López, whose 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!
Top comments (0)