Build Better Slack Apps with 4 Tips for Using Attachments and Buttons
Slack bots are a super fun and interactive way to build an application that interacts with members and capture their attention. In this article, we help you make it even more fun by adding attachments and buttons.
If you haven’t got a basic Slack App up and running yet, take a look at our tutorial where you can build a Slack Bot with StdLib in 9 minutes. This article is intended as a follow up to the original article.
If you’re not familiar with StdLib yet, you’re in for a treat! We’re a serverless API development and publishing platform that can help you build and ship custom logic in record time. Local testing, command line tools, hosting, scaling, automatically generated documentation for your APIs, authentication, billing and more included out-of-the-box!
Tip #1: Making your Slack messages interactive using buttons:
At StdLib we overcame our lunch indecision (or lunch paralysis) through our LunchBot. With a simple command our LunchBot lists a few restaurants and asks everyone to vote using buttons.
In Slack, message buttons are are a type of action that you pass into the action array in your attachment.
Our bot attaches the buttons in array of actions. Here you can see how our lunch bot created two different actions for two different lunch choices. You can also check it out in the message builder. In a subsequent tutorial, we’ll have more detail on how you can implement handlers for those actions.
Check out Slack’s guide to attaching interactive message buttons for more information on buttons.
Here we’ll show you can build and deploy this really quickly. (This assumes you’ve gone through our tutorial on how to get a Slack Bot up and running with StdLib in 9 minutes)
In your service look for the file functions/commands/hello.js and modify the callback function to include the text and attachment. The results of the callback get passed directly into chat.postMessage.
For example:
After you modify the file run lib up dev then you can test it by running /hello command in Slack.
Tip #2: Making your Slack messages interactive using images:
Sometimes you want to add an image to your message to create a more dramatic effect.
In our Lunch Bot if nobody makes a decision or you choose not to decide we f̶o̶r̶c̶e encourage people to pick by t̵h̵r̵e̵a̵t̵e̵n̵i̵n̵g suggesting Keith’s (CEO and founder of StdLib) favorite restaurant as a place to eat.
Below you can see the JSON that we pass into the message to send an image and format it as an attachment.
Just like buttons you can pass the image_url and other parameters into the attachment array to customize your attachment. Feel free to play with our message or create your own in the message builder.
Tip #3: Use the Slack Message Builder to test different messages.
Once you have opened the Slack Message Builder, you will be able to modify the JSON and preview your message instantly.
For now, you can explore with basic formatting or attachments. If you are feeling particularly creative, you can get fancy with message buttons.
Tip #4: Use the API (chat.postMessage) Tester to test sending your message
The chat.postMessage tester is a great way for you to try sending your message to different workspaces and channels and see how it looks
You can experiment by sending different text messages and attachments in JSON format.
I hope these four tips help you build some cool and interesting bot messages.
Go to StdLib to join our Slack channel where you can let us know if you need any help and share with us what you are building next! Follow us on Twitter for more content and updates, @StdLibHQ.
P.S. Correction by Keith, his favorite restaurant is Lou’s Cafe in San Francisco.
StdLib is your new API development solution, built atop serverless architecture for fast deployments and infinite scalability. To stay informed with the latest platform updates, please follow us on Twitter, @StdLibHQ, or if you’re interested in joining the team — we’re hiring! Shoot us an e-mail or resume to careers@stdlib.com.
