WordPress Facebook Chatbot


Created: 06/2021

Latest updated: 06/2021

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 WordPress Facebook Chatbot?

WordPress Facebook Chatbot creates conversation flows that help to program suggestions, answers for the bot to communicate with your users when they enter into your WordPress website. This perfect tool helps to respond to your site users quickly with customer service online 24/7, keep them stay on our site when your site assistants are not available, save your money to hire customer supporters, but also reply sufficient information, suggestions with what users may care in for example Support, Help, Post, About us… using available elements in the plugin.

FEATURES

Flow: Create conversation flows that are programmed with a variety of responses in a very short time. In particular, 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 WordPress website and users.

  • You can create as many flows as you want.
  • In each flow, you can add notes equivalently with options that allows users to choose when chatting with bot.
  • In a flow page, easily, you can drag and scroll up or down the flow page to go to a node you want and add contents.
  • Notes can be easy to interact with, you can collapse or add/remove nodes quickly if needed.

 

Fixed Actions Fixed actions are necessary for all conversations on WordPress website.  Moreover, you can customize the automatic response to these fixed actions by adding the available elements. They are available in the plugin such as:

  • Welcome message: The users who touch the messages box for the first time will see it first. In particular, 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 Facebook Messenger.
  • 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 available basic elements.

 

Customer typing: The plugin can configure programmed questions, according to the different 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.

  • You can add unlimited customer typing as keywords that you think users may ask frequently when chatting on your WordPress website.
  • Add buttons to redirect your available replies to address specific problems of users on your site.
  • Using a panel with available elements to quickly program replies for your bot.
  • You can link to flows that created in the Flow section.

Persistent menu: You can create the specific persistent menu to display available options on Facebook Messenger for users to choose.  Customization of persistent menu helps the chatbot system to become more professional.

Basic elements: The plugin provides a lot of elements such as text, video, typing, images, post, search post types, gallery, redirect, quick reply, request a live chat, stop live chat, which 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: Create the response for the Facebook chatbot by text. It can use in fixed action, block or customer typing.
  • Typing: Display the symbol as a person are chatting to reply the customers. You can adjust the duration for each times displayed.
  • Gallery: Display the gallery in the conversation between the Chatbot and Customers.
  • Image: Display the images in the conversation between the Facebook Chatbot and the customers. You just need to click on the center of box to upload the images.
  • Post: Allows to assign display available posts, pages, media for user to choose.
  • Redirect: Redirect the action in the conversation. When you click to the box, it will show all the blocks created to redirect.
  • Video: Display the video in the conversation. You just need to copy and page the URL of the video to the box.
  • Quick reply: Provide a way to present a set of buttons in-conversation that contain a title and optional image, and appear prominently above the composer.
  • Search post types: Allows users to type key words to search for relevant posts, pages, media.
  • Request live chat: Helps to give customer the request for chat with a supporter in the conversation.
  • Stop live chat: Helps to response for the request for stopping live chat from the customer. Therefore, you just need to enter the message you want to send to the customers when they want to stop live chat.

Customer information saving: The Chatbot Facebook can ask the customers about their information such as name, phone number, email address… and automatically save them.

You can watch the Video guide about how to install and use the WordPress Facebook Chatbot

 

1. Go to the FB Chatbot/ Settings/ General tab/ Enable the plugin and connect your WordPress website 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.

 

 

Flows

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

 

 

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 Facebook Chatbot when it meets the popular requests from the customer. There are two fixed actions, you can program the responses for each action using 11 available basic elements.

Welcome message

The users 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 Facebook 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.

Customer typing

The Customer typing is to list some common questions of customers when chatting on Facebook 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 Facebook 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: Help center, Contact us, About us, 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 contact us, chatbot can respond a direction to a flow: Contact us that defined in the Flow section. Or chatbot can respond a site link…

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

 

Persistent Menu on Facebook Messenger:

Basic Elements

You can use the basic elements to add to the programmed actions of the Facebook 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 Facebook 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 conversation 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.

 

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 Facebook Chatbot and the customers. You just need to click on the center of box to upload the images.

Post element 

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

1. Post type: Enter type of posts, it can be: Posts, Pages, Media

2. Include post: assign posts can be shown in the post type.

3. Sort by: Sort post by date, name, best seller, best rate, price.

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

5. After show result: How you want to respond after the customer finds a post.

6. Action you want customer do when he finds a post.

7. No post found: How you want to respond if no post found.

8. Action you want customer do when he finds no post.

 

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.

 

Quick reply element 

Quick reply provide a way to present a set of buttons in-conversation that contain a title and optional image, and appear prominently above the composer.

1. Enter text message for quick reply.

2. Add a set of limited 13 buttons for customers to choose what they are interested in. When a quick reply is tapped, the buttons are dismissed, and the title of the tapped button is posted to the conversation as a message.

3. Save answer: If you want save customer’s answer. Please input a slug in this field.

 

 

Search post types

1. Enter text to ask customer for searching a post type.

2. Post type: Enter type of posts, it can be: Posts, Pages, Media

3. Sort by: Sort post by date, name, best seller, best rate, price.

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

5. After show result: How you want to respond after the customer finds a post.

6. Action you want customer do when he finds a post.

7. No post found: How you want to respond if no post found.

8. Action you want customer do when he finds no post.

 

 

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 Facebook Chatbot and the customers.

 

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. Click the Facebook API guide and follow the guide step by step to connect Facebook Messenger and your site.
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. Category image size: Select the size of category image displayed on messenger.
7. Debug mode: Display debug information if has error
B. Change text
In this section, you can edit text for buttons on Facebook messenger.

Connect to the Facebook 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. 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_read_engagement, 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_read_engagement detail & select uploaded video
9.  Add pages_messaging detail & select uploaded video
10. Add Business Asset User Profile Access detail & select uploaded video
11. Click ‘Submit for Review’ button.