WooCommerce Chatbot for Messenger


Created: 01/2021 

Latest updated: 10/2022

Updated version: 2.1.4

By: VillaTheme Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!  

What is the WooCommerce Chatbot for Messenger?

WooCommerce Chatbot for Messenger is a useful extension that is capable of “conversing” with your customers, respond particular questions, and automatically providing suggestions about all products, policies, and other information on your WooCommerce. The plugin provides users with many tools to create the conversation flow for responding to frequent questions from the clients and satisfying exact needs. The Customers now can receive the information and buy the products on your WooCommerce with customer service online 24/7.

 

FEATURES

A. Flows in WooCommerce Chatbot for Messenger.

Create conversation flows that are programmed with a variety of responses in a very short time. It allows you to combine flows to the one that you generate and create proper conversation as live chat with assistants. You can create flows with nodes by using the basic elements to match the features of your store and customers.

  • Create as many conversation flows as you want: Each flow can be used as a sample response for the bot, you can create many sample responses corresponding with real communication situations when purchasing and selling.

  • Add contents in a node: Use basic elements to create proper contents. For example: Customer says: Hi Chatbot says: How can I help you? with suggested contents below like: Shop, Support center, Policy

  • Create nodes to direct customer to their target question. When customers click on each content, they will be redirected to place with the information that they are caring about.

=>>

 

  • Easy to manipulate in editing the contents: You can add, remove, collaspe contents in a conversation flow.

 

B. Fixed Actions in WooCommerce Chatbot for Messenger

Fixed actions are necessary for all conversations on WooCommerce. They are available in the plugin such as get started, default answer, after adding to Cart, after removing items. Moreover, you can customize the automatic response to these fixed actions by adding the available elements.

  • Welcome message: When customers conmunicate with the chatbot, they will see this message for the first time.
  • Default answer: Sometimes, chatbot can not cover all customer’s questions or the questions are undefined, the default answer will be sent out.
  • After adding to cart: You can customize a fixed action after customers add a product to the cart.
  • After removing item: You should create a fixed action if customers remove a product to cart, this message will be sent out in such that case.

Tips: You can create welcome messages, default answer, after adding to the cart, or after removing item by own sample responses created in the flow section.

 

C. Customer typing in WooCommerce Chatbot for Messenger

The plugin can configure programmed questions, according to the different commercial objectives. Shop owners can create frequently asked questions that most customers may ask on the store and program respective answers using available elements. After that, whenever the customers ask about these questions, the chatbots will answer as programmed.

 

D. Persistent menu in WooCommerce Chatbot for Messenger

You can create the specific persistent menu for your store on WooCommerce. Customization of persistent menu helps the chatbot system to become more professional. You can change menu you want in Persistent Menu maximum 3 elements.

E. Basic elements

The plugin provides a lot of elements such as text, video, typing, images, video, gallery, redirect, quick reply, stop live chat, post, action, product, search products,  that helps you to create the most flexible responses for the Chatbots. By using the basic element, the chatbot can interact with people through texts, videos, images and buttons of call-to-action…

  • Text Element: The text element helps you to create the response for the chatbot by text. It can use in fixed action, block or customer typing.
  • Typing Element: The Typing element helps to display the symbol as a person are chatting to reply the customers. You can adjust the duration for each times displayed.
  • Product Element: Product elements helps to display the products in the conversation between the customers and the Chatbot.
  • Category Element: Category Element helps to display category in the conversation between the Chatbot and the Customers.
  • Gallery Element: The Gallery element helps to display the gallery in the conversation between the Chatbot and Customers.
  • Image element: The image element helps to display the images in the conversation between the Chatbot and the customers. You just need to click on the center of box to upload the images.
  • Redirect element: The Redirect element helps to redirect the action in the conversation. When you click to the box, it will show all the blocks created to rediret.
  • Video element: The video element helps to display the video in the conversation. You just need to copy and page the URL of the video to the box.
  • Action element: This element helps to add the action to the conversation.
  • Request live chat element: The Request live chat element helps to give customer the request for chat with human in the conversation.
  • Stop live chat element: The Stop live chat element helps to response for the request for stopping live chat from the customer. You just need to enter the message you want to send to the customers when they want to stop live chat.

F. Customer information saving

WooCommerce Chatbot for Messenger will ask the customers about their information such as name, phone number, email address… and automatically save it.

 

You can watch the Video guide about how to install and use the WooCommerce Chatbot for Messenger

1. Go to the FB Chatbot/ Settings/ General tab/ Enable the plugin and connect your WooCommerce to the Facebook.

Click on the Facebook API guide and follow step by step, all steps have attached guide images (click on the black arrow to open the images) which help you easily to connect with your Facebook. If you want to have more instructions, please click on tab How does it work/ Settings on this documentation for further information with video guide.

2. After connecting to Facebook successfully, go to Conversation Flow to set up the auto-responses for the Chatbot with the flows, fixed actions, Customers typing and Persistent menu.

 

