Skip to main content

How I develop the WooCommerce Chatbot


What is the Chatbot CMS

I’ve developed and launched a WooCommerce chatbot (WcBot) business in January 2018. It is a mass commercial product. The chatbot main function is to connect between the WooCommerce and Facebook Messenger. See below diagram:
The target clients are WooCommerce store owners. WcBot is actually a WordPress plugin. When the clients installed and activated the plugin, the chatbot can be added to the store like below screenshot:

Chatbot features

The benefits of WcBot for the shop owner:

1. Instantly answering the messages sent from Facebook Messenger like:
  • “Show me the products”
  • “List the category”
  • “Which product price under 30?”
  • “How about the price between 10 and 20?”
  • “Find product tshirt”
  • “View my shopping cart”
Example reply screenshot:

2. WcBot has a built-in shopping cart. Wcbot supports whole buying experience inside the chatbot. The whole buying experience means that allows end-users to:
  • Add item(s) to cart
  • Review/Modify shopping cart items
  • Input billing & shipping address
  • Select shipping method
  • Online payment: Payment methods support PayPal, Braintree, Stripe, cheque, C.O.D. and self-pickup
  • Automatically tax calculation
  • Automatically shipping fee calculation
Example shopping cart screenshot:

3. Seamlessly integrates with WooCommerce. The WcBot is not running alone. The info transfer between the Messenger and WooCommerce are frequently. These include:
  • Retrieving products, categories, orders, shipping, payment from WooCommerce.
  • Products lookup, prices lookup always query the WooCommerce instantly.
  • Save the paid orders to the WooCommerce.
  • Tax fees and shipping fees are retrieved from WooCommerce.
  • The store owner can perform order handling via conventional WooCommerce admin.
Example order handling in WooCommerce:

Technical Details

How To Make It Happen

To achieve the Chatbot can connect with Facebook Messenger and WooCommerce, I’ve developed a web server to communicate with:
  1. Messenger Webhook
  2. WooCommerce via REST API

Messenger Webhook

Messenger Webhook is the core of the Messenger chatbot communication channel. Whenever the end-user sending messages and receiving chatbot replies are all via the webhook. I noticed that Webhook requires a Facebook App. Moreover, the Facebook app requires a Facebook Page association. So, the setup steps are quite complicated. I’ve published a step-by-step guide in the WcBot documentation. Below is the screenshot of the Messenger webhook setup page:

WooCommerce REST API

WooCommerce releases a REST API interface for developers to manipulate the data. WcBot is using this API to communicate with the WooCommerce servers. I noticed that WooCommerce REST API implements access control. Every API call requires an authorized API key. The API key is generated by the WooCommerce server when it authenticated by the shop owner. I developed a WordPress plugin for the authentication as below screenshot:

WcBot web server

WcBot web server is the main service hub between Facebook Messenger and WooCommerce servers. The WcBot web server is hosting in AWS Lambda. Below is the diagram to explain the system architecture:

Flow of Message Handling

WcBot does a lot of message processing. I implemented a Natural Language Processor using RiveScript. When an end-user sends a message and receives the reply. The detail is explained as below flowchart:

Shopping Cart Mini-site

WcBot has a built-in shopping cart that supports online payment. For best user-experience, end-users can buy products directly inside the chatbot without the needs of the WooCommerce shopping cart. This is a unique feature of WcBot.

The shopping cart actually is a mini-website. It is a Responsive Web Design based on Semantic-UI. The website frequently communicates with the WcBot web server via the RESTful interfaces. Such data I/O include:
  • Shopping cart items
  • Product info in WooCommerce
  • Shipping/payment settings in WooCommerce
  • Create and save the orders to the WooCommerce
See below diagram for the web pages rendering flow:

The Challenges

Every development project has more or less challenges. WcBot development has followed challenges.

Challenge 1: Server Programming

Version 1 of the WcBot server is written in NodeJS. But version 2 is re-written in Python. See below table for the characteristics of different versions:
VersionLanguageFrameworkDatabaseServer Hosting
1NodeJSExpressJSMongoDBUbuntu VPS in DigitalOcean
2PythonFlaskDynamoDBAmazon AWS Lambda

