Home
First, we need to create the configuration we need in Facebook. Log on to your Facebook account and go to https://developers.facebook.com/. Search for a link to make a new App.
We will come back to this page after creating our callback handler app.
Then we create our own Facebook page (this is the Facebook page where you want to install the Chatbot).
-
Create a Java Web Application and name it MyFirstBotApp. This will be the application that will handle all the callback post sent by facebook whenever user enters a text.
-
Create your first behaviour class, create a class named: MyFirstFbotMillAppBehaviour and extend AbstractBehaviour. Extending this abstract class will required your concrete class to implement a single method called defineBehaviour(). This is where we will put all our Event and Response Handlers of our Bot App.
-
Create your first Event handler and Reply. Paste the code below:
public void defineBehavior() { // Setting my tokens from Facebook (page token and validation token for webhook). FbBotMillContext.java.getInstance().setup("myFacebookPageToken", "myFacebookWebhookValidationToken");
// Defining a bot which will reply with "Hello World!" as soon as I write "Hi"addActionFrame(new MessageEvent("Hi"),new MessageAutoReply("Hello World!")); }
-
Replace the myFacebookPageToken with your API Token and myFacebookWebhookValidationToken with the Verification Token.
-
Deploy your app. The fastest way to do this is to just deploy it via Heroku. Heroku is an infrastructure service that you can use to launch different JVM Container (or Dynos) to run your JavaEE compliant service. Not only it provides an easy way to deploy your app, it also automatically uses SSL on it's free personal application domain.
-
Go back to your Facebook App Page and past the CallBack URL.
-
Subscribe your Webhook to your Facebook Page and you're done. Test it out!
Now that you're all set up, let's play around with your bot! The core of our framework plays around using builder patterns. When sending a message, it is important to keep in mind that whenever we receive a response from the user, we need to build a response object for it.
Here is an example of how you can create a text message response given a user input.
public FbBotMillResponse createResponse(MessageEnvelope envelope) {
String greetingMessage = "Hey There! ";
return ReplyFactory.addTextMessageOnly(greetingMessage).build(envelope);
}
Aside from sending a simple text, you can also respond differently, let say a generic template!
public FbBotMillResponse createResponse(MessageEnvelope envelope) {
return ReplyFactory.addGenericTemplate().addElement("Welcome to TechnoWebHub")
.addUrlButton("Go to Our Website", "http://www.technowebhub.com")
.setImage("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCau2xKug5qTlyXnwQDubIJDeBWvFy0YXPJmobXnMNwInJLDbj")
.addPostbackButton("Start Chatting", "chat")
.addShareButton()
.setSubtitle("Systems Development Company, How would like to check our services?")
.endElement().build(envelope);
}
Go to our snippets page for the complete list of Reply/Response type.
Either it's rule based or ml-based, receiving a message will be match to a configured Event.
There are different types of Events that can be use to catch a user input. The most basic one would be to match it against a specific string.
addActionFrame(new MessageEvent("text message"), new MessageAutoReply("simple text message"));
You can also match it against a Regular Expression.
addActionFrame(new PostbackPatternEvent(Pattern.compile("(?i:chat)")),
new AutoReply() {
@Override
public FbBotMillResponse createResponse(MessageEnvelope envelope) {
return ReplyFactory.addTextMessageOnly("Sure!").build(envelope);
}
});
A postback that returns a list.
addActionFrame(new PostbackPatternEvent(Pattern.compile("(?i:services)")),
new AutoReply() {
@Override
public FbBotMillResponse createResponse(MessageEnvelope envelope) {
return ReplyFactory.addTextMessageOnly("Services it is! Here you go!").build(envelope);
}
},new AutoReply() {
@Override
public FbBotMillResponse createResponse(MessageEnvelope envelope) {
return ReplyFactory.addGenericTemplate()
.addElement("Systems Development")
.setSubtitle("Custom Software Development with the latest cutting edge Technology")
.setImage("https://cdn3.iconfinder.com/data/icons/illustricon-tech/512/development.desktop-512.png")
.addPostbackButton("Inquire", "inquire_softdev")
.endElement()
.addElement("Infrastructure")
.setSubtitle("AWS Infrastructure Management with Certified Professionals")
.setImage("https://cdn3.iconfinder.com/data/icons/illustricon-tech/512/development.gears-512.png")
.addPostbackButton("Inquire", "inquire_aws")
.endElement()
.addElement("Web Hosting")
.setSubtitle("Professional Web Hosting/Domain Solutions for your Personal and Business Needs")
.setImage("https://cdn3.iconfinder.com/data/icons/illustricon-tech/512/structure.hierarchy-512.png")
.addPostbackButton("Inquire", "inquire_webhosting")
.endElement()
.build(envelope);
}
});
and clicking in inquiry will trigger the below postback event.
addActionFrame(new PostbackEvent("inquire_softdev", false), new AutoReply() {
@Override
public FbBotMillResponse createResponse(MessageEnvelope envelope) {
return ReplyFactory.addTextMessageOnly("Hold on tight, One of our Sales Development will be with you shortly!")
.build(envelope);
}
});
And even a catch all event.
addActionFrame(new AnyEvent(), new AutoReply() {
@Override
public FbBotMillResponse createResponse(MessageEnvelope envelope) {
if(safeGetMessage(envelope).equals("")) {return null;}
return ReplyFactory.addTextMessageOnly("I didn't get that, you can type in: products, service or bot demo").build(envelope);
}
});
For the complete list of our code snippets, you can view them all via our snippets page.
For more information on other callbacks, framework features or how to create a different kind of reply, check out the official wiki.