Skip to main content
Log inStart for freeTalk to sales
Developer Portal
Seamless Integration of Slack with Sendbird's Chatbot API: A Step-by-Step Tutorial
Chat SDK v4 2x

Swift, Kotlin, and TypeScript SDKs

Build in-app chat, calls, and live streaming

On This Page

Seamless Integration of Slack with Sendbird's Chatbot API: A Step-by-Step Tutorial

Jason Allshorn 1
Jason Allshorn
Solutions Engineer
AI Chatbot
Sendbird Docs
Sendbird Community
  • Tutorial Type: Basics
  • Reading Time: 3 mins
  • Building Time: 10 mins
Chat SDK v4 2x

Swift, Kotlin, and TypeScript SDKs

Build in-app chat, calls, and live streaming

Chat SDK v4 2x

Swift, Kotlin, and TypeScript SDKs

Build in-app chat, calls, and live streaming

On This Page

Seamless Integration of Slack with Sendbird's Chatbot API: A Step-by-Step Tutorial

Discover the seamless integration of Slack with an AI chatbot powered by Sendbird, where the chatbot API, Slack chatbot, and chat widget come together to revolutionize communication within Slack. This step-by-step tutorial guides developers through the process, showcasing how to leverage the chatbot API to create a Slack chatbot that enhances team interactions and streamlines workflows.

The heart of this integration lies in the chatbot API, which serves as the backbone for developing the Slack chatbot. The chatbot API provides the necessary tools and protocols to bring intelligent, AI-powered interactions to Slack, enabling the Slack chatbot to understand and respond to user queries effectively. By tapping into the chatbot API, developers can equip the Slack chatbot with advanced functionalities, from handling customer support inquiries to managing internal tasks.

Moreover, the integration highlights the importance of the chat widget as a pivotal element in this ecosystem. The chat widget, designed to facilitate easy interactions within Slack, is customizable through the chatbot API, ensuring that the Slack chatbot delivers a user-friendly experience. It's the chat widget that allows for a seamless blend of AI capabilities and Slack's collaborative environment, making the Slack chatbot not just a tool, but an integral part of the team's daily operations.

Incorporating a chat widget into the Slack chatbot experience elevates the functionality of Slack channels. Whether it's for customer service, team collaboration, or task automation, the chat widget ensures that interactions are intuitive and efficient. The chatbot API's versatility enables developers to tailor the chat widget and the Slack chatbot to meet specific business needs, demonstrating the power of integrating these technologies.

This tutorial is not just about connecting a chatbot API with Slack; it's about reimagining what's possible in communication and task management with a Slack chatbot. Through the detailed guidance provided, developers will learn how to integrate a chat widget within Slack, powered by the chatbot API, to create a Slack chatbot that stands out for its intelligence and usability.

This step-by-step guide is an invitation to developers to explore the synergy between the chatbot API, Slack chatbot, and chat widget, encouraging them to leverage these technologies to build solutions that make Slack an even more powerful tool for teams and businesses.

Prerequisites

Before we get started, you'll need the following prerequisites:

  1. A Slack account with administrative access to create and configure apps.
  2. A Sendbird account. If you don't have one, you can sign up for free at Sendbird's website.
  3. Basic knowledge of JavaScript and web development.
  4. Access to a web server or hosting environment for deploying your chat widget.

What will be covered

  1. Introduction to Speaking with a Sendbird AI chatbot from Slack

  2. Setting Up a Slash Command Bot in Slack

  3. Setting Up a Chat Bot in Sendbird

  4. Setting Up a Proxy Server

  5. Deep Dive into Proxy Server Configuration

Implementation

Step 1 - Introduction to Speaking with a Sendbird AI Chat Bot from Slack

This project has the target of being able to send a message and get a single reply from a Sendbird AI driven SmartAssistant ChatBot. As seen below the service uses slash commands to ask a question to the Sendbird ChatBot. The Sendbird Chatbot can be set up any knowledge base from which to answer questions.

Video introduction

As seen below a user enters a /ask + question in Slack and then the service sends a message to a proxy server which then calls Sendbird and then the response is passed back down to Slack.

Step 2 - Setting Up a Slash Command Bot in Slack:

  1. Navigate to your Slack App settings and create a new Slash Command.

  2. Configure the command request URL to point to your proxy server.

  3. Link to Slack Slash Command setup guide, and video for this project.

Step 3 - Setting Up a Chat Bot in Sendbird:

  1. Create a new bot in the Sendbird dashboard, with a video guide here.

    1. We gave the bot an id of banana_savvy for this project.

  2. Add a knowledge base of your choosing (see image below).



Step 4 - Setting Up a Proxy Server:

This project implements a basic server using Node.js to handle requests from Slack and forward them to Sendbird. You are welcome to remix and use this example in Glitch. There is a set up video guide here. You will need App Id, Api Token and your Sendbird bot ID from the Sendbird Dashboard and your signing secret from your Slack App dashboard.

Sendbird Dashboard

Slack App Dashboard

Proxy Server Deep Dive:

The full code for the server can be found in the Glitch Example’s server.js file and there is a video walkthrough of the code here. Below are details of what the code is doing.

  1. The server carries an endpoint /message_to_bot.

  2. The call is intercepted by a middleware to authenticate the call from Slack.

  3. Once past the middleware a response is sent right away to Slack, so the user knows the service is working and to keep within Slack’s timeout restrictions.

  4. Next the message from the user is passed to a function to forward the user’s question to your Sendbird Chatbot.

server.js

https://gist.github.com/sendbi...

app.post('/message_to_bot', authenticateIncomingSlackCalls, async (req, res) => {
const { text } = req.body;
res.json({ response_type: 'in_channel', text: `🤖\nQ: ${text}` });
passMessageToSendbirdBot(req.body);
});


  1. Below we can see that from the payload provided by Slack we gather the text and append it to an array of messages which can be read by the Sendbird Bot.

  2. The message is sent off to your Sendbird Chatbot and the response contains an array of reply_messages from which we gather the first.

  3. Slack’s slash command request payload also included a reponse_url which is now used to pass the Sendbird’s ChatBot reply down to Slack.

server.js

https://gist.github.com/sendbi...

const passMessageToSendbirdBot = async (payload) => {
try {
const response = await axios.post(`https://api-$;{process.env.SENDBIRD_APP_ID}.sendbird.com/v3/bots/YOUR_BOT_ID/ai_chatbot_replies`, {
messages: [
{ role: 'user', content: payload.text }
]
}, {
headers: { 'Api-Token': process.env.SENDBIRD_API_TOKEN, 'Content-Type': 'application/json' },
maxBodyLength: Infinity
});

const message = { response_type: 'in_channel', text: `A: ${response.data.reply_messages[0]}` };
await axios.post(payload.response_url, message);
} catch (error) {
console.error('Error in performFurtherActions:', error);
}
};


Conclusion

This guide covered the essentials of integrating Sendbird's AI chat functionalities within Slack, from setting up a Slash Command Bot to implementing a proxy server for seamless communication. This integration not only enhances user experience but also streamlines internal and external communication processes.

Related Tutorials

Tutorial
What is a webhook? How do webhooks work?
Tutorial
How to customize your iOS app chat UI using Xcode debug
Tutorial
How to master prompt engineering, function calling, and the use of GPT
Item 1 of 2
01/02
Tutorial
What is a webhook? How do webhooks work?
Item 1 of 5
01/05

Need more resources?