So maybe you have a sweet Slack channel for you and your friends, or a D&D Group, or Car club. Whatever it might be, an often seen pain point is requiring people to provide you and email, kick out an invite, and hope that link didn’t expire before they eventually get to it. What if you could have a dedicated site, setup to provide users the ability to sign up on their own? And even add a Slack badge to your site to allow them to sign up directly from there if you already have an existing landing page.
Leveraging Heroku, a small deployment applet called Slackin, and some Slack API keys, you can do just that. You can even add Captcha, and other neat features to your icon or page to make it super slick. Come on an adventure and let’s set it up!
Prerequisites
A Slack Channel setup and running
Administrative rights to that Slack Channel
A Google account to configure Captcha
About 15 minutes of time
Getting started - Slack API Token
Now that you understand what we’re doing, let’s get our API token created and working. The quickest route is to head to this link and authenticate as an admin.
Scrolling about 50% down the page, look for the legacy information section. You’ll need to create a Legacy Slack Token for your workspace. DO NOT SHARE THIS TOKEN OUT. Don’t screen shot it, paste it into a chat, etc. This is unfettered access to your instance via API. So be careful. With that created, leave that tab open and let’s install the Heroku applet.
Installing Slackin via Heroku
Slackin is the magic maker for this project. It allows our API token to talk to both Slack and Heroku to generate the page, the button, and our mini button you can embed. With our API Token setup, let’s head over to Github to install Slackin. Head to the below link and look for the Purple “Deploy with Heroku” button about 25% of the way down the page. Don’t have a Heroku account? No worries! They are free for something of this scale, and it’ll have you signup as soon as you click the button.
https://github.com/emedvedev/slackin-extended
Click on the Purple “Deploy with Heroku” button to send the installer configuration over to Heroku and sign up or sign in with your account.
Heroku Configuration and Deployment
Now with our Heroku account created, we can deploy Slackin. Slackin has a number of parameters that need to be configured. Things you will need to fill in
Required
App Name - Give it a name you can remember (typically just name it the same as your slack channel/workspace)
Slack_API_Token - Remember our Token we created in that other tab?
Slack_Subdomain - You only need the actual subdomain. Do not include the .slack.com part of your address. So if your workspace is HondaOwners420.slack.com, just include the HondaOwners420 text here.
Optional
Recaptcha - Various settings for recaptcha v2 from your google account
You can access your Captcha/Recaptcha settings here:
https://www.google.com/recaptcha/admin/create
Slackin_Accent - Theme up your Applet!
Slackin_Analytics - Advanced analytics for your entry point
Slackin-Channels - Default channels to add members to (think gateway host or a way to vet new users or present rules before opening the gates)
Slackin_COC - you link to your sites Code of Conduct (Standard HTTP link)
Slackin_interval - How often your applet calls home to update
Slackin_theme - Light or dark mode?
Fill in the required and option settings as needed. Once finished, click Deploy App at the bottom of the page. This will take about 30-45 seconds to finish. When finished, click View.
Finishing Touches
Now your page is up and running! You can access it anytime by heading to AppName.herokuapp.com (and including your App Name you named it). You users can simply put in their email addresses and get the signup email sent directly to them. No interaction needed. You can log into Heroku anytime and ajust your settings or site info. Click the Settings tab and click Reveal Config Vars. Updated and redeploy as needed.
And now to add it to your site as a clickable icon. You just need to include this one liner into your code or inside a <div> somewhere. For Squarespace sites like this one, you can add the Slack button by adding a Embed block > Advanced Embed (the little symbol in the upper right) > and pasting in the following code:
<script async defer src="https://AppName.herokuapp.com/slackin.js"></script>
Don’t forget to update your AppName again. And that’s it! You’ve upgraded yourself to a Zero Touch joining process for your Slack Channel, Club, Workspace, etc. Don’t want to use it anymore? Head back to Heroku and delete or decommission the instance. Enjoy!
This worked as of January 2020. Heroku uses a free deployment for testing, and after 30 days of no calls to the server, puts the server into sleep mode. Executing an update or calling the site will launch it back out of sleep mode, but this can cause Applets to break or data to freeze on your site. Slackin-Extended is the current preferred flavor of Slackin as the other codebase was cluttered with master branch joins that muddied the waters and adds additional functions over the previous version. As always, read the code, don’t trust an internet stranger with your data, and DON’T share your API token! - Travis