Whatsapp ChatBot Design Document

[jekram]

Create a Whatsapp eCommerce Chatbot.

We need to design with a Gateway where we call a generic middleware and that middleware maps it to eCommerce.

We should explore what is available in the market and see if we can leverage that.

[sojharo]

I have explored in detail on whatsapp chatbot solutions on market. However, they are just our direct competitors, they are showing whatsapp and messenger chatbot solutions as part of their software. Here are few of them that I have found good and we can try connecting them to see if they have api integration available.

https://www.messengerpeople.com/whatsapp-business-solution/

https://wotnot.io/whatsapp-chatbot/

https://chatbots.studio/portfolio/customer-service/whatsapp-chatbot-for-online-shopping-service/

These above solutions also have their messenger chatbot features and they can lure customers to become their customers.

As whatsapp doesn't have options for showing rich messages with buttons or quick replies, it is better to create whatsapp chatbot using NLP engines behind the scene.

The work we have done for sms and messenger chatbots for telco demo and covid19 can be repurposed to see if we can use them with NLP engine like dialogflow and flocksend api for whatsapp. We also have one chatbot gateway design ready and I am repurposing it to add whatsapp to that design.

We can do two things here.

For demo purpose, just like we did for telco demo for urdu and english bot, we can repurpose that NLP trained bot with whatsapp flocksend api. We already have created a middle layer code which talks to NLP engine like dialogflow to get message intents and entities and then it talks to messenger to send & get messages. We can easily repurpose that middle layer code and use flocksend apis with it for demo purpose.

For production purpose, I think Imran had started some work on dialogflow integration with KiboPush, so we can continue that work and let people integrate their dialogflow accounts with us where we will provide the UI on our end to train the bot (or we can let customer train bot on dialogflow and just do integration on our end) which will then connect to whatsapp using flocksend api. It may not be as simple to create as our current messenger bot is. Because the whatsapp chat bot doesn't have options of quick replies and buttons which can help in creating navigational bot like we have for messenger using chatbot automation.

However, we will be able to at least provide an nlp based bot. Many other people have created bot which is similar to sms. Where it shows options as 1, 2, 3 and 4. When user on whatsapp responds with any number to select the option, the bot replies with that message message set for that option.

I am working on the document for this middleware and chatbot gateway, however, some of the work is already done in form of dialogflow integration and our telco demo (for demo purpose) and we just need to repurpose it. I will update further as soon as I complete the document.

[sojharo]

I am working on this existing document and modifying it to add whatsapp as well:

https://docs.google.com/document/d/1_h6M_dgf0F7sRKMUl5JrJuTpBsucs9NyP5_3MsDL68E/edit#

This is our document for chatbot gateway which can connect to external ecommerce platforms, NLP engines and chatplatforms such as messenger, web.

[sojharo]

As discussed in the meeting, let's ignore the document I have given above as it is focused on NLP engines and we will not use these for whatsapp.

[sojharo]

I have thoroughly looked into the following website:

https://chatbots.studio/portfolio/customer-service/whatsapp-chatbot-for-online-shopping-service/

They have created another whatsapp chatbot project too:

https://chatbots.studio/portfolio/customer-service/multichannel-chatbot-for-job-searching/

They don't have their own technology and just like software house, they build chatbots from other tools for their clients. They then manage the chatbot for their customers on monthly basis.

They work on following technologies:

For AI

1. Dialogflow
2. IBM Watson
3. Wit.ai
4. Luis.ai

SMS and Whatsapp

1. Twilio

Mobile Bots

1. React Native

Voice Bots

1. Google Home
2. Cortana
3. Amazon Alexa

Web Bots

1. React
2. Redux
3. NGXS
4. Angularjs

Messaging chatbots

1. Facebook Messenger
2. Whatsapp
3. Viber
4. Telegram

and there are many other technologies that they use to create bots for their customers. Following page lists all them.

https://chatbots.studio/technologies/

They work as chatbot agencies.

I am going to work on a demo chatbot gateway for ecommerce on whatsapp. I will try to modify the existing middleware code that we used for messenger and telco demo. I will replace the dialogflow logic with menu logic and see how does it work.

[sojharo]

I thought more on this on and was able to devise the following strategy for menu driven chatbot on whatsapp.

1. We should remember context for subscriber (by remaining the last message we sent to him)
2. We should accept menu selection in form of 1, 2, 3 or a, b, c. (we will give this option to admin on UI)

The need to remember the context is there because there may be menu in 2nd or third levels of the conversation. When we remember the last message sent to that subscriber, we know for which level customer has selected the option 1 or 2.

