Deploy a website support chatbot with API.ai & smooch.io in the cloud for $5/m

We have built a simple recipe to make your next website chatbot.

Well we did it again. We took a completely valuable thing that we could have made us money on and made it completely free. What are we thinking? Well I will give you an idea of our perspective, this stuff isn’t what we really want to do and we really like helping people so we thought this may help people. If more people are interacting with chatbots more people will understand what we are doing, so it is all good for everyone that it is in the wild.

I know, there is a lot going on here, but this is a pretty involved thing that we trying to accomplish in this cookbook. An integration that allows your customers to interact with both a support chatbot in the cloud as well as your entire team is a pretty big deal, and high value. This is about as easy as and cheap as you are going to get. We also are not using an application for our site, it is in s3 so our docker image is really just routing an integration between api.ai and smooch. But if all of this is too hard, go to our website at https://dronze.com, look in the lower right for “May I help you?” and tell our support chatbot that “I want to build a bot” and you will get info on how we can help you.

Here is the data flow for what is going on in this integration.

  1. Visitor gets index.html from s3
  2. Visitor starts conversation
  3. Smooch sends webhook POST to apiai-smooch-docker cloud endpoint, and to slack.
  4. apiai-smooch-docker instance sends message to api.ai via REST API
  5. api.ai sends respose to apiai-smooch-docker instance via REST API
  6. apiai-smooch-docker instance sends response to smooch via REST API
  7. smooch sends response to visitor and slack team.

So I am going to show you how to deploy this chatbot, that does quite a bit and is pretty darn good and cheap, onto your website very fast, but you will have to do a few things (that I will explain) to prepare.

Create your api.ai agent

So there is an art to creating a web support chatbot with api.ai, it is about breaking down how you think people will interact with your bot and what kind of things people will want to know. The good news is that once you learn how to do this you will have the basics of how most of the conversational systems like Lex, Seri, Watson, etc. work.

Create your supportbot agent

You will want to write down the the keys for your agent, specifically the client (read only) key. It is going to be used to configure your docker instance later.

Design your agent’s entities

For your chatbot to be able to associate what is being said to what is being asked of it some structure is helpful. This structure helps the system understand the best way to respond, even if the question isn’t exactly what the agent is prepared to say. This type of structure helps your bot understand what is going on, so the more you are willing to invest in this the more your chatbot will be able to do. These are the absolute basics, there is an awesome more detailed guide on sitepoint.com if you want a better getting started guide.

Start with your actions. All the actions do is tell your agent the kind of things that your website visitor is trying to accomplish. These are things like “tell” or “contact”, and as you can see each action type also has synonyms that will accomplish the same thing.

Actions are the types of activities that the support agent is being asked to do.

So the action nouns are intended to be the target of the intended action. That means “tell me about your products” would end up really just having two parts the action:tell and the action verb:product.

Action nouns are the things that actions are being targeted to or at.

Now we are starting to have some structure that our bot can use to communicate with. Remember, these are just the basics.

Design your agent’s responses to your customer’s intents

An intent could be defined as the primary goal that your website visitor has when asking a question to your chatbot.

So we are starting to see the beginnings of an interactive FAQ, that our visitors can use to get help, support and answers.

This is just the beginning, and the capabilities of api.ai go way beyond this cookbook. So keep playing with it, it can seem little difficult at first but the cool thing is since the brains of your bot is in the cloud, its easy to make enhancements and grow the capabilities of your bot without releasing anything.

Create your smooch.io account

Now it is time to create your messaging platform for your visitors to interact with your chatbot. We chose smooch for the following reasons:

  • Simplicity of solution.
  • Easy website integration.
  • Slack support.
  • Free when we are small, (pay when we are successful).

All you need to sign up is a google account.

Once you are in just create your application, in this case it is the supportbot.

We now have created the app, we want to get our token.

Write this token down because you will need it later for your configs, its used by your website in the javascript widget.

Create a REST API Key in smooch

Not only will the website be talking to smooch, our chatbot will too, so it uses webhooks to post back to our docker container what was said by the website visitor.

Make sure to write down your keys, these will be used later in your integration settings of the docker instance.

