webong · September 16, 2018 18:36 · Sep 16, 2018
diff --git a/messengerbot.md b/messengerbot.md
@@ -0,0 +1,129 @@
+# MessengerChat
+Integrate Facebook Live Chat with bot support from chatfuel.com on your website
+
+## What is a Live Chat
+Live chat provides a rapid communication with your website visitors via instant messaging. The chat simply appears within their browser window, and the website visitor can chat with an operator by typing into the live chat box.
+
+Solutions that offers Live chat features include Intercom,Drift e.t.c
+
+# Tutorial
+A Facebook Page will serve as a Customer Relationship Management which we will build our Live Chat Support upon using Messenger.
+### Bonus Feature
+We will add bot support to our Live Chat feature to spice things well.
+
+## Get Started
+#### 1. Create a Facebook Page
+ Create a Personal Facebook Page if you have not already. (Messenger Bots and Live Chat feature can only “live” on a Facebook Page. Not on a Personal profile or Group).
+- Click on this link to create a Facebook Page:  [https://www.facebook.com/pages/create/](https://www.facebook.com/pages/create/)
+- Select the page type that relates to your business
+![](https://www.thinktuitive.com/wp-content/uploads/create-facebook-page-1024x811.png)
+- Enter a name for your page
+- A brand new home for your Live Chat and Bot!.
+
+#### 2. Create a Glitch account
+ [Glitch](https://glitch.com/about/) is the friendly community where you’ll build the app of your dreams.
+- Visit [https://glitch.com](https://glitch.com) and lets get an account for yourself, if you have not already. 
+-  Click [here](https://glitch.com/edit/#!/remix/navy-chatter) to make simple web page for this tutorial.
+
+
+## Setting Up
+#### 1. Retrieve your Facebook Page ID
+For this Project, we will be needing our Facebook page ID. You can get this by navigating to your Facebook page, clicking on the About tab, and scrolling to the bottom of the page. There, you will see your page ID (It should be a number).
+![](https://cdn-images-1.medium.com/max/900/1*PGJ5VlPr0-I3Wdy_yyTYrw.jpeg)
+
+#### 2. Whitelist your Domain
+Your Facebook page won't recognize your website if it is not whitelisted, *TO DO THIS* 
+-- Navigate to the “MESSENGER PLATFORM” tab and whitelist your domain. Type in both the HTTP:// and HTTPS:// variants of your domain to -- ensure it works for 100% of users. Click the SAVE button.
+ *You can use the free domain we got from our glitch app.*
+
+#### 3. Embed a HTML Snippet
+At the bottom before the closing `</body>` tag add this snippet, and don't forget to replace the `page_id` attribute with your page id from step 1 above..
+```html
+<div class="fb-customerchat"
+ page_id="<ENTER-YOUR-FACEBOOK-ID-HERE>"
+ theme_color="#459645"
+ logged_in_greeting="Hi! How can we help you?"
+ logged_out_greeting="GoodBye!... Hope to see you soon."
+ minimized="false">
+</div>
+```
+This serves as the parent tag/node on which our live chat platform will show.
+
+#### 4. Install Facebook SDK on your website
+On your Glitch app, open `script.js` and add this snippet below
+```javascript
+window.fbAsyncInit = function() {
+    FB.init({
+      appId            : '912333495590130',
+      autoLogAppEvents : true,
+      xfbml            : true,
+      version          : 'v2.11'
+    });
+  };
+(function(d, s, id){
+     var js, fjs = d.getElementsByTagName(s)[0];
+     if (d.getElementById(id)) {return;}
+     js = d.createElement(s); js.id = id;
+     js.src = "https://connect.facebook.net/en_US/sdk.js";
+     fjs.parentNode.insertBefore(js, fjs);
+   }(document, 'script', 'facebook-jssdk'));
+```
+Above snippet imports the facebook sdk to our website.
+
+*WE COULD SEE THIS NOW ON OUR WEBSITE*
+![](https://cdn-images-1.medium.com/max/720/1*DzqRY4YYP05FJBz5eW0QUA.png)
+
+
+## Integrating Bot support on our Live Chat powered by Messenger
+##### 1. Create a Chatfuel Account
+Click on “Get Started for Free” button
+
+![](https://www.thinktuitive.com/wp-content/uploads/chatfuel-get-started-free.png)
+
+![](https://www.thinktuitive.com/wp-content/uploads/chatfuel-receive-public-profile.png)
+
+Once you click on “Continue”, you’ll be redirected back to Chatfuel.
+
+#### 2. Choose a page to connect your bot to
+“Connect” the page that you just created in the previous step above
+
+![](http://res.cloudinary.com/dwde2t6ef/image/upload/v1525670993/g_lphqzr.png)
+
+You should now be logged in
+
+![](http://res.cloudinary.com/dwde2t6ef/image/upload/v1525670968/p_jtzaja.png)
+
+#### 3. Setup a Welcome Message
+Change your Welcome message to something shorter…for example…
+![](https://www.thinktuitive.com/wp-content/uploads/chatfuel-change-welcome-message.png)
+
+*Add a Default Reply*
+Bots can't reply to all questions, So setting up a default reply comes in handy
+- Click on the “Default answer” block under the “Built-In Blocks”
+- Let’s change this text to say “Hmmm. I’m not sure I understand. Sorry!”
+![](https://www.thinktuitive.com/wp-content/uploads/chatfuel-default-answer.png)
+
+#### 4. How To Setup Keywords
+If User/Customers enter a specific word or sentence  the bot will automatically reply with a predefined message – created by you!.
+This is very relevant when it comes to FAQs to your business. 
+- In the left side menu, click on “Set Up AI” then on “Add AI Rule”
+![](http://res.cloudinary.com/dwde2t6ef/image/upload/v1525672206/j_wjzvhb.png)
+
+- Let’s setup an automatic reply to the word “hello”. To do this:
+Type “hello” under “If User Says Something Similar To”
+Type “hi there” under the “Bot Replies with Text”
+![](https://www.thinktuitive.com/wp-content/uploads/chatfuel-simple-ai.png)
+
+
+# WE CAN NOW TEST THE CHATBOT ON OUR LIVE SUPPORT.
+
+# REFERENCES
+ I do well to reference my work. It's a way of showing appreciation to those great writers
+
+ [Messenger Developers](https://blog.messengerdevelopers.com/messenger-customer-chat-open-beta-16b11879637)
+
+  [@jamesfuthey from Medium](https://medium.com/@jamesfuthey/how-to-add-facebook-live-chat-to-your-website-dd48fc8bb066) 
+
+   [ThinkTuitive](https://www.thinktuitive.com/how-to-build-a-messenger-bot-with-chatfuel/) 
+
+
No results found