How does Slack Live Chat integration work behind the stage?

published on 19 May 2022

Introduction

Software development is a popular topic and craft that is always going forward in terms of the necessary knowledge and work one needs to put in for delivering production ready solutions. The history of software development tools shows how quickly all technologies are changing, emerging into better ones or being replaced by other ones. There is no point where you could say about product development - it's done.

The community of developers can choose from a wide range of technologies to use and these decisions drive business into success or failure. A good choice can lead you to a competitive advantage, but a bad choice can lead to total refactoring of your solution that might be even too costly to do for the business.

Technology should help to solve problems or at least improve daily life. At SignalZen we're focusing on the latter - delivering a productivity boost for clients that want to use Slack as a platform for talking with their website visitors. At the same time, omitting other platforms (Live Chat administration) for dealing with. You can find more benefits of our solution in previous blog posts.

The development of a solution is not just a pleasure for those who like crafting, but a responsible and sometimes tedious work. Compliance of integrations, plugins maintenance and sometimes bug fixing makes software company's life boring from time to time. However, these struggles are paid off when clients see new features and say thanks for creating such a solution.

This blog post is about technical implementation that is almost not visible to clients of SignalZen. We're sure that some of them would be interested to know, how our system and processes work behind the stage.

Associative programming picture
Associative programming picture

Slack integration

Let's start with a Slack integration overview. You might be surprised how much efforts Slack Apps developers need to put in order to get approval from Slack for public App publishing on their App Directory.

There are 3 parties in all the integration:

  • Slack
  • Slack Workspace administrator
  • SignalZen

When our newly signed up client goes to the integration page on the Console, he's asked to choose the Integration Type for Slack. We give 2 options: Still or Noisy. They are different in how chat sessions are being processed on Slack and you can find more info about them with screenshots of their descriptions in this blog post.

What happens next, is that the client is asked to grant access to his/her Slack Workspace so that SignalZen could reach appropriate data and resources belonging to the client's Slack Workspace. This happens by using OAuth protocol.

OAuth 2.0

OAuth is a popular solution for granting access scope data for 3rd parties by not exposing your own password. More precisely the figure below shows the process of access granting for SignalZen Slack App.

Slack App's OAuth flow
Slack App's OAuth flow

Let's look into all the flow step by step:

  • Authorization Request is generated by our Frontend, which is basically just an URL that the Slack Workspace admin is redirected to. The destination is Slack side, where admin is asked if he agrees to grant permission scopes for certain resources that he/she owns at the Slack Workspace.
  • Once the approval by the client is given, the client is redirected back to the Frontend of SignalZen.
  • The redirect URL from Slack contains a code parameter which is the key for getting permanent access token which in turn can be used for other Slack Workspace resources access.
  • SignalZen Backend makes a request to Slack API for getting the Access Token.
  • The response which is the Access Token is saved in SignalZen database (encrypted) for fetching further resources that are granted.

The flow is pretty much complicated but needed for easy and understandable UI that clients see.

It's important to mention, that all this flow can work without the initial step - signing up at SignalZen. By clicking the button on the index page called "Add to Slack", you will be redirected to grant the access for your Slack Workspace and your SignalZen account will be created automatically. Great feature to save some time.

What's next after granting access for Slack Workspace?

After the access token is saved in SignalZen database, SignalZen has needed rights to actually perform some actions for your Workspace. This is how our server can send messages to Slack channels, create new channels, upload and receive files, etc. This doesn't mean that our bot can see all channels or files. It can do that just by being in the channels you invite the SignalZen Bot.

There are some features that Slack provides Apps with and the ones SignalZen is using:

  • Events webhooks - used for receiving to server certain events happening in the Slack Workspace, like a new message, bot invite, etc.
  • API - used for posting messages to channels or their threads, creating channels or uploading files, etc.
  • Interactivity webhooks - used for capturing interactive elements (buttons/modals) flows
  • Command webhooks - used for receiving commands to the server from Slack Workspace users

Each of the features has a different purpose and by combining them you can create really great features for any Slack App. We love that interactivity with custom buttons or modals can integrate into Slack experience so nicely.

Worth to mention, that we're also supporting OAuth flow for logging in by clicking a button "Log in via Slack" which works according to similar principles described above. The difference is that we request an access token just to check the Slack user data and then give access to log in by using the mentioned Slack user data.

How the Slack App approval process works?

As it has been mentioned before, getting your app to Slack Directory is not so easy. All apps must comply with UX, security and legal matters. There are lots of tiny bottlenecks that usually you're notified down the way from the Slack testing team prior to getting the approval.

Moreover, it doesn't matter if you got approval for the first time, it's not a lifetime approval. If you want to make any of adjustments to the technical side for your configuration of the App, you need to get re-approval from the Slack team.

If you're changing just visuals and descriptions of your listing in the Slack Directory, most of the time no one will re-test your app. However, if you're changing your App configuration for more OAuth access scopes, adding additional features from the Slack App integration toolkit, the testing team will be looking over your product again and again.

The legal side is also important, your clients must be aware of Terms of Service and Privacy Policy where you need to be attentive to details, especially their data control.

While writing this blog post, the current App review deadline is 4 weeks ahead, so you can't expect to get a review quickly.

Infrastructure

So what is actually behind the Slack App? Some servers have to keep all the communications with Slack cloud and some display the beautiful UI for Live Chat solution and configuration.

We have different Backend services specifically designed for dedicated purposes. The first type of Backend servers is written in a programming language that is fast for development purposes. The second type is written in more real-time performance focused language so that the Live Chat solution would be optimized for growth but at the same time costs saving.

Also, our Frontends (the Console and Live Chat widget) are written in React (JavaScript), and the mobile Apps use React Native.

All the infrastructure is scaled with Kubernetes and monitored with error reporting tools. Worth to mention, that we have zero tolerance for errors, so if any error occurs, we fix it the same day.

Security

Software security is one of the cornerstones of any software product. We take it seriously and the best practices are always in place.

Data encryption, concerns separation when designing infrastructure and 2FA for 3rd party providers are casual practices that we do.

Worth to mention, that we do not store any billing details from clients. We chose Stripe as our payments gateway and support 3D Secure authentication for those card owners who need to be compliant with it.

Summary

It was overwhelming to get to this point of our product state technically. Lots of lessons and integrations developed but the principles are the same.

Most of the time if you manage to get approval from Slack for a custom App, you will be able to develop any apps like for Shopify or other e-commerce platforms. Principles are the same and the biggest technical challenges are OAuth and organizing your infrastructure.

We're open to sharing our experience with like minded developers or companies who try to develop Slack apps, don't hesitate to reach out by using our Live Chat or by email [email protected].

Read more