Send page to Slack via Context Menu (5 min)

In this tutorial, we will create a context menu mod that will allow us to send the current tab’s address and metadata regardless of which tab in the browser you’re on - directly to a Slack channel.

We’re using Slack in this tutorial, but we could do the same with Microsoft Teams, Discord, or other software like Google Spreadsheet.

Open the Pixiebrix Page Editor (F12 keyboard shortcut) and click the Pixiebrix tab). If prompted, enable PixieBrix to work on the current site.

Let’s add a Context Menu starter brick from the Add menu.

Click Context Menu.

What is a context menu? It’s what pops up when you right-click on a webpage!

Rename this mod to something that makes sense, like Send page to Slack

Then set the Title to Send to Slack (This is the text you’ll see when you open the Context Menu)

Finally, set Sites to All URLs

We’ll add a modal allowing us to add a few notes before sending the page to Slack. This allows us to give some context before sharing the page.

Add a new brick by clicking the + just below your previous brick.

Search for a brick named Show a modal or sidebar form and click the + Add button.

Assign the value of Form Title as Notes, then scroll to the Current Field section.

Give the name field the value of note

Give the label a value of Add a note to your message

By default, the Input Type is set to Single line text . We’ll leave that as is because we want to provide a short note to go with the message on Slack. (You could change it to paragraph, number, date… or just about any other field type you can imagine.)

Let’s also change the text on the Submit Button Text field to Slack This

Once that’s done, test out your modal. Right-click anywhere above the Page Editor and select the action from the Context Menu.

Looks like we left the Field Description in there! Let’s remove it, or change it to be something more descriptive for users!

Time to add another brick. Click the + again under the Show a modal or sidebar form brick, and search for Slack Send simple message, then add it.

Hook up to Slack

If you already have a Slack workspace configuration, select it from the options in the Slack dropdown field. Not set up yet? No worries— Follow these instructions for creating a Slack Integration, then click the refresh icon.

Set the text field to anything you’d like to include in the Slack message. We’re going to include our note and the link from the page. To do that, we’ll reference those variables like this:

Lastly, select the channel to post the message in each time.

Your brick configuration should look like this

Now you’re all set! Select the Save icon on the left panel with the name of your mod, and try it out!

Open a new tab and navigate to your favorite place to read articles. (If you can’t think of anything under all this pressure, just head to Wikipedia.)

Use the context menu (right-click anywhere on the page) and select Send to Slack.

A modal will now ask you for a message, then press the blue button to submit it.

Head to Slack and confirm that you shared your current active tab with your workspace on Slack, including any notes you might have typed out!