ExploreEducationHow do Iย build?MembersToolsWorkshopsJobs

Join Makerpad today

Makerpad is home to over 10 thousand folks learning to automate business workflows and build projects without code. Access PRO content, join the community & get expert support.
Learn how to build without code today
You're in ๐Ÿ˜- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.
Get up to $200 by referring a friend

Bring no-code skills to your work

From learning new skills for your projects to automating and shipping faster in your team
For BusinessFor individuals

Share

Tutorials
/
๐Ÿ‘‹ Greet new members privately in Slack with Autocode + Block Kit Builder
Categories
Added to your list!
Oops! Something went wrong while submitting the form.
Marked as complete!
Oops! Something went wrong while submitting the form.
Mark as completeSave to watch later

๐Ÿ‘‹ Greet new members privately in Slack with Autocode + Block Kit Builder

Link to Demo

In this guide, we will continue to explore Slack APIs. In just a few steps, we will create a Slack app to privately welcome and guide new users when they join a Slack channel. Weโ€™ll breeze through the setup process, and youโ€™ll be able to return to make modifications and add your own style and custom message for a unique workspace onboarding experience!

Weโ€™ll be using Autocode to prepare everything for our app. We do not have to set up servers and infrastructure โ€” and the best part is that our code will be autogenerated for us and immediately available to edit if we desire ๐Ÿ™Œ๐Ÿผ

What Youโ€™ll Need Beforehand

Letโ€™s get started!

Our Slack app will post a message which will be visible only to the user when they join a channel! In the screenshot below, notice how Welcome Appโ€™s message is only visible to Janeth, who has just joined #testingbots channel.

Part 1: Sign in to Autocode on Standard Library

Head over to Autocode on Standard Library and sign in or create a free account. If you have a Standard Library account click Already Registered and sign in using your Standard Library credentials.

Youโ€™ll notice prebuilt templates for building webhooks, scheduled tasks, Slack slash commands, and Stripe workflows. Select โ€œBlank Prototype new code.โ€

You will be re-directed to a coding interface, but weโ€™ll use Maker Mode to set up our Slack app. Select Switch to Maker Mode (Beta) button on the left.

Maker Mode is a workflow builder like Zapier, IFTTT, and other Automation tools, with some important differences. Maker Mode guides, teaches, and introduces Makers to code instead of abstracting it all away.

Once on Maker Mode, youโ€™ll notice Autocode API Wizard โ€” a drop-down menu interface for quickly setting up workflows and automation using APIs on Standard Libraryโ€™s registry. As you interact with Autocodeโ€™s API Wizard youโ€™ll be able to see the code autogenerated for you on the right.

Part 2: Configure Slack APIs on Autocode API Wizard

On the first drop-down menu, select Slack as your event source and member_joined_channel as the event.

When you make this selection, Autocode adds two additional steps to your workflow.

This first step sets an HTTP endpoint that will act as a webhook for a Slack member_joined_channel event. When a new member joins a channel, a payload of information for that event is sent from Slack to the HTTP endpoint. The code inside the endpoint then executes and can use the information.

Step #2 Makes an HTTP GET request to the lib.slack.conversations[โ€˜@0.2.5โ€™] API and uses the info method to retrieve the channel object which has info about the channel including name, topic, purpose etc and stores it in result.slack.channel. The parameter to retrieve channel information is automatically set to ${event.event.channel} โ€” leave as is.

Step #3 Also makes an HTTP GET request to lib.slack.users[โ€˜@0.3.32โ€™] and uses theretrieve method to get the user object which has info about the user and stores it in result.slack.user. The parameter to retrieve user information is automatically set to ${event.event.user} โ€” leave as is.

Parameters are like blank spaces for us to fill when calling an API โ€” itโ€™s a way for us to feed the API information it needs to perform an action, like using the parameter provided to fetch an object.

Part 3: Set up a Private Slack Message

Add a final API to this workflow by selecting the + button. Choose Slack as your API provider and Create a new Ephemeral Message from your Bot as the API that will be triggered.

This step in our workflow makes an HTTP POST request to lib.slack.messages[โ€˜@0.5.11โ€™] using the ephemeral.create method to create and post a message thatโ€™ll be visible only to a new member.

