Skip to content

Instantly share code, notes, and snippets.

@YitziG

YitziG/whatswix.md

Created May 9, 2023 19:54
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save YitziG/451463ecc2a4c170bd102c564c54efdf to your computer and use it in GitHub Desktop.
Save YitziG/451463ecc2a4c170bd102c564c54efdf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
whatswix.md

Wix Headless in action: A WhatsApp chatbot

To demonstrate how the Wix Headless API can be used, I've developed a WhatsApp chatbot that integrates with a Wix store, allowing customers to browse products, add items to their cart, and proceed to checkout - all within WhatsApp.

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

The code for the chatbot can be found at https://github.com/YitziG/wa-store.

Key Components

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

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.

Flow

  1. The chatbot displays the product catalog, allowing users to browse available products. This is made possible through the Wix Headless API, which retrieves the product information from the Wix store. 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. This action uses the Wix Headless API to manage the user's cart within the Wix store.
  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. The Wix Headless API is used to create a checkout session and generate the corresponding payment URL.

Technical Details

  1. The chatbot uses the Wix Headless Node SDK to fetch the list of available products in the store. This is done using the getAvailableProducts() function in the products_api.mjs file, which calls the wixClient.products.queryProducts().find() method.

  2. The chatbot maintains the state of each user's interaction with the store, such as their current stage in the shopping flow, the products they have viewed, and the items they have added to their cart. This state management is implemented using the getUserState(), setUserState(), and removeUserState() functions in the state_manager.mjs file.

  3. The handleMessage() function in the message_handler.mjs file is the main entry point for processing incoming messages from WhatsApp users. 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.

  4. To add items to the user's cart, the handleAddToCart() function calls the wixClient.currentCart.addToCurrentCart() method. When the user is ready to check out, the handleCheckout() function 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.

I've shared the code and detailed instructions on how to set up the chatbot in the GitHub repository mentioned earlier.

This usage of the Wix Headless API showcases the limitless potential of Wix's Business Solutions when combined with popular messaging platforms like WhatsApp. By empowering customers to complete the entire shopping experience within the familiar interface of WhatsApp, businesses can drive user engagement and increase conversions.

The chatbot is just one example of how the Wix Headless API can be used to create engaging and unique shopping experiences across multiple platforms.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment