Sending Data to Slack with PixieBrix

Sometimes you want to quickly share a link to slack without having to actually, you know, go to Slack. With PixieBrix, you can send a message to Slack from anywhere on the web, and you can even customize the message that goes with it. All without having to leave the page you’re on!

I had a couple of uses I thought this would be quite handy for. One that came to mind was sending a community article to fellow Trello Power-Up developers in our Slack workspace. I spend a lot of time in the Trello Community and see a lot of posts about things that I think other developers would be interested in. For instance, if I see a post about backing up your Trello data, I want to let my friends at Rewind know so they can jump in and explain their solution!

It’s been a manual process of grabbing a link, copying it, going to slack, then finding the person and pasting the link along with an explanation about the post. Sometimes I’d have to toggle back and forth between Slack and the article because I couldn’t remember exactly what the post was about or what I was trying to quote.

I built a PixieBrix extension that will let me grab the link and send the info to Slack! Now I can do it all from the page I’m on in the community. If you want to set up something similar (maybe you want to send articles to co-workers, or share a link to a project you’re working, or anything else!) here’s how to do it.

PS - If you want to shortcut all of this, you can use this PixieBrix blueprint. But if you want to customize it a bit, or if you just want to know how all the magic works, keep reading along.

To get started, you’ll need to create a Slack Webhook.

  1. Go to your Slack workspace’s custom integrations section. Should look something like https://your-workspace-name.slack.com/apps/manage/custom-integrations

  2. Note - if you can’t access this page, you might not be an admin of your Slack instance, and you’ll need to reach out to your Slack admins and ask them to do this for you.

  3. Add the Incoming Webhooks integration.

  1. Set up the integration.

Don’t worry - it’s pretty simple. You’ll just basically need to select a default channel.

  1. Save that webhook URL - you’ll need it in a minute!

Now head to PixieBrix builder.

Create a new PixieBrix extension with context menu

Select the “add” then “new context menu” option. You can call it whatever you’d like, just make sure to select the “all URLs” option under Sites so that this extension will work on any site you visit.

You can select “selection” if you want to grab the highlighted text and incorporate that as part of your Slack message.

Want to send it straight to slack? Just add the “Send a Slack Message” brick

If you just want to send the URL with no additional message, you can do that by just adding this one brick.

  1. Grab the hook URL from your integration in Slack (see first step)
  2. Define the channel (Or leave it blank to post to the default one you selected)

Just want the URL? Use {{{@input.url}}} in the text and you’ll be good to go!

Chances are, you probably want to customize the message and pick a channel it goes to. If that’ the case, you’ll need to add another step.

Want to customize the message? Add a pop up modal.

If you want to customize which channel the link goes to and add a message to give more context around why you’re sending that link, add the “Show a modal or sidebar form” brick.

Name the step whatever you’d like, and at this point, you’re just building a simple form.

I added a field for the channel and another field for the message. At the moment, you’ll need to hard code all the options in as a dropdown, but in the future, this should be a dynamic component that can read your Slack API and automatically grab all the channels. (To be honest, I kinda like the hard coding right now, because it’s an easy way to limit the dropdown options so I don’t have to parse through a bunch of options.)

If you want to see the link inside your message, just set the field to “Paragraph text” and include the @input.url value from the first step.

(Pro tip - use {{“\n”}} to add a line break so you can input text before the URL.)

Finally, go back to your Send to Slack step, and update the message to say {{{@form.message}}} and the channel to pull from the form info with {{{@form.channel}}}. (Note - if you want to direct messages instead of channels, you’ll need to do a different process, which I’ll explain in the next step).

Viola! Now your form data is mapped to your sending in Slack brick! Speaking of mapping… if you want to tag users or send direct messages, you’ll need to incorporate one more step.

Add the mapping brick to reference users

If you want to tag users or directly message them, it’s bit less straightforward because Slack doesn’t identify users by their usernames. Instead, if references their member ID, which can be found when you click “more” on their profile.

To send a message to someone directly, or to tag them in the channel, you’ll need to add the Mapping Brick, and map the dropdown values to their member IDs before sending the message over to Slack.

For my use case, I wanted to send messages to a specific channel, but I wanted to be able to tag the Power-Up developer it was most relevant to. I adjusted my field to be “user” instead of “channel” on my modal.

Just add the mapping brick, name the key (it should be the name of field where you collect the user), and then make a row for each item. Property should be the name from the dropdown, and the value should be the member ID that you copy from slack.

In my example, it looks something like this!

Now to reference that user value in your Slack message, you’ll just need to use the Slack syntax… which is a bit funky admittedly.

Special shout out to Misha Holtz for explaining how this magic voodoo works!

Here’s how it looks:

This posts a Slack message tagging the user I selected and then showing my message that I filled out in my modal, including my link from the page I was on.

BTW - here’s a video where I demo this and also walk through each brick.

Hope this is useful to you all. Feel free to comment with any ideas on how you might use something like this as inspiration for others!

2 Likes