Slack is widely used in customer support teams, as its integrations with CRMs make this messaging tool the perfect way to be aware of several conversations or tickets.
You will be redirected to the process page. Don’t worry about the code of the process, we are going to deal with that later.
Now we are just going to configure a webhook on this process so Slack can communicate with it.
Perfect! A modal will prompt you with webhook info: the important thing is the URL link. We will need it later to configure our Slack Shortcut! You always can come back to the Webhook configuration to copy the URL link.
To create your own Slack App open your app’s dashboard and click on Create New App button. You only need to choose a name and a workspace.
Excellent, we have a brand new Slack App!
We are going to use Slack Shortcuts instead of Slack Commands. Why? The reason is that you can’t use commands inside a thread, instead, message shortcuts are options that are shown in any message context menu.
Now we need to configure an access token to communicate Slack and YepCode and add some permissions to the bot
We’ve finished configuring our App in Slack, so let’s go to YepCode to make it all work. First, we are going to create two credentials, one to store Slack tokens in a secure way and the other to store our SMTP configuration.
Create another credential. This time we are going to connect our SMTP so we can send mails later.
Congrats! We are close to finishing. We are going to implement the logic that will read the messages from Slack and send them to the support mail.
Navigate to the process that you created in the first step.
This is the full code, we are going to comment on some parts, but if you are feeling lucky you can execute right away! Write and save the following lines in the code editor:
const {
context: { parameters }
} = yepcode
const { callback_id, channel, message_ts, message } = JSON.parse(
parameters.payload
)
console.log('Received interaction', callback_id)
const nodemailer = yepcode.integration.nodemailer('example-gmail')
const { client } = await yepcode.integration.slackBolt('thread-exporter-slack')
client.conversations
.replies({
channel: channel.id,
ts: message_ts
})
.then(async ({ messages }) => {
console.log(messages)
const userIds = [...new Set(messages.map(({ user }) => user))]
const users = await Promise.all(
userIds.map(async (user) => {
const {
user: { name }
} = await client.users.info({
user
})
return { id: user, name }
})
)
const emailText = messages
.map(({ text, user }) => {
const userInfo = users.find((u) => u.id === user)
return `${userInfo.name}: ${text}`
})
.join('\n')
console.log(emailText)
const info = await nodemailer.sendMail({
from: 'yepcode@example.com',
to: 'support@example.com',
subject: `New slack thread: ${message.text}`,
text: emailText
})
console.log('Sent email', info)
})
.catch(console.error)
To invoke this process go to your Slack workspace and click on the context menu of a message, it will appear your Shortcut, in my case is Send to support.
After you click, go back to YepCode and navigate to Executions on the sidebar. It should be a new execution! Click on it and you should see something like this.
If you see something like this, congrats! You’re done. If not, review the previous steps to see if something is missing.
Let’s review the code!
const {
context: { parameters }
} = yepcode
const { callback_id, channel, message_ts, message } = JSON.parse(
parameters.payload
)
Here we are getting the information Slack is sending to YepCode. There are a lot of fields but we only need:
const nodemailer = yepcode.integration.nodemailer('example-gmail')
const { client } = await yepcode.integration.slackBolt('thread-exporter-slack')
These two lines use some YepCode magic: they initialize our integrations, the first for Nodemailer and the second for Slack Bolt. Both use their respective credentials.
client.conversations
.replies({
channel: channel.id,
ts: message_ts
})
.then(async ({ messages }) => {
//
})
.catch(console.error)
We ask for the conversation messages related to our clicked message in the specified channel. If you remember we had to add a special permission channels:history in our Slack App, this is the reason.
The request returns the messages that we are going to consume.
const userIds = [...new Set(messages.map(({ user }) => user))]
const users = await Promise.all(
userIds.map(async (user) => {
const {
user: { name }
} = await client.users.info({
user
})
return { id: user, name }
})
)
We need some user information like username or email. It’s a pity but this info is not in messages, we need to ask for it to Slack. This is the reason we added users:read permission in our Slack App. We get all userIds in messages and make a request per user saving them in the users variable.
const emailText = messages
.map(({ text, user }) => {
const userInfo = users.find((u) => u.id === user)
return `${userInfo.name}: ${text}`
})
.join('\n')
console.log(emailText)
const info = await nodemailer.sendMail({
from: 'yepcode@example.com',
to: 'support@example.com',
subject: `New slack thread: ${message.text}`,
text: emailText
})
console.log('Sent email', info)
This is the final code. We mount the email text concatenating the username and the message text. Once we have the string, we just need to use the method sendMail of Nodemailer to send it to support@example.com.
That’s it! You are ready to go!
This is just a simple example of Slack Shortcuts using YepCode but we could add more logic to it. For example, it would be awesome to ask the email to send the thread, this can be done using Slack Bolt and Slack modals.
Thank you for reading 🙂 and…
Happy coding! 😉