3. Test the Chatbot by clicking the button “Test this bot”, and you will have a Facebook message chatbot opened:

4. Request for approval from Facebook Review Team to make the plugin works on Facebook Messenger with all the customers. Come back to the Facebook chatbot/ Settings tab/ Click on the Facebook API Guide/ Follow step by step in the App Review section:

If you want to have more instructions, please click on the tab How does it work/ Settings on this documentation, we have described more clearly with a video guide attached.

 

 

Fixed actions

Flows

The Flows option helps to create a chat flow giving more options for your customers.

 

1. Add more flow: Click on the button to create a new flow.

2.Flow name: Add the name for the new flow.

3.Flow area to design the flow chat for your Chatbot.

4.Add content: Click to add the content you want

5. The list of content you can add to the flow.

6. You can add the flows through the customer typing tab

Fixed actions

The Fixed actions help to program the responses for the Chatbot when it meets the popular requests from the customer. There are four fixed actions, you can program the responses for each action using 12 available basic elements.

Welcome message

The customers who touch the messages box for the first time will see it first. You can design it with the text, gallery, video elements or event the block which are created from the plugin.  The welcome message is automatically displayed when the customers access Messenger.

1. Change the content of Welcome message as you want.

2. You can also add more elements to the welcome message by double-click on the element board then customize the elements as you want. Go to the tab basic elements in this documentation to read more about how to use elements.

 

Default answer

The default answer will be sent when the customer questions are undefined . You can change the default answer in your own way with the 12 available basic elements.

1. Change the content of default message as you want.

2. Add button to add more choices for customers. It will go with the default messages displayed to the customers.

3. You can also add more elements to the default message by double-click on the elements in the element board then customize the elements as you want. Go to the tab basic elements in this documentation to read more about how to use elements.

 

After Adding to the Cart

This message will be displayed to the customers after they add the product to their cart. You can change the default answer in your own way with the 12 available basic elements.

1. Change the content of message sending to customers after they add a product to cart.

2. Add button to add more choices for customers. It will go with the messages displayed to the customers.

3. You can also add more elements to the  message by double-click on the element board then customize the elements as you want. Go to the tab basic elements in this documentation to read more about how to use elements.

 

After removing item

The message will be displayed to the customers when they remove the items from their cart. With the basic elements or blocks, you can give the other suggestion about other products on your store or ask them about the reason…

1. Change the content of message sending to customers after they remove product the cart.

2. Add button to add more choices for customers. It will go with the messages displayed to the customers.

3. You can also add more elements to the  message by double-click on the element board then customize the elements as you want. Go to the tab “basic elements” in this documentation to read more about how to use elements.

Customer typing

The Customer typing is to list some common questions of customers when chatting on messenger, then chatbot will give respective responses as your desire when you chat online to customers. You can enlist as many questions that you think customers may ask as you want in this section.

1. Click on the “+” button to add more customer typing.

2. Enter the content of questions, key words that are frequently asked by the customer, use the separator “|” for synonym questions.

3. Enter the text you want to reply whenever receiving the questions as programmed. Click to add button to add more options for customer to choose.

4. Using panel with available elements to quickly program replies.

 

Persistent Menu

Persistent Menu is always displayed on the Customer Messenger. You can change menu you want in Persistent Menu maximum 3 elements.

Persistent Menu on the backend:

 

1. Enter the name of menu you want to display in the Persistent menu. That may be: Shop, Support, Cart, Policy….

2. Choose the type of actions when the customers click on each menu. That may be: Redirect action; Open URL or Do Action.

3. Select responsive with the respective type. For example: If customers click on Shop, chatbot can respond a direction to a flow defined in the Flow section. Or chatbot can respond a shop link…

4. Push to messenger: To save and push above setting to messenger.

 

Persistent Menu on Messenger:

Basic Elements

You can use the basic elements to add to the programmed actions of the chatbot. You  just need to double-click on the elements then it will display on the customization area for you to customize it.

Text Element

The text element helps you to create the response for the chatbot by text. It can use in fixed action, block or customer typing.

  1. The text box: You can enter the content which you want to use in the coversation with the customers.
  2. The buttons: The buttons will be displayed in the responses with text to give the options for customers to choose.

3. Add button: Add the button to give customer more choices. The max button quantity is 3.

Typing Element

The Typing element helps to display the symbol as a person are chatting to reply the customers. You can adjust the duration for each times displayed.

Product Element

Product elements helps to display the products in the conversation between the customers and the Chatbot.

1. Number of products: Enter the number of product displayed.

2.Type: You can choose the type of product displayed. Choose Category if you want the product displayed followed categories. Choose Products if you want to assign specific products to show in the coversation.

3. Category: Choose categories to show.

4. Sort by: Sort product by date, name, best seller, best rate, price.

5. Order: the orders can be Asc or Desc.

Category Element

Category Element helps to display category in the conversation between the Chatbot and the Customers.

