Build an Onboarding App using Airkit and Slack

I had recently looked at automating Airkit’s our onboarding process for Slack and realized there was an opportunity to utilize an Airkit platform to create a Slack app.

So rather than having a developer tackle a complex server-side application for this Slack application, I wanted to see if I could build out this Slack app on Airkit in 30 minutes. Let’s get started!

Application Overview

In this tutorial, you will build a self-service Slack application which introduces yourself to a Slack workspace.  You will learn how to build a Slack Application in Airkit, create two application endpoint APIs which interact with Slack, integrate Airkit with the Slack communications platform, and build a set of webpages in Airkit which will feed information to Slack.  You can watch a video of this build published on the Airkit YouTube channel, so feel free to follow that tutorial as well. Let’s get building!

Prerequisites

To build along with this tutorial, you will need a few things to get started:

• Slack Workspace Account with Admin Access
• Access to Airkit Studio

Setting up an application in Slack

You will utilize your Slack Workspace in order to create the Welcome Bot Application.  You will performing the following tasks in order to create the new Slack application:

• Create a new Slack App
• Name the application
• Configure OAuth Scopes
• Set the App features and functionality
• Install app to Slack Workspace.

First to create a new Slack App, you will need to go to https://api.slack.com/apps.  

You will click Create New App.  This application will be created from scratch.  Next, you will name the application, Welcome Bot Application.

You will configure the OAuth Scopes with the following configurations

Initially the App features and functionality with just be the following see the screenshots:

You will install the app to the Slack Workspace.

You will add to the newly created Welcome Bot Application to the workspace:

The initial setup of the Slack application is now finished.  You will need to set up the Event Subscription and Slash command.  You will need to jump over to Airkit Studio to complete some tasks to complete these two configurations.  You will create a Custom Integration with Slack and Create two Application API endpoints.

If you have further questions, please refer to the Slack documentation for more detailed instructions on how to create a new Slack app.

Creating an Integration with Slack

Let’s get started with setting up a Slack integration.  You have already created the Slack application and set up an OAuth Token for your Welcome Bot application.  You will use information from the Slack App in creating the custom integration.

In order to create the custom integration, you will go to the Console, click on Integrations, Custom Integrations, and Create New.

For the Custom Integration, you will need to create the following configuration parameters:

• Integration Name: Welcome Bot – AK Builder
• Key
• Authorization Type: API Token
• Token Parameter Type: Header
• Token Parameter Name: Authorization
• Token Parameter Value Template: Bearer {token}

See the example screenshot below:

Next you will create an Connected Account to fill in the necessary information to the integration.

You will go to Console, click on Integrations, Connected Accounts, and Create New.

For the Connected Account, you will need the following parameters:

• Connected Account Name
• Integration: Welcome Bot – AK Builder
• API Token: OAuth Token from Slack

See the sample screenshot below:

One last step you will need to do will be to add the integration into the Airkit app.  You will need to go to the Settings Module and add the Integration and Connected Account shown in the screenshot example:

Congrats you created a custom Slack Integration!  This custom integration will be used later in a HTTP data flow within one of the Application APIs. 

Refer to the Airkit Documentation regarding Setting up Integrations for more in depth instructions on how to connect OAuth2 Integrations.

Creating Application API endpoints

In order for the Slack Application Event Subscriptions and Slash commands to work properly.  You will two create two API endpoints for the Slack Application to communicate with.

In order to create a new Application API, you will need to go to Studio, Trigger, App APIs, click on the +, Create New App API, and select the appropriate URL Route you plan to use.  See the example below:

After you have the base URL for the Application API you will need to create two POST endpoints for the new-user and say-hi.  See the screenshots below:

To create the new endpoints, click on the + to the right of the Base URL.  Then you will need to configure the first end-point for the new user as  https://app.airkit.com/I/DY/new-user. The example is shown below:

Next, you will create the Slack Event Subscription.  The Slack Event Subscription requires a challenge parameter returned to it from the Airkit Webhook API.  You will add the configure the API Response as follows:

•  Response Status: 200 and 
•  Response Body variable back { “challenge” : payload.body.challenge}.  

See the example screenshot below for the configuration of the API Response.