As the whatsapp doesn't have quick replies or buttons and for now we will not use NLP, then the menu driven option will be best provided we remember the context so that we know which menu is being used. There maybe multiple menus, one for each message block. So, when we remember which message block was last sent to customer on whatsapp, we will know which menu he is referring to.

For integration of ecommerce backend:

Case 1: Ecommerce site is built using a popular ecommerce platform

For the integration of the eCommerce store, we can give some integrations out of the box for shopify, woocommerce and magento just like we have given for google sheets or hubspots. With this, we can give generic UI to user on create bot screen and he will decide which type of data should be pulled from ecommerce store for which message.

In this case, we would have to create integration layer for each platform. Our core logic would be platform agnostic and it would just call the layer and layer would know which APIs to call in case of given external e-commerce platform.

Now in this once the user integrates with any external backend platform, then our create intent screen would show the option to select from given API endpoints once the option of “Fetch from API” is enabled. User would not have to do the hard work of giving us the API URLs and access tokens and formulate response. They would just connect their ecommerce platform with our chatbot.

Case 2: Ecommerce site is custom built and not from available platforms

However, we may not be able to provide out of box integrations for every type of ecommerce platform and specially if ecommerce website is custom built. For this, we may let the user give us the api url and keys

The simplest approach for us is to let the user decide how and how much backend structure they want to expose to our chat bot. It would be up to user to define for what intent (user query) our system should call their backend to get more information and then how to use the information in the answer. Here is the simple flow diagram for user actions

I have also written some sample code that when we connect to flocksend api, will be able to demo a bot with two messages. However, the sample code doesn't contain database so for now it doesn't remember the context.

[sojharo]

I have further worked on this. This is under construction as I was not able to complete the design due to electricity issues yesterday because of rain.

https://docs.google.com/document/d/1SKPR-XtQsQh2Wae9L3HfNtTVHRyxuecD--ORuyYkEQ8/edit#heading=h.xpj0pxyaycs3

[sojharo]

I have investigated on Ecommerce platforms and have updated the document in detail:

https://docs.google.com/document/d/1SKPR-XtQsQh2Wae9L3HfNtTVHRyxuecD--ORuyYkEQ8/edit#heading=h.1ebf2ngzrmqi

[jekram]

Great job. Please see my comments.

[sojharo]

I have worked on the document as per next steps:

1. I think in v1 we should take this list and decide what we will do a. Customer b. Discounts (may be) c. Inventory d. Orders e. Products

2. We can do the rest in v2 a. Sales Channels what is this? b. Fulfillment c. Payments

3. Would like to understand better each sub API’s of items in #1.

I have discussed this in separate section.

https://docs.google.com/document/d/1SKPR-XtQsQh2Wae9L3HfNtTVHRyxuecD--ORuyYkEQ8/edit#heading=h.dxfxeaq2v4fj

4. Please create a workflow diagram

I have added this in a separate section.

https://docs.google.com/document/d/1SKPR-XtQsQh2Wae9L3HfNtTVHRyxuecD--ORuyYkEQ8/edit#heading=h.cgiq9gsvugtf

5. Can you please put the link to the API’s in the doc

For each API subproduct I have given its URL in that section.

https://shopify.dev/docs/admin-api/rest/reference (summarised list of apis from shopify)

[sojharo]

I have completed the design document for whatsapp chatbot automation and have added mockups, endpoints and database structure sections. It needs to be reviewed and it has few discussion items as well.

@jekram @ImranBinShoukat please review.

https://docs.google.com/document/d/1SKPR-XtQsQh2Wae9L3HfNtTVHRyxuecD--ORuyYkEQ8/edit#heading=h.j1iedj8iq4iu

[sojharo]

I have looked into following things here today:

Shopify Payments for Pakistan

I looked on the shopify page for payment providers in Pakistan. In that, they are showing bitcoin payment providers. However, the bitcoin is banned in Pakistan and has been declared illegal.

https://www.shopify.com.au/payment-gateways/pakistan

On above site and also on the forum that you shared, they have listed following payment providers for Pakistan:

1. 2Checkout
2. BitPay
3. Coinbase Commerce
4. GoCoin
5. Splitit Monthly Payments

These are bitcoin providers.

The link I have shared above is official page by Shopify for Pakistan gateways. If we compare it with India Payment gateway page, we can see that India has following payment methods available with shopify:

1. Credit and Debit Cards
2. Cash on Delivery
3. Netbanking
4. Wallets
5. Bank Transfers
6. UPI
7. EMIs

Also, there are payment gateways on their Indian payment gateway page which are listed as follows:

1. PayU
2. Paytm
3. Paypal
4. CC Avenue
5. RazorPay
6. Cashfree