1.Categories: Choose the categories displayed

2. Number of products: Enter the products from those categories displayed. The maximum is 10 products.

3. Sort by: The products can be sorted bydate, name, best seller, best rate, price.

4. Order: the orders can be Asc or Desc.

Gallery Element

The Gallery element helps to display the gallery in the conversation between the Chatbot and Customers.

  1. Click on the box to uplate the images.
  2. Enter the image caption.
  3. Click the “+” button to add more imges for the gallery
  4. You can change the position of gallery in the actions.

Image element

The image element helps to display the images in the conversation between the Chatbot and the customers. You just need to click on the center of box to upload the images.

Redirect element.

The Redirect element helps to redirect the action in the conversation. When you click to the box, it will show all the blocks created to rediret.

Video element

The video element helps to display the video in the conversation. You just need to copy and page the URL of the video to the box.

Action element.

This element helps to add the action to the conversation.

Request live chat element

The Request live chat element helps to give customer the request for chat with human in the conversation.

 

1. Enter the automatic response when received the live chat from the Customers.

2. Set timeout: Set time (minutes) for coming back to the Chatbot.

Stop live chat element

The Stop live chat element helps to response for the request for stopping live chat from the customer. You just need to enter the message you want to send to the customers when they want to stop live chat.

 

 

Customers

The customers section helps to save the customer’s information (Phone number, email address) which is collected from the conversation between Chatbot and the customers.

You have to create an action to take the information from the Customers.

  1. Go to Customer typing.
  2. Click on “+” button to add more customer typing (question, requests from the customers)
  3. Enter the key work, whenever the Chatbot detect this key works, It with show the element quick reply to collect the customer’s information.
  4. Double-click on the quick reply element.
  5. Enter the messages displayed to the customers.
  6. Enter the slug which you want to save the information in this.

Settings

The Settings is the first step the user have to do to enable the plugin and connect it to the Facebook Messenger.

A. General settings.

1. Enable connect Facebook and your site through the plugin, click the Facebook API guide and follow the guide step by step.
2. Show the chat box at frontend: Enable to display chatbot on the front end of your site.
3. Chatbox theme color: set color for chatbot theme.
4. Image ratio: Set product image ratio when send message.
5. Placeholder image.
6. Product image size: Select the size of product image displayed on messenger.
7. Category image size: Select the size of category image displayed on messenger.
8. Save the customer’s cart: Save customer’s cart to customers list page. Go to Customer section.
9. Webview ratio: Select style of webview: Compact, tall or full.
10. Debug mode: Display debug information if has error.
11. App review mode: Enable to activate the sampe conversation for reviewing the app by Facebook moderators during the Review process. After the app is reviewed successfully, you can disable this option to keep using your own chatbot conversation.

B. Change text
In this section, you can edit text for buttons on Facebook messenger.

Connect to the Messenger.

1. Create your Facebook app at here. Select ‘Manage Business Integrations’ type.

2. At FB settings page > Basic, copy App ID, App secret to your plugin settings page.

3. Fill all your information.

 

4. Add products: Facebook Login with Web platform, Webhooks and Messenger.

5. Facebook login > Settings: Copy the Valid OAuth Redirect URIs from the plugin settings and paste it to the settings of the Facebook login.

6. Webhooks: Copy the Callback URL and Verify Token from the plugin settings and paste it to the settings of the Webhooks.

7. Save this setting page
8. Click ‘Connect to Facebook’ button > Select page you want to connect > Accept permissions > Done.
9. After connect to Facebook, return your Facebook App > Messenger > Settings. Edit Page Subscriptions, add subscription fields:
messages, messaging_postbacks, messaging_optins
10. Now you can build the conversation for this chatbot and test it first.
App Review
To publish this Chatbot ( Make it to be able to chat with your customers), you have to submit for reviewing your Facebook App and get the approval from the Facebook Team.
Note: Please enable the “App review mode” in the Settings/ General to activate the sampe conversation for reviewing the app by Facebook moderators during the Review process. After the app is reviewed successfully, you can disable this option to keep using your own chatbot conversation.
Please follow these below steps:
1 . Download the attachment file Download
2 . Check again to ensured that all your necessary information is filled in the Facebook App
Dashboard/Settings/Basic.
3. Go to App Review > Permission and Feature. Add permission: pages_show_list, pages_manage_metadata, pages_messaging, Business Asset User Profile Access.
4. Go to Request page > Edit request.
5. Add App Verification Details
Click on Provide Verification detail and provide your credential and the step-by-step  instructions how to access the plugin.
Copy and paste this instruction, remember to change your credential

6. Add page_show_list detail and upload the video which you have just downloaded in the step 1.
7. Add pages_manage_metadata detail & select uploaded video
8.  Add pages_messaging detail & select uploaded video
9. Add Business Asset User Profile Access detail & select uploaded video
11. Click ‘Submit for Review’ button.

Extra Information


Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.