Set Up Interactivity

In this final project step, you enhance the conversation with your app by adding an interactive button and response.

Add a Message Listener

Add a message() listener to respond to your users with a button.

1. Open say-hello | app.js.
   
2. Replace the listener with the following, more robust code which includes a button. To quickly copy the code to your clipboard, you can click Copy at the top right of the code block. Make sure you keep the log functions after the code you pasted (that start with the (async () => { line). Then, save your work.
   

// Listens to incoming messages that contain "hello"
app.message(/hello/i, async ({ message, say }) => {
    await say({
        "text": "Hello!",
        "blocks": [
            {
                "type": "section",
                "text": {
                    "type": "mrkdwn",
                    "text": `👋 Hey there <@${message.user}>`
                },
                "accessory": {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "Click Me",
                        "emoji": true
                    },
                    "action_id": "click_me_button"
                }
            }
        ]
    });
});

The value of say() is now an object containing an array of blocks. Blocks are components of a Slack message, and can range from text to images to date pickers. In this case, it contains a section block that includes a button as an accessory. Learn more on blocks in Build Meaningful Interactions with Block Kit.

Block Kit can’t populate notifications or search by default, so the text field should be used to make your messages more accessible. To learn more about the text field there is information on the chat.postMessage reference page.

In the button accessory object, there is an action_id. This acts as a unique identifier that you can pass to your listener function to only listen to interactive events corresponding to that block element.

Test Again

Since you’re hosting the code on your machine, you need to start a new session. If you have Terminal open, close it. Then use the run command to get your app up and running again.

1. Make sure your Trailhead Slack playground is open.
   
2. If you still have Terminal open from the previous step, close it and open it to re-deploy your app with the new code.
   
3. In Terminal, enter cd say-hello.
   
4. Enter slack run.
   
5. Select the app you just deployed and press return. Terminal responds that the bolt app is running.
   
6. From there, head back to your Trailhead Slack playground.
   
7. Open #welcome-new-team-members.
   
8. Send another hello. The app responds, this time with a wave emoji and the new button!
   

9. Close Terminal.
   

If you click on the button, you see an error. That’s because there isn’t any listener for the button click. You change that next.

Add an Action Listener to Respond to the Button Interaction

Add an action() listener function to respond to the button click with a follow-up message.

1. Open say-hello | app.js
   
2. Add the following action listener under the code you just entered in the previous section, then save your work. To save time, click Copy on the top right-hand side of the code block and paste that in.
   

// Action listener function called when an interactive component with action_id of “click_me_button” is triggered
app.action('click_me_button', async ({ ack, body, client, say }) => {
    // Acknowledge action request before anything else
    await ack();
    let channelID = body.channel.id
    let userID = body.user.id
    // Respond to action with a direct message
    await client.chat.postMessage({
    channel: userID,
    user: userID,
    text: `<@${userID}> clicked the button! 🎉 `
  });
});

Notice ack() being called inside of the listener function. ack() is used to acknowledge that your app received the event from Slack.

Test the Interaction

Check it out.

1. Make sure your Trailhead Slack playground is open.
   
2. If you still have Terminal open from the previous step, close it and open it to re-deploy your app with the new code.
   
3. In Terminal, enter cd say-hello.
   
4. Then, enter slack run.
   
5. Select the app and press return. Terminal responds that the bolt app is running.
   
6. From there, head back to your Trailhead Slack playground.
   
7. Open #welcome-new-team-members.
   
8. Send another hello. You should see the app respond with 👋and a friendly, “Hey there” and your button.
   
9. Click Click Me, and the app sends you a direct message celebrating your click.
   

Refine Your App

You now have your first Bolt for JavaScript app that uses Bolt core concepts to listen and respond to different events coming from Slack! It’s a way for people to say hello and get a response. But there’s definitely more work to do to make it a welcoming message for new team members.

Check out Build Meaningful Interactions with Block Kit and see how you can build on the concepts and skills you learned here.

Learn More About Bolt

With the basics, you can learn more about Bolt and its platform features. Here are a few paths you can explore.

• Use the slack sample command in Terminal or Command Line to check out sample apps and app tutorials.
  
• Read the Bolt for JavaScript documentation to learn about advanced functionality and find code snippets showcasing what’s possible.
  
• Level-up your app’s design using Block Kit Builder.
  

Explore other app surfaces, like the home tab and popup modals.

Access the Slack Developer Program

When you provisioned your Slack playground, you opted into the Slack Developer Program. Through this program, you can access Slack developer documentation, videos, and webinars. You can view API changelogs. You can even provision non-Trailhead sandboxes that enable you to explore and build on the platform without affecting your production environment. Use the Slack Developer Program alongside Trailhead to build your Slack development skills.

Sum It Up

In this project, you built a Slack app using Bolt for JavaScript. You ensured it listened to messages and responded with an interactive button. It’s a simple app to start with, but you can develop it more in Build Meaningful Interactions with Block Kit. In the meantime, go ahead and click Verify Step below to check your work.