Have you ever wanted to connect PixieBrix with Zapier? Zapier allows you to connect PixieBrix to over 3000+ other platforms
This way you can send data from your browser, through PixieBrix and Zapier to pretty much anything on the internet!
In this tutorial, I will show you how to send some data from Twitter to Discord, through PixieBrix.
1. Add a new mod: Adding a Quickbar on Twitter
Open up a tweet like this one here: https://twitter.com/MicahDanSmith/status/1497182095369715716
We’re choosing to add a Quickbar to trigger to this mod - so from the blue Add menu in the Page Editor, as shown below, we're choosing the Quick Bar trigger
After clicking the Create New Quick Bar, we’re ready to get started!
Let’s configure this brick!
- We’ll set our Name:
Send tweet to Zapier
- I am setting Action title to
Send to Zapier
Now every time I press the Quickbar shortcut (default to CMD+M on my Mac) I will be able to see a tile called Send to Zapier, that will trigger an action when I submit it.
I also want to highlight the fact that I want this button to appear only on “status” tweets so I will change the Sites field to be https://twitter.com/*/status/*
2. Adding a brick: Push data to Zapier
Let’s go ahead and add a new brick, we’re looking for “Push data to Zapier”
Click the Add a brick button and search for the Brick named above.
Once you add it with the blue button that says Add brick - we’re going to configure it.
3. Configuring the Zapier brick
If everything went correctly so far, you should be able to see a dropdown like in the screenshot below.
This dropdown, if you have never configured Zapier shouldn’t have many options available.
👉Hit the save button!
So far so good, we need to move to a new platform: let’s leave this tab open, and open a new tab.
4. Setting up Zapier
To configure Zapier, let’s sign-up to Zapier.
- Go to https://zapier.com/
- Sign-up and activate your account.
- Once you’re ready to go and logged in go to the Zapier dashboard.
- Click Create Zap, on the top left side of the menu
That will create a new Zap in a new window and:
- I will name it “Pixiebrix to Discord”
- Type Pixiebrix in the search bar
- Select “Pixiebrix (beta)” - there’s only one Pixiebrix so that’s an easy one ;)
Doing all of the above puts you in a new screen looking like this:
Click continue and it will ask you to connect your account.
When I click that Sign in to PixieBrix button - it will pop open a modal asking for PixieBrix’s API Key.
How do you find the PixieBrix API Key for Zapier? Keep reading below...
PixieBrix API Key for Zapier
- Open a new tab in Chrome and navigate to:
chrome://extensions/
- Find the PixieBrix extension and click Details:
- Scroll down and click on Extension Options
- On the page that opens select from the left-side menu Integrations
- Find the Zapier row in the middle of your screen and click View Key - the blue button.
- A pop should open and your key is right in the middle of your screen - you can click the copy button to copy it to your clipboard
Now that you have your API Key to use with Zapier, let’s go back to the Zapier pop-up page we left open while authenticating and paste our API key in there...
5. Authenticating with Zapier
Paste your API key in the input field in the pop-up Zapier opened a moment ago and press Yes, Continue
If you pasted the API Key correctly, you should now see a screen saying that you’re connected like this one:
👍 Click the Continue button!
6. Creating the Trigger
Now I have to give a way for PixieBrix to know where to pass the data to and vice-versa, remember that dropdown in the Page-Editor without any PixieBrix data?
We’re going to define a name in Zapier, that will be reference by the Page Editor later.
I called it Twitter Zap Bobby. Here’s what it looks like:
But you can call it whatever you want!
7. Creating a Field Name
⛳ There’s an important field to configure next: this is the field that will hold the value extracted from the page by the Page Editor. You might have multiple ones depending on how much data you want to extract from your page. In our scenario we just want to share the URL of the Tweet.
Thus I created a variable in Zapier under Field Names called twitterURL
This is what it looks like
and once you’re done
👍 Click Continue
8. Testing the Trigger
Press the Test button and if no errors appear, go ahead and...
👍 Click Continue
Setting up the second part of the Zapier
At this point we finished setting up the first part of Zapier, Zapier is ready to receive data from PixieBrix once we configure it on PixieBrix in our final step.
However, before we do that, we need to figure out...where are we going to push the data to? 🤔
In this tutorial I thought why not use Discord as an example.
So I signed up to Discord and created a new server, now I am going to set-up Zapier to send data to my Discord server.
1. Adding a new Zap
Back to the Zapier page, in the new page that appears:
- Type Discord in the search input
- Select Discord
To keep this tutorial somewhat brief, I have already created the Discord server and connected it on Zapier, this is pretty straightforward because Zapier is really good at onboarding.
2. Configuring the integration
So let’s configure Discord’s integration.
From the Action Event dropdown, select Send Channel Message
👍 Click Continue
Select your Discord account where you want to send the message to - in the screenshot below you can see I called my Discord server pixiebrix
👍 Click Continue
- Whether it’s Discord, Slack, or another collaboration platform - or perhaps an Airtable, Notion document or whatever you want, Zapier allows you to connect to it.
- These steps are specific to Discord but if you’re crafty - with Zapier you can use any other integration you desire here - instead of Discord.
3. Configuring the message
I configured the next page like following:
- Channel: This is the channel where I want the message from my mod action to appear, I have a channel called general, so I selected that one. You can pick any channel you want
- Bot name: PixieBrix bot, of course
- Message Text: Select the Zapier variable we named earlier,
TwitterURL
This field will contain the URL of the tweet coming from PixieBrix’s PageEditor when you run the QuickBar action!
👉 Click Continue
In the next page, you want to click “Skip Text” (top right)
and finally you want to “activate this zap” by clicking the toggle on the top right corner
Configuring the Page Editor
Now that we have Zapier almost fully set-up let’s go and configure the last part in the page editor.
So let’s open the Page Editor (or if you left the tab open on Twitter, it should still be open)
If you click on the Zap menu you should now be able to see “Twitter Zap Bobby”
(If you don’t see it - close the page editor and re-open it with F12)
Once you select the Zap, a blue button appears asking you to add a property
Let’s add one and give it a Property name of:
twitterURL
This name needs to match the name of the variable you specified in the step “7. Creating a Field Name” earlier
and a Value of
@input.url
which is a variable containing the URL of the tweet we’re on.
Now an important step - let’s test the mod.
Go to twitter where your mod is running an click on a tweet you like.
Hit CMD+M (or whatever shortcut works on your side) to open the Quick Bar and select
Send to Zapier
In your Discord server you should see a message appearing containing the data from your tweet!
Conclusions
It’s simple to automate repetitive yet high-impact actions with Pixiebrix.
Escalating things to an internal collaboration tool like Slack, Discord or Notion directly from the browser feels magical.
Especially when you want to send data across platforms quickly without waiting and wasting time on engineering resources to free up to build internal tools!
Thank you for reading!