πŸ’¬

Right-click to send a Slack message (6 min)

🚧

Under construction: this tutorial is currently being updated for PixieBrix release 1.4.0

🍎

Before you begin this tutorial, make sure you've completed the Quick Start Guide

In this tutorial, we'll automate a simple process: sending text you highlight to a Slack channel along with the URL of the webpage that contained the text.

Our new context menu in action
Our new context menu in action

We'll use this Seeking Alpha page to develop our workflow. There is a video at the end of of this tutorial demonstrating what’s covered in the text.

1. Configure a Context Menu Button

Open the Page Editor

Start by navigating your browser to this Seeking Alpha article: 'Roaring Kitty' doubles down on GameStop stake. Then, open the PixieBrix Page Editor, and grant PixieBrix access to the page.

Configure a Context Menu Item

  • Click Add in the top left of the Page Editor and choose Context Menu
  • Go to the Menu Item tab
  • In the Caption section, replace "Context Menu Item" with "Slack %s"
πŸ’‘

The "%s" portion will configure the caption so it dynamically changes based on the text you highlight. You note this convention is different than the mustache braces {{ used in other places in PixieBrix. It's because for context menu items, Chrome is filling in the selected text, not PixieBrix.

  • To test your context menu configuration:
    • Highlight Roaring Kitty on the webpage
    • Right click to expand the context menu. It should look like this
    • image

2. Identify the Target Data

  • Go to the Data tab
  • Scroll down to where you see two pieces of information:
  • image
ℹ️

Context Menus always include a "Context menu reader" that provides the documentUrl and information about the selected element. In our case selectionText will provide the selected text

  • In the next step we'll configure an action to send this data to Slack
πŸ’‘

You can click the πŸ“ƒ icon next to the property path to copy it to your clipboard. This will come in handy when configuring the Slack action in the next section of this tutorial.

3. Send Data to Slack

Add the Slack Action

  • Go to the Action tab
  • Under Recommended Bricks, select Send a Slack message
  • image

Configure the Slack Action

πŸ’¬

Configuring a Slack action requires an incoming webhook for Slack. To create one, refer to the Slack Help Center: Incoming Webhooks for Slack

  • Once you have an incoming webhook, copy + paste it into the hookUrl input of your action. The screenshot below is for illustrative purposes, your hookUrl will be different.
  • image
  • Next, add the two property paths we identified in the Data tab into the text input of your action:
  • image
🚨

We surround myVariable with three sets of braces in this example so that PixieBrix fills in the exact text. Otherwise, PixieBrix's default behavior with double braces "{{" is to escape the special characters in the URL (e.g., converting / to /) to ensure the text renders correctly on a webpage.

Test Your Slack Action

To test your action, highlight "Roaring Kitty" in the Seeking Alpha article, and click. You should see a Slack message appear in the channel you specified for your incoming webhook. Click Save in the Page Editor, and navigate to another article to send highlight text and the article URL to Slack.