https://www.shopify.in/payment-gateways (they also have a separate domain for India with .in extension)

With custom manual payment method, what we can do is this that we can give instructions to customers on how to use Pakistani payment providers to make a payment. For example, if I am using easyPaisa account for my business to take payments, I can go shopify and create custom manual payment method with name EasyPaisa.

With this, I will then give instructions to customer on how to do the payment. In case of easyPaisa, I will let them know that in your easyPaisa app, go to my account with this number or id. Then make a payment of this rupees and send the transaction id to me in an email or on whatsapp number.

This can be done on shopify as custom manual payment method. This will not be automatically integrated with shopify but at least customer will know how to do payments to this particular shop.

If shopify integrates with payment providers such as easypaisa or jazz cash, then customers will just put phone number for payment and on their shopify app they will receive prompt to let this vendor charge you. As it is not possible for now, so merchants may rely on custom payment methods which are bit lengthy and requires few manual iterations until payment is confirmed by both customer and merchant.

Here is link on custom manual payment method setup: https://avada.io/shopify/docs/how-create-custom-manual-payment-method-shopify.html

Octane.ai Investigation

Octane.ai used to be generic chatbot platform just like ManyChat. But over the time, they have completely changed their model and now portray them as an shopify app listed in shopify app store.

Octane.ai now does the login and signup with shopify stores so on initial signup the shopify account is linked to them. So when I tried to do login into my old account, it was not available. I had to connect my shopify store octane.ai for new signup:

After this step, I connected facebook page to Octane.ai. Then it asked me which type of automations I want to do with shopify store for messenger customers.

Here are these automations:

From above, we have Cart Abandonment, Order Notification and Getting Started in KiboPush for shopify.

Messaging Platforms supported by Octane.ai: Facebook Messenger and SMS

Some Major Features by Octane.ai

Website popups: They popup on your shopify website when customer is inactive for some time on the website. They are used as growth tool and customers can get incentive to click on them such as discount. Sample popup looks like this on website:

Abandoned Cart Recovery: This is the feature that we also have on our KiboPush. Here a checkbox plugin is added to cart checkout so that if customer doesn't complete the order, we can send a follow-up message to that customer and give incentive of discount to complete the order.

This is how a checkbox plugin will look like on checkout screen:

Answer Questions: This is some type of NLP integrated in Octane.ai which will answer the customer's questions based on what admin responded in live chat for similar questions:

Follow up Messages: This lets admin define the follow up messages to orders (order notifications), deals or past questions. Also shipping alerts can be sent to customer on Messenger.

Ads: Octane.ai supports both Click to Messenger Ads and Sponsored Messages. They let the user create the ads in their UI and allow ads to connect to their messaging flows.

Integrations: Octane.ai supports integration with other external tools for email collecting and other commerce tools.

Comment Capture: They also support comment capture like us to grow subscriber base.

Advanced Features: Customer segmentation, targeting, custom flows and power analytics related to sales and conversions.

Basic Octane.ai dashboard

Inside Optin Tools

As discussed above, they are growth tools and their growth tools are tailored around ecommerce store experience. They have following optin tools:

1. Welcome popup
2. Customer Chat Widget
3. Exit Intent Popup
4. Add to cart checkbox
5. Add to cart pop-up
6. Order status page button
7. Global

Inside Flows

They have automated flows which are tightly integrated with shopify. They are following:

1. Cart abandonment
2. Confirmation and shipping
3. Get Started button flow

They have smart replies and chat inbox (like our live chat) as well.

NOTE: I used the Octane.ai product and I was not able to understand how I can discover a product on messenger which is on my shopify store. Maybe, I am on free trial account.

I will look more on how we can show product catalog on messenger from shopify using octane.ai. They said it can be done with convo, I tried it but was not able to import products from the shopify dynamically.

Ecommerce chatbots built using Octane.ai

These are real commerce stores and they have case studies on octane.ai as well:

1. m.me/OfficialDoYouEven
2. m.me/skinnymixes
3. m.me/KalaBrandMusic

Even the above three doesn't show catalog on messenger and take us to website to see catalog.

There are more case studies here as well: https://join.octaneai.com/customers

Facebook restricted me to send messages to other chatbots in list in above link as it thought I am doing spam.

Next Steps

1. Investigate on messaging apps available on shopify app store.
2. Load shopify catalog dynamically for chatbot message

I found one app for whatsapp business integration with shopify as well:

https://apps.shopify.com/whatsapp-chat-button?surface_detail=customer-support-messaging-and-chat&surface_inter_position=1&surface_intra_position=2&surface_type=category

As a next step, I will look into this in detail.