I loved NodeJS. Especially loving it’s light-weight and async I/O (see this blog post to introduce this). But why I changed from NodeJS to Python? The reason is Python is the most widely used in the AI field. It is easy to learn. Take less time to finish the tasks. When comparing with NodeJS, I’ve written a lot of codes to handle asynchronous and callbacks. For instance, below is the code fragment to handle view product in NodeJS:


In contrast, below is the python code fragment to do the same task:

Not only the total number of lines is reduced by nearly 50%, but also the codes are more straightforward and easier to code and read. In the future, I can put all efforts to improve chatbot intelligence. Another reason is scalability. Python/Flask perfectly support serverless architecture. Flask can handle all web traffic from Lambda. I just only need to define one handler. See below fragment in my serverless.yml:
...
# Forward all traffic to Flask handle
functions:
  app:
    handler: wsgi.handler
    events:
      - http: ANY /
      - http: 'ANY {proxy+}'
...
The cons of Python is much slower than NodeJS. Slow performance affects scalability. To address these cons, I’ve selected AWS Lambda and DynamoDB. AWS Lambda provides great support for scalability. DynamoDB supports auto-scaling as well.

Challenge 2: WooCommerce Complexity

WooCommerce is a robust e-commerce platform. It supports different shipping classes, shipping zones, and allow shop owners to input complex calculation formulas such as:
  • 10 + [qty] * 0.10
  • 20 + [fee percent=”10” min_fee=”4”]
  • [qty] * 10 + [fee percent=”10” min_fee=”4”]
This calculation is handled in the WcBot shopping cart mini-site at the checkout page. I did a little experiment on several Javascript libraries to deal with this. Finally, I chose this lexer javascript package. Actually, it works perfectly.

Another WooCommerce setting I need to handle is checkout settings. The shop owners can input their payment options in there. (such as BACS, cheque, C.O.D., PayPal, Braintree, Stripe). The shopping cart mini-site has the ability to read those settings and render it into the payment webpage. It involves the SDKs of PayPal, Braintree, and Stripe payment. Braintree and Stripe are tokenized RESTful communication. All these logic are handled in the WcBot server Python Flask program module.

Challenge 3: Making Web Pages In AWS Lambda

AWS Lambda is executing in various micro functions instead of a real web server. So that I cannot make this assumption to show a webpage: http://xxx.amazonaws.com/[A_Web_Page].html

I needed to build a Lambda function to render it into HTML. Now it is: https://xxx.amazonaws.com/MakeWebPage?page=orderPayment&OrderId=XXX

Thanks to Serverless Framework tightly integrate with Flask. The code is that:
...
return render_template("orderPayment.html")
...
Thus the Lambda function returns the HTML page from template orderPayment.

Conclusion

Now this chatbot (WcBot) business is running well. I launched its Facebook Page (for marketing purpose) and got more than 300 likes less than a month. And 7 members joined its closed group.

From the response of audiences, WcBot has a bright future. I have a lot of passion for that. I want to make it supports stock control, various color/size product selling, international languages, and more… Maybe convert the shopping cart mini-site into direct sales in chatting.

Resources


Below are the hyperlinks related to this project:




Labels:
Location: Vancouver, BC, Canada

Comments

Post a Comment

Popular posts from this blog

Create An Online Store Theme Used By MyCMS

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions. This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do. Introducing MyCMS Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting. Shop Configuration You must prepare below settings Before using MyCMS: Setting Description Example Store name Your store name will be displayed in t...
1 comment
Read more

How I make a web-components based dynamic Javascript page at the top of Google Search

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpag...
1 comment
Read more

Build A Simple Sales System using Google Drive

Google Drive is a free-to-use cloud service with a 15 GB limit storage. 15 GB is large enough to store documents, and "program" too. Yes, it's correct. We can program Google Drive. This blog is a step-by-step tutorial to show you how to build a simple P.O.S. system on Google Drive. Create a Google Sheets to define the products 1. Login to Google Drive using your Gmail account and create a Google Sheets: 2. Input the products in the Google Sheets Create a Google Forms for sale input 1. Create a new Google Form 2. Edit the form and the first field Note that leave the option field unchanged. We'll assign it programmatically in below 3. Add a quantity field 4.  Add a last field for the price input How to copy data from Google Sheets to Google Forms? We need to add a script to do that. Google developed Google App Script (GAS) for us to achieve that. Now go back to the Google Sheet we just created above. Then enter to the script editor You'll see the below screen. Then ...
Post a Comment
Read more