loading words...

Jun 13, 2019 10:23:13

Integrating Slack in a Website

by @basilesamel PATRON | 588 words | 383🔥 | 431💌

Basile Samel

Current day streak: 383🔥
Total posts: 431💌
Total words: 204512 (818 pages 📄)

Instant communication channels have been around for a long time. Their business value cannot be ignored: you can build entire communities from a chat application. Telegram, Slack, or Discord have become mainstream tools in most organizations.

Relying on free external services has its limits though, most users do not want to install anything or create an additional account. It's especially true for tech products such as web applications: it's already hard to convince a user to use your product, why would he/she want to subscribe to another service within it? It feels redundant, it's not practical.

On the other hand, implementing a chat application is no trivial task. The user interface quickly gets out of hand, messages must be loaded in near real-time, you need to keep track of the user presence, messages must be stored... it's an entirely different area of expertise that comes with heavy operational costs.

That's where the chat integration comes in, it allows you to get the best of both worlds: less coupling in your infrastructure, better features, and more importantly, increased interactions between your users.

To give you a concrete example, 200 Words a Day is an online community based on its own website. Soon after the minimum viable product phase I decided to establish a Slack workspace in parallel, to interact with the members in a different way. Out of the 2800 members who registered on the platform, 130+ users joined the Slack workspace. That's only a 5% conversion rate.

Progressively moving off Slack appeared as the most straight-forward way to increase interactions between members. The issue is I don't want to build a chat app from scratch. I tried already in a previous project and it wasn't easy. I do not want to increase my server costs either. The best approach was to use Slack's API to create a client within 200WaD. This way, users who didn't registered in Slack can still read what's going on, which in turn should result in a higher conversion rate.

1. Installing a Slack App

Log in Slack and head to api.slack.com/apps to create your Slack client. You will need a workspace ready with admin rights.

Once the app has been set up, you obtain a Client ID and a Client Secret.

Add a bot user by clicking on the "Bot Users" tab in the left menu.

Navigate to the "OAuth & Permissions" page of your Slack application to add some permission scopes. Let's start with channels:history, channels:read, chat:write:user, groups:history, groups:read, incoming-webhook, bot, users:read, and users:read:email. Those scopes will allow us to write and read from/to public and private channels. Save the changes and hit "Install App to Workspace".

You will be prompted to a confirmation page. Choose any channel to confirm the installation - it doesn't matter which one - and click "Install".

You are redirected to the OAuth & Permissions page. Copy both your OAuth Access Token and your Bot User OAuth Access Token.

You just need to configure one thing in the same page: a redirect URL. The Redirect URL is used in the login process, it's usually the URL you use to enter your chat application from within your website. For example, my local environment uses http://localhost:8000/chats, but I have another Redirect URL (https://200wordsaday.com/chats) in my production environment. Add both and save the parameters.

You now have a client ready to interact with your Slack workspace.

2. Implementing a Slack Client

A. Storing and Syncing Users

B. Slack RTC and Web APIs

From Basile Samel's collection:

contact: email - twitter / Terms / Privacy