Blog

How to Build Your Customer Support Chatbot with API.AI in Simple Steps

How to Build Your Customer Support Chatbot with API.AI in Simple Steps

As an Engineering Manager of Digicorp, I am responsible for improving overall engineering processes of product design and development.  I am also responsible for building quick prototypes to upsell our new offerings.

Recently, we have been  working on products like mobile assistant for expecting mothers, mobile app for parents of autistic child, web portal for educating teenage girls and a career guidance portal. All of these solutions are content-rich.  Information Architecture plays a vital role in such content-rich apps and it is one of our strong areas but we still feel  that, there will be a large number of users curious to get quick answers on specific questions. To achieve that, we came up with an idea of implementing Chatbot along with existing offerings.

The goal was to build a quick prototype and demonstrate existing clients how chatbot can solve above and other online support problems.

We quickly built chatbot for

  1. Facebook Messenger
  2. Website
  3. iOS Application
  4. Android Application

We used Api.ai for the same and here are the simple steps for you to follow.

Building Facebook Messenger Chatbot

  1. Login to your Facebook account and create a Facebook page of your choice
     

    Building Facebook Messenger Chatbot Step 1- Digicorp

  2. Open Facebook apps developer console and click on Add New App. Give valid name of the application and click on Create App ID
     

    Building Facebook Messenger Chatbot Step 2- Digicorp

  3. Once the application is created, you will be redirected to Facebook app dashboard. Select Add Product and it will show you different products for which a facebook app can be created. Select Messenger and click on Setup
     

    Building Facebook Messenger Chatbot Step 3- Digicorp

  4. Now go to messenger’s Setting and generate a token for your Facebook page. You will be able to see list of Facebook pages that you have in your account. Select a page and it will generate token for that page. Keep this token for future use.
     

    Building Facebook Messenger Chatbot Step 4- Digicorp

  5. Now it is a time to connect Facebook messenger with automated response engine. We are going to use api.ai for the same. Open api.ai in a new tab, go to console and create a new agent. Leave everything blank except name of the agent and save it.
     

    Building Facebook Messenger Chatbot Step 5- Digicorp

  6. api.ai provides list of integrations. We are going to use their Facebook messenger integration. Go to Integrations and select Facebook messenger
     

    Building Facebook Messenger Chatbot Step 6- Digicorp

  7. Once you enable Facebook messenger integration, you need to do following changes.
     
    • Copy Callback URL and keep it with you for future use.
    • Enter verification token. It is manual entry. Choose any alphanumeric value.
    • Paste the Facebook page token that we have from Step 4.
    • Click on Start. It will start the bot engine on api.ai.
       

      Building Facebook Messenger Chatbot Step 7- Digicorp

  8. Go to Facebook app of step 4 and click on Setup Webhooks. You need to do following changes,
     
    • Paste callback URL that we have copied in Step 7
    • Enter the same verification token that you used in Step 7
    • Select subscription fields. messages and Messaging_postbacks are two subscription should be selected for facebook messenger chat bot
    • Click on Verify and Save
       

      Building Facebook Messenger Chatbot Step 8- Digicorp

  9. Once Webhooks Setup is complete, you need to setup subscription of particular web page. Check below webhooks setup, select page and click on Subscribe. You are done with all the configuration that established a handshake mechanism between automated response engine api.ai and your Facebook page. Now need to feed the data to api.ai.
     

    Building Facebook Messenger Chatbot Step 9- Digicorp

  10. Go to api.ai console and select an agent that is connected with Facebook page. Click on Intent and Create Intent. You can write possible combination of questions under User Says and possible response and Save it. You can learn more about intents, events, actions and different type of responses on api.ai documentation.
     

    Building Facebook Messenger Chatbot Step 10- Digicorp

  11. You are almost there! Go to Facebook web/mobile messenger and search for chatboat that you have created. And start typing. It will start replying as per the responses from api.ai engine. So far only admin can use this chatbot. Once application is submitted to Facebook for review process and after it gets approved, it will be  accessible in public. You can learn more about the review process from here
     

    Building Facebook Messenger Chatbot Step 11- Digicorp

Building Chatbot for Web

  1. Go to api.ai and select the Web App integration from list and enable it.
     

    Building Web App Chatbot Step 1- Digicorp

  2. Click on Web Demo integration and copy iFrame code
     

    Building Web App Chatbot Step 2- Digicorp

  3. Paste that iFrame code on web page and it will show the web client on web.
     

    Building Web App Chatbot Step 3- Digicorp

Building Chatbot for iPhone

  1. Go to api.ai. Open agent setting and copy client access token
     

    Building Chatbot for iPhone

  2. Clone iOS api.ai client from github.
  3. Run ‘pod update’ in the ApiAiDemo project folder.
  4. Open ApiAIDemo.xworkspace in Xcode.
  5. In viewDidLoad method of  ViewController, replace copied token from step 1 to YOUR_CLIENT_TOKEN
  6. It’s done. Run the application.
  7. The provided library has a very basic version of showing responses. You can always enhance to real chat application along with nice UI and branding.

Building Chatbot for Android

  1. Go to api.ai. Open agent settings and copy client access token.
     

    Building Chatbot for Android

  2. Clone Android api.ai client from github.
  3. Open Android Studio.
  4. Import the api-ai-android-master directory.
  5. In the Project browser, open apiAISampleApp/src/main/java/ai.api.sample/Config.
  6. Replace ACCESS_TOKEN with copied token from step 1.
  7. It’s done. Run the application.

I hope these simple steps will help you build quick chatbot prototypes for you and your clients.  Do share your thoughts after you bring them in production.

Tags: , ,

 


Looking for a quote to develop your product or looking for a long-term product development partner? Contact us using the form below and get your FREE quote!





 

Or call us at below numbers:


USA


Sanket Patel
701 Brazos St. Suite 1616, Austin
Texas 78701
USA
+1 (832) 947-3143
sales@digi-corp.com
View Map

INDIA


Nachiket Patel
Digicorp House, Ambawadi Ahmedabad 380015
India
+91 79 26304681
sales@digi-corp.com
View Map


Want to Join Digicorp? Click Here