With the Slack App Setup, you will add the Slack Event Subscriptions by:

1. Enabling the Events
2. Updating the Request URL with the Airkit App API new-user
3. Make sure the Request URL get verified

After the Request URL gets verified you will be able to Subscribe to bot events.  With Add Bot User Event, you will look up and add the team_join event.  Then save changes

Repeat the similar steps for the https://app.airkit.com/I/DY/say-hi endpoint.

However, the response body is different.  You will be responding with some text to Slack along with a start journey URL from Airkit.  The Response Body will be configured with the following JSON body:

{

 “response_type”: “in_channel”,

 “text”: “Thanks for saying hi! Click this link to fill out your welcome info in an Airkit app! {{

   journey.url

 }}”

}

You will configure the Response like the screenshot shown below:

In order to get a journey link you will need to add in a data operation which will create a new Journey.  The data operation to add will be Start Journey:

Also add a Run Event in Journey data operation shown below:

Now that you have established the Airkit App API say-hi endpoint, you can configure Slack to call this new slash command within Slack.

For the /say-hi command, you will be creating a new slash Slack command which launches the welcome application you will create in Airkit.  You will create a New Command.

The /say-hi command will be configured with the following parameters:

1. Command : say-hi
2. Request URL : https://app.airkit.com/l/DY/say-hi (please configure specifically to your App API URL Route)
3. Short Description: Welcome to the application to introduce yourself

Once the /say-hi command is added you will be asked to re-install your apps.  Go ahead and reinstall them so they take effect.

Once this is completed, you will get a notice in Slack that you will be able to use /say-hi in the workspace.

If you test the /say-hi command you will get the following Welcome Bot Response:

Although the /say-hi command works, you will still have to finish configuring the Airkit Application to the journey link provided in the Welcome Bot message.  The Journey link is the entry to the Airkit application you will be creating next.

After all the Bots, Permissions, Event Subscriptions and Slash Commands are completed your Slack Features and Functionality will look like this:

Building the Airkit Application

You have created the Custom Integrations to Slack, Slack Applications, and App APIs to interact with Slack from Airkit.  Now we will create the front end application to bring all of these pieces together.

Within Webflow Builder you create two web pages:

1. Welcome Web Page
2. Thank You Page

First, you will create a webpage similar to the one shown below in the screenshot:

Here is an overview of the controls you will need to add in to create this page:

This webpage will be collecting information from the user to submit to the Slack #general page introducing them.  The key data collected will be their Name, Project they are working on and a photo.

Within the Submit Button Actions, there will be a call to a Data Flow which you will need to create called Introduction Data Flow. 

In order to use the Data flow, you will create it in the Connections -> Data Flow -> Click + -> Name the Dataflow “Introduction Data Flow”.  As seen above the data flow requires three inputs, you will need to create two text inputs and one media asset input.

You will need to add a single Data Operation to the Data Flow: HTTP Request.  

You will utilize the Slack Integration previously created “Welcome Bot – AK Builder”.  The configuration parameters of the this HTTP Request are the following:

1. Service : Welcome Bot – AK Builder
2. Method : POST
3. URL : “https://slack.com/api/chat.postMessage”
4. Content-Type : “application/json”
5. Body :  (see screenshot)

Now you are finished with the Welcome Web Page.  Next you create a Thank you Page.

The Thank you page is just a simple notification to the user that their intro has been sent to the Slack #general channel.

You will create a page similar to the one shown below:

At this point you have completed building the application.  Test your Slack Welcome Application out to see if it works as expected.

You should be able to type /say-hi in your Slack Workspace.  Receive back a bot message with an Airkit Journey Link:

If you click the link and complete the Welcome Form it will submit a message to the #general channel.

If they work, congratulations you have created a Slack Onboarding Automation App!  

Wrap-up

Hopefully the walkthrough of Slack Onboarding application has been a helpful guide on how to integrate and automate tasks and messaging with Slack.  We have learned how to integrate with Slack, create APP API webhooks, and some common Airscript uses.

This use case can be built upon for additional use cases and other notification methods in Airkit.  You could add log notifications using Slack. The options are endless on additional use cases.  Try adding some new use cases and let us know!