Slack Webhook Integration Example

Overview

This example shows how to create a weather Slack bot using API.AI Slack Integration in a combination with a webhook for the Yahoo Weather API service.

Our Slack bot will be able to respond weather related questions in such a beautiful format:

Sending Formatted Data from the Web Service

In order to send formatted data from the web service, we need to define the message format in the “data” field in the response from the service.

The Slack bot message format is described in the following Slack documentation:

For Slack bots, in the “data” field in the response from the service, the message format should be defined as the value for the “slack” field:

"data": {"slack": {<slack_message>}}

In our example, the message format is already defined and looks like this:

slack_message = {
    "text": speech,
    "attachments": [
        {
            "title": channel.get('title'),
            "title_link": channel.get('link'),
            "color": "#36a64f",

            "fields": [
                {
                    "title": "Condition",
                    "value": "Temp " + condition.get('temp') +
                             " " + units.get('temperature'),
                    "short": "false"
                },
                {
                    "title": "Wind",
                    "value": "Speed: " + channel.get('wind').get('speed') +
                             ", direction: " + channel.get('wind').get('direction'),
                    "short": "true"
                },
                {
                    "title": "Atmosphere",
                    "value": "Humidity " + channel.get('atmosphere').get('humidity') +
                             " pressure " + channel.get('atmosphere').get('pressure'),
                    "short": "true"
                }
            ],

            "thumb_url": "http://l.yimg.com/a/i/us/we/52/" + condition.get('code') + ".gif"
        }
    ]
}

Deploying the Web Service

Log in or sign up to Heroku.

Go to https://github.com/xVir/apiai-slack-richformatting and click 'Deploy to Heroku' button.

Heroku website will open, and you’ll be asked to fill in the app name. Insert the app name (in our example, it’s “yahoo-weather”, but you can choose your own name) and click 'Deploy for Free' button.

Wait until 'Your app was successfully deployed.' appears.

Creating an Agent and Enabling Webhook

Create an API.AI agent and enable webhook:

  • Click on Fulfillment in the left side menu
  • Turn Webhook on
  • Insert the link https://[App Name].herokuapp.com/webhook into the ‘URL’ field
  • Click ‘Save’.

Create an intent that will match weather requests. The intent should have the geo-city parameter. The action should be defined as yahooWeatherForecast.

Make sure the ‘Enable webhook for this intent’ option in the ‘Speech Response’ section is checked.

In the ‘Speech Response’ field, define the response that will appear in case of web service errors.

Creating and Testing Your Slack Bot

Сlick ‘Integrations’ from the left side menu and turn Slack integration on.

To define the way people can interact with your bot, tick the relevant checkboxes in the ‘Message Types’ section.

  • Direct message. The bot will receive a direct message from a user.
  • Direct mention. The bot will answer when mentioned at the beginning of a message.
  • Mention. The bot will answer when mentioned in any part of a message.
  • Ambient. The bot will monitor any message in a channel.

Before publishing your agent as a Slack bot or App, you can run it in test mode. To do this, connect it to your Slack account by clicking 'Test in Slack' and then signing in with your team account. The API.AI Bot will appear in your Slack team members list. To stop the test, click the ‘Shutdown test bot’ button.