Configure your API call with the following parameters:

channelId:${event.event.channel}

userId:${event.event.user}

text: ๐Ÿ‘‹ Hello ${result.slack.channel.name} ! Welcome to our #${result.slack.channel.name} channel.

Part 4: A Closer Inspection of our Code on Developer Mode

Click on the generated code to switch to Developer Mode.

The first line of code imports an NPM package called โ€œlibโ€ to allow us to communicate with other APIs on top of Standard Library:

const lib = require(โ€˜libโ€™)({token: process.env.STDLIB_SECRET_TOKEN});

Line 3โ€“7 is a comment that serves as documentation and allows Standard Library to type check calls to our functions. If a call does not supply a parameter with a correct (or expected type) it would return an error.

Line 8 is a function (module.exports) that will export our entire code found in lines 8โ€“37. Once we deploy our code, this function will be wrapped into an HTTP endpoint (API endpoint) and itโ€™ll automatically register with Slack so that every time a member_joined_channel event happens, Slack will send the event payload for our API endpoint to consume.

Lines 24โ€“32 creates and posts your message using the information (parameters) that are passed in: channelId, UserId, Text.

You can read more about API specifications and parameters here: https://docs.stdlib.com/connector-apis/building-an-api/api-specification/

Part 5: Link a Slack Account & Deploy your Workflow

Before we can deploy our code live, we need to link Select the 1 Account Required red button which will prompt you to link a Slack account.

Select Link Resource from the Identity Management Screen

If youโ€™ve built Slack apps with Standard Library, youโ€™ll see existing Slack accounts, or you can select Link New Resource to link a new Slack app.

Select Install Standard Library App.

You should see an OAuth popup that looks like this:

Select Allow. Youโ€™ll have the option to customize your Slack app with a name and image.

Select Finish. The green checkmarks confirm that youโ€™ve linked your accounts correctly. Click Finished Linking.

Select the orange Save Endpoint button.

Give your project a name and Save API Project.

Great! Youโ€™ve just saved your first project. Autocode automatically sets up a project scaffold to save your project as an API endpoint, but it hasnโ€™t been deployed.

This means your endpoints are not yet live and canโ€™t respond to HTTP requests or events. To deploy your API to the cloud select Deploy API in the bottom-left of the file manager.

๐Ÿš€ Congrats! Your App is Live

Test your Slack app by joining or leaving any channel in your workspace. If youโ€™ve set everything up properly you should receive a warm welcome from your Slack app.

Bonus: Use Block Kit Builder to Customize your Message

Itโ€™s time to get creative and add your personality to your Slack app with Block Kit Builder.

Block Kit Builder is Slackโ€™s visual prototyping tool that enables Makers to create rich and interactive message designs without having to write code. Makers can choose from pre-built templates and edit the code or use building components. Once a design is ready, copy and paste the JSON into the blocks section of your project on Autocode.

Access my template design by hovering over and copying the URL in this link. Paste it in a new tabโ€™s address bar. You should see a template that looks like this:

Select and copy only the objects inside the brackets [].

Set the objects as the value for theblocks key by pasting the code directly onto Autocodeโ€™s interface as I have done below:

Select Save Endpoint and Deploy buttons to push your changes live ๐Ÿš€

When you test your app you should see the updated welcome message.

๐Ÿ™Œ๐Ÿผ And That's it!

You now have all the tools you need to build your unique onboarding experience for new users in your workspace!

I hope this article has been helpful showing you how easy it is to create a private Slack app greeter using Autocode on Standard Library.

If thereโ€™s anything in the article you notice could be improved let me know!

I would love for you to comment here, e-mail me at Janeth [at] stdlib [dot] com, or follow Standard Library on Twitter, @StandardLibrary. Let me know if youโ€™ve built anything exciting that you would like Standard Library team to feature or share โ€” Iโ€™d love to help!

You must be a member to view the full lesson

Join Makerpad today

Makerpad is home to over 10 thousand folks learning to automate business workflows and build projects without code. Access PRO content, join the community & get expert support.
Learn how to build without code today
You're in ๐Ÿ˜- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.
Get up to $200 by referring a friend

If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Tools

Tutorials

Stories

Ready to get started?

Join the community and start turning your ideas into solutions