Send Data to Trello with Zapier (15 min)

🍎

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

This tutorial requires two additional tools 1. A Zapier account 2. A Trello account

In this tutorial, we'll automate a repetitive process: highlighting information on a page, copying it, and pasting it into a new card in Trello.

At PixieBrix, I use this automation to keep track of writers as I come across articles that interest me. I highlight the writer's name and send it along with the article URL to a Trello card.

For this tutorial, we'll use a TechCrunch article to develop our template. Here's a short video to summarize this workflow:

1. Create a PixieBrix to Trello Zap

Add the PixieBrix App in Zapier

Follow the "Creating a PixieBrix Zap" and "Connecting Your Zapier Account" sections of this documentation: Triggering Zapier Zaps

Configure the Trigger Fields

  • In the Zap Identifier text box, replace "My Zap" with "trelloPush". (It can be any name you want to use to identify this Zap)
  • Add two Field Names, one for each field we want to send from PixieBrix:
    • writer
    • url
image
  • Then click Continue and Test Trigger
  • Once you receive the following success message, click Continue
image

Select the Action: Trello

  • Choose Trello in the list of Zapier Apps
image
  • For Action Event choose Create Card and click Continue
image
  • Choose your Trello account and click Continue

Configure the Action: Trello

🚨

Before proceeding make sure you have a Trello board that has at least one list. Trello Documentation

  • Configure the follow fields:
    • Board: Choose the Trello board where you would like to send data. For example, I'm using a board called "Content Partners" for this tutorial.
    • List: Choose a list from your Trello board. I use a list called "Partner Identified" for this tutorial.
    • Name: Choose the "Writer" field that is coming from the Zap
    • Description: Choose the "URL" field that is coming from the Zap
    • Card Position: Choose "Top" to have new cards be added to the top of the list
    • Member: Chose your own account
  • Then click Continue, and then Test & Continue
  • You should receive the following success message.
  • image

    If you open your Content Partners Trello board, you'll see a new card with a title "Sample data for writer"

  • Finally, click Turn on Zap
🙌

Congrats, you have completed everything on the Zapier side. You rock

2. Add a Browser Context Menu Item using PixieBrix

Open the Page Editor

Navigate your browser to this TechCrunch article: Scalarr raises $7.5M to fight mobile ad fraud

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 "PixieBrix" with "Trello %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 Anthony Ha on the webpage
    • Right click to expand the context menu. It should look like this:
    • image

Configure Where the Context Menu Appears

  • Go to the Location tab
  • In the Document URL Pattern section, click All URLs. This tells PixieBrix to show the context menu item on any webpage you visit
image

3. Identify the Target Data

  • Go to the Data tab
  • Scroll down to where you see two pieces of information:
image
  • In the next step we'll configure a action to push the data with Zapier

4. Pushing Data to Your Zap

Add the Zapier Action

  • Go to the Action tab and click Add a Block
  • Click on "Push data to Zapier" under "Recommend Bricks"
image
  • Next, click Grant Permissions to grant permissions for you browser to send information to Zapier. You'll also need to click "Allow" in this popup
  • image

Configure the Trello Zap

  • In the dropdown, select trelloPush, which is the Zap you configured at the beginning of this tutorial
  • image

  • Fill in the two fields with the data from the Data tab like this
image

Test Your Zap

To test your Zap, highlight "Anthony Ha" in the TechCrunch article, and click. You should see a Trello card appear in your Content Partners board. Click Save in the Page Editor, and navigate to another article to send its author to Content Partners.