Connect smooch to your slack team (if you have one)

A very powerful, and yes even free feature of smooch is its integration with slack. While there are other solutions for customer service smooch seems to be the only one that does such a good job of integrating with slack. Goto the integrations tab on the home screen, and scroll down until you see slack.

Its really easy because just like dronze.com smooch is a once click add to slack. If you as a user are allowed to add apps then you just need to click through, and smooch will ask to be added to your slack team.

Once you have added smooch to your slack team it will interact with your team in the channel you choose (see section below Talking with your chatbot)

Launch the claytantor/apiai-smooch-docker docker container on Digital Ocean

So this part is a little bit up to you, there are a number of great places that you can host docker containers so its your call, but digital ocean is a pretty easy and cheap choice so I thought it would fit in this howto.

You will need a droplet running

You aren’t going to launch an instance, they have good to go docker containers that are ready to host your chatbot docker app container.

Choose the docker app container, which basically is just an ubuntu instance with docker already installed.

And choose the instance size. We are going to choose the absolute smallest for this because there really is not a lot of computing going on in our docker container, its basically just a router. I would recommend finding some other cool containers to run on this instance as well.

SSH into the droplet

You will need to login the instance so you can configure the settings and start up the docker container.

$ ssh -t -i ~/mykey.pem root@docker-512mb-sfo2-01.digitalocian.com

Configure the claytantor/apiai-smooch-docker instance

Create a directory for your configs.

$ mkdir ~/config
$ touch ~/config/smoochbot-apiai.properties

You can now make the settings that the docker container will use called smoochbot-apiai.properties and put in a directory config.

# provided by smooch web api so the application can create the webhook and postback
SMOOCH_KEY_ID="
app_1819128aj2oal29s"
SMOOCH_SECRET="
p0ksm7jskRTlska01Gh"

# this is where events will be sent to (your docker ip address)
SMOOCH_WEBOOK_ENDPOINT="http://
docker-512mb-sfo2-01.digitalocian.com:8079/smooch/events"

# these configurations are for the robot itself
SMOOCHBOT_NAME="supportbot"
API_AI_TOKEN="
ahajsjs712ab821jx" # client id token
DEBUG="False"

Run the claytantor/apiai-smooch-docker instance

Now you are ready to start up the docker instance. Make sure the name of the config file is correct it expects it to be smoochbot-apiai.properties. You can the pull and run the docker image. We have published it on DockerHub, so your pull should get the image automatically.

$ docker pull claytantor/apiai-smooch-docker
Using default tag: latest
latest: Pulling from claytantor/apiai-smooch-docker
$ docker run -t -d --name apiai-smooch-docker -v ~/config:/mnt/config -p 8079:8079 claytantor/apiai-smooch-docker:latest

That’s it your docker instance that routes messages between smooch and api.ai is up and running. For more details check out the README.md on the github repo. (this is all open source)

Integrate smooch.io with your website

<script src="//cdn.smooch.io/smooch.min.js"></script>
<script>
Smooch.init({
appToken: 'ak7ba23lmija3bbakma78lm',
customText: {
introductionText: 'We want to talk to you! Sometimes we are not online, but our chatbot friend can talk to you in the meantime. Be sure to tell it how we can keep in touch. We never share your info.'
}
});
</script>

Talking with your chatbot

Now you are ready to talk to your bot. Start simple and build up. One of the best things about this approach is that if it is not quite what you want it is easy to go to api.ai and change it. You should see the changes immediately once you save.

That’s all there is to it. Your support robot is live!

Test that your slack integration is working

When your visitor talks to your support chatbot smooch automatically creates a channel for 1:1 (or 1:1:chatbot) communication so that you have a way to isolate the conversation with your visitor.

so in this case if a team member wa available they could have a direct conversation with the customer by going to the channel #sk-actual-crayfish.

/sk we can help you with that! what are you trying to accomplish?

And the message from the team gets routed, now you have belt and suspenders covering the front door!

So there you go. I fully integrated intelligent (as you are willing to make it) support chatbot right on your website, with human backup. Both able to use your team’s collaboration tools to have conversations directly with customers who visit your website. That’s pretty dope.

Out.