[jekram]

Thanks @sojharo. This is very useful.

I would like to get a demo on Octane.ai and Shopify.

I see two main roadblocks

1) Payment Gateway in Pakistan (I also the thing we do not know what active projects are going on Payment Gateway).

2) Lack of Shopify in Pakistan

1 is the main issue.

[sojharo]

Pakistan mostly has mobile wallets which can be used for purchasing in local market: https://github.com/Cloudkibo/KiboPush/issues/6263#issuecomment-512887110

[sojharo]

I have looked into whatsapp app which is available on shopify store. There were many other whatsapp apps on shopify store but all of them were just adding whatsapp share button on shopify store. Or were just opening whatsapp desktop on admin portal. None of them were using whatsapp business api.

There is this one whatsapp app for shopify which is using the business API of whatsapp:

Official site: https://www.superlemon.xyz/

They portray themselves as: #1 AUTOMATED Cart Recovery, Order Tracking, Cash on Delivery

On face of it, they have following major features:

1. Whatsapp Chat Button + Whatsapp Share button (it opens user's whatsapp web in a new tab to talk to business)
2. WhatsApp Abandon Cart Recovery (It uses whatsapp business api)
3. Order notifications and COD (it sends order confirmation, order tracking and COD notifications with WhatsApp CRM)

Here is the details of above features:

1. WhatsApp Chat Button + WhatsApp Share Button

It displays on the website of store as a chat plugin in corner. When we click on it, it will show agents. Once we click the agent, it will take us to WhatsApp Web in a new tab to that agent's whatsapp number. It means that whatsapp mobile app is required for agents. Whatsapp share button, on the other hand, will let the user share that product page with his/her friends on whatsapp.

https://www.superlemon.xyz/features/whatsapp-chat-button https://www.superlemon.xyz/features/whatsapp-share-button

2. AUTOMATED WhatsApp message templates (for abandoned carts and other automations)

It supports following automated flows:

1. Abandoned Cart Recovery
2. Order Confirmation
3. Order Shipment with tracking URL
4. Cash on Delivery (COD) order verification & confirmation

How are these automated messages sent:

• Automated messages are sent using their WhatsApp Business API-approved number
• They charge store owners when a message is delivered successfully
• Their message templates are pre-approved by WhatsApp and available in 11 languages: English, Portuguese, Spanish, Italian, German, French, Indonesian Bahasa, Arabic, Turkish, Hebrew, Dutch
• The messaging rates: India: $0.02, USA: $0.03, Colombia: $0.03, South Africa: $0.04, Mexico: $0.05, Spain: $0.06, Malaysia: $0.07, Brazil: $0.08 per message

Support Inbox

This is like our KiboChat LiveChat which will be shown on admin dashboard. Admin will be able to see chat session and talk to customers from dashboard. This feature is not released yet:

https://www.superlemon.xyz/features/whatsapp-support-inbox

It will also have canned responses feature.

I have installed this app on my test shopify store.

https://kibo-test-store.myshopify.com/collections/frontpage/products/football

The major features which use whatsapp business api are only available on ultimate paid plan. I was able to see their UI and how they are setup but I was not able to test run them.

Here is one screenshot for how they setup abandoned cart:

And this how they setup automated messages for order confirmations:

When we meet, we can have demo of all the following three:

1. Shopify
2. Octane.ai
3. Superlemon whatsapp shopify app

I have found other similar app for whatsapp automation on shopify app store:

https://apps.shopify.com/leads-on-whatsapp?surface_detail=customer-support-messaging-and-chat&surface_inter_position=2&surface_intra_position=6&surface_type=category

[jekram]

@sojharo Let's talk at Noon your time. We have an InfoBip meeting at 11 and we can chat after that.

[sojharo]

Next Steps:

EasyPaisa and MobiCash API investigation Current ecommerce platforms being used in Pakistan Flow for admin to setup chatbot on whatsapp

[sojharo]

EasyPaisa API

I have looked into EasyPaisa for merchant APIs. On their website and other places, I was not able to find any good api documentation. I found one old API document that had created for a hackathon which organized when they opened their API for first time. It was 2017 PDF document and there was no way defined on how to get API credentials and keys.

I have sent an email to EasyPaisa as a company and have asked them about their API and how to get credentials. Pakistan Railways application is using some EasyPaisa API to automatically charge customers for tickets when they purchase ticket on railways app and give their Easypaisa number for payment.

Here is the article on their hackathon which they organized after opening their API.

https://www.centerforfinancialinclusion.org/telenor-opens-mobile-money-apis-for-third-party-developers

And here is their outdated API document that they had created for that hackathon. The api links in this are not opening and also it is not clear how to get API keys and token from them:

http://happening.pk/gsmahackathon/apidocument3.pdf

I found on GitHub that there is a WordPress OpenCart module for EasyPaisa payment method.

https://github.com/aamnah/easypaisa

I have also contacted the developer of this repository if she knows has information on API.

There are many other people trying to do the same as well but are also complaining on lack of API documentation and how to get it:

https://www.reddit.com/r/pakistan/comments/erobav/how_can_i_add_easy_paisa_as_a_payment_gateway_for/

I have contacted them and let's see what they respond.

MobiCash API

On MobiCash, they have well documented payments gateway API. They also have sandbox where we can create account and test our app.

https://developer.jazzcash.com.pk/store/site/pages/APIs.jag

This is the sandboxed api documentation as well:

https://payments.jazzcash.com.pk/SandboxDocumentation/

Here is the complete document on the API from mobicash:

https://sandbox.jazzcash.com.pk/SandboxDocumentation/Content/documentation/Payment%20Gateway%20Integration%20Guide%20for%20Merchants-v4.2.pdf

Most Popular Ecommerce Platform

I looked a lot but there was very little information on Internet about what ecommerce platforms people are using in Pakistan. I checked few articles however I found following article which talks about Ecommerce platforms to use in Pakistan, but I am not sure whether it indicates their popularity in Pakistan:

https://medium.com/@tibollinet.2019/which-is-the-best-ecommerce-platform-in-pakistan-189996295067

After this, I checked on Google trends to understand what ecommerce platforms are people searching for in Pakistan:

1. WebX Commerce
2. Magento
3. WooCommerce
4. Shopify

I have also asked from the Pakistani startup community on Facebook as well. One agency person told me this:

Out of all the clients we had in a period of 5 years, around 60% asked for Wordpress, 20% for Magento, 15% for shopify and 5% for opencart

Flow for admin to setup chatbot

This is under construction. I am working on this and trying to understand how we can make it easy for admin.

[sojharo]

As per discussion, I have started working on design to add commerce catalog in KiboPush. This is under construction I was not able to complete it due to other tasks.

[sojharo]

I have completed the commerce features in this and they can be viewed in following document:

https://docs.google.com/document/d/1su-alUNE_OSJGngcPmjo-qIUMH1YeZpo9FFDafmOrUU/edit

[sojharo]

I discussed the UI in this with ImranShoukat in detail today. I showed him flows and discussed the requirements for whatsapp ecommerce based chatbot.

We were not able to come up with a UI where we give less control to admin and most of the things are handled by chatbot in the backend. Imran also told that we need to provide control to the admin so that he is able to know what will be response of bot in certain scenarios, what will be the menu that will be shown to customers and also he should be able to modify them if he thinks bot should not be sending this message to customer.

One way, that after our discussion, I thought is to let admin give the UI where he just enables the chatbot and after this bot will handle all the customer queries on whatsapp i.e. product discovery, buy, order status checking. However, this also raises the question that admins will want to see how the bot will behave and they may want to have control to change the behavior.

Imran was of opinion that we must have a UI which is similar to chatbot automation and we will let the admin define the static menu i.e. how the first menu should be shown to customer on whatsapp and whenever we have dynamic menus (showing menu of products from api call) bot will automatically handle those menus. Even in this case, the admin should have control on when to show dynamic menus to customers i.e. when should bot call the API and show the products as part of menu.

If we try to simplify the bot to the level that admin can only enable and disable the bot then eventually we will have customers asking for more control as they will not be certain about behaviour of the bot. They may want to create simple and generic chatbot which may not include any API call.

This needs some more discussion. In the document, I have moved unnecessary API discussion parts at bottom in appendix. I have put both the UIs where admin have control and admin doesn't have control together.

https://docs.google.com/document/d/1SKPR-XtQsQh2Wae9L3HfNtTVHRyxuecD--ORuyYkEQ8/edit#heading=h.blkw2tv6mroc

Let's review them and decide which one should be better method for us. We may simplify the UI further (for part where admin has control) and remove the part where we are saving user input in custom fields this is making UI complex.

[ImranBinShoukat]

I have worked on the user interaction part and created this document:

https://docs.google.com/document/d/1QUdhL5KoQgSgzmXn62zLHYCbLQsak0k3TURZ1MulXVM/edit#

[jekram]

@ImranBinShoukat Thaks

@sojharo @ImranBinShoukat Let's review this on Tuesday. This is a high priority.

Our first implementation should be for Shopify.

[sojharo]

I have opened all the tasks in this milestone for this: https://github.com/Cloudkibo/KiboPush/milestone/134

We can close this task now