Keep Humans in The Loop With Botkit + Wordhop

Build a hybrid human + AI Messenger bot in minutes

Bots enable businesses to serve their customers immediately and reduce operational costs, but they can’t empathize like humans and more often than not can’t understand human intent. With Facebook recently disclosing that chatbots have a 70% failure rate, it’s critical that bot developers ensure that humans remain in the loop. Fortunately, Wordhop and Botkit have teamed up to help developers easily deploy hybrid human and AI conversational experiences and be better positioned to win at messaging.

Developers can build sophisticated Messenger bots with Botkit and then monitor and take over live with Wordhop. Because Wordhop is built on Slack, you can collaborate with human agents, AI Agents, and your customers all from a single interface and ensure a delightful conversational experience.

How Does It Work?

Wordhop monitors bots for problems and alerts a Slack channel when humans should take over live:

Wordhop’s smart alerts will notify humans even without a customer explicitly requesting human assistance. For example, if Wordhop detects negative sentiment from your bot, Wordhop considers that an “Urgent Matter” that needs human attention, and alerts a channel on Slack. Bot developers can create their own alerts as well using keywords (i.e. when a customer explicitly says “Human”). Alerts can also be filtered in any channel to reduce noise and so teams can focus on the most critical events in a conversation.

If you receive an alert and click Take Over, Wordhop opens a private Slack channel between you and your customer. The conversation on Messenger is replicated in a Slack channel and includes buttons, images, text, and user data passed from Facebook, so you’ll be able to take over with full context of what transpired between your bot and your customer.

If looping in humans into your conversational experience sounds like a painful experience, Wordhop leverages your existing integration with AI to help human operators be more productive. If you’re working with NLP like API.AI, WIT.AI, or LUIS, then Wordhop will use your bot’s responses to suggest responses to human agents, so you can make human agents more productive, reducing the effort required to respond to customers.

Because Slack is team-based, you can loop in members of your team on customer-specific issues, talk privately to solve a customer problem within a a customer transcript, or tag team on communications with your customer and solve a customer’s problem together. Through a single Slack channel, you can collaborate with team members, your bot and your customer in real-time.

Every alert in Wordhop is actionable. You can drill down into the alert to understand the specific problem with our conversational analytics. You can also use natural language to request reports at any time from Wordhop so you can talk about the data with your Slack team and make smarter decisions together.

Let’s Create a Human + AI experience

OK, now let’s create an AI + human conversational experience on Messenger using Botkit + Wordhop. We’ll use Glitch (Formerly GoMix) to host and deploy the app. Glitch is a web-based code editor that features instant deployments, so you can edit, host and test your bot’s code in one place.

☞ The Botkit + Wordhop toolkit is also available on GitHub if you want to host it yourself: https://github.com/wordhop-io/wordhop-npm/tree/master/examples/slack)

☞ This for creating a hybrid human + AI experience on Messenger. If you want to create a hybrid human + AI conversational experience for a Slack bot click here.

Step 1) Add Wordhop to Slack

To get started: Add Wordhop to Slack

Step 2) Tell Wordhop about the bot you’re going to build

Once you add Wordhop to Slack, follow the prompt to Add a Bot (You can also say “Add a bot” at any time to Wordhop). Tell Wordhop the name of the bot your going to build:

3) Get Keys From Wordhop

Click Continue and Wordhop will give you an API Key and a Client Key. Each bot deployment has it’s own unique Client Key while an API Key is for your Wordhop account.

4) Start a Glitch Project

Remix our Glitch project and you can continue to build on it later.

Start with Botkit + Wordhop for Facebook Messenger:
https://glitch.com/edit/#!/wordhop-botkit-starter-facebook

Click the title of the project in the top left corner and it will give you the option to Remix This. Click that to make the sample project your own.

You might see an a Log Error on Glitch. That’s OK. You’ll need to get some secret keys input and the error will disappear.

Open a new browser window and create a new Facebook App and Page or use existing ones. Then go to Facebook’s App Dashboard and under Product Settings click Add Product and select Messenger.

In the Token Generation section, select your Facebook Page. A Page Access Token will be generated for you. Copy this Page Access Token to your clipboard. Note: The generated token will NOT be saved in this UI. Each time you select that Page a new token will be generated. However, any previous tokens created will continue to function.

Once you have a Page Token, paste that into your Glitch app. Glitch safely stores these keys in an .env folder.

Now go back into the Slack channel where you added Wordhop and copy your Wordhop Client key and Wordhop API key. Paste both of these into the .env file on Glitch.

Create and enter a Verify Token here as well (make something up). Don’t worry — if anyone remixes your project, your keys won’t be shared. Note that add additional Studio Token variable in the .env file can be left blank. Add a Studio Token only if you’re using Botkit Studio.

Now, go back to Facebook and in the Webhooks section, click Setup Webhooks.

In Glitch, click the app name at the top of your screen and it will load up your callback URL. Copy that URL to your clipboard.

Enter that URL in place of _your_server_ https://_your_server_/facebook/receive

Your callback URL should look like this:
https://yourprojectname.gomix.me/facebook/receive

Enter your Verify Token that you entered into Gomix and select messagesand messaging_postbacks under Subscription Fields.

In the Webhooks section, subscribe the webhook for a specific page.

Once you have followed the steps above, make sure the Show Live button at the top of your Glitch screen is green like this:

You can test out your integration by sending your bot commands you know it won’t understand and then look for alerts in the Slack channel where you added Wordhop!

Before you go, some things to consider:

1. If you’ve considered a hybrid human + AI experience, check out what we’re doing at Wordhop, or just chat with us on Messenger and we can recommend a bot making platform based on your needs.
2. Recommend or share this if you found it useful. It gives us 🔋 to write knowing people find value in it.