πŸŽ‘

Build A Workflow (6 min)

In this tutorial, we'll automate a simple process: pulling up a company's Crunchbase page directly from its LinkedIn profile, all with the click of a button.

Developing this workflow involves three basic steps:

  1. Place a button: we'll add a button to LinkedIn's company profile page
  2. Read data: we'll read data from the company profile
  3. Perform an action: we'll use this data to perform a lookup

We'll use the the Salesforce LinkedIn profile page to develop our workflow. There are videos at the end of each section demonstrating what’s covered in the text.

1. Place a Button

Open the Page Editor

Start by navigating your browser to Salesforce's LinkedIn profile page: Salesforce. Then, open the PixieBrix Page Editor.

πŸ“˜

Need help opening the Page Editor? Follow the steps here:

Grant Access

The first time you open the Page Editor on a new webpage, you need to grant PixieBrix access to the page. You can grant permanent access by either:

  • Clicking Grant Permanent Access, or
  • Granting temporary access by clicking on the PixieBrix extension in the Chrome Extensions dropdown and then refreshing the page
  • image

🚨

If you had the Page Editor open before navigating to the Salesforce page, you'll need to close the Page Editor by clicking the X in the top right corner, and then re-open it to provide access.

Place a Button

Click Add in the top left of the Page Editor and choose Button.

image

Hover your cursor over the LinkedIn button labeled More to the right of Visit Website. Move your cursor around the More button until the word button pops up.

Hover your mouse over the "More" button and then click to add a new button
Hover your mouse over the "More" button and then click to add a new button

Click, and PixieBrix will add a new custom button to the button group. It will also open your brick in the Page Editor

Customize the Caption

To customize the Caption, replace the word "Action" with "Crunchbase." You'll see the button on the page the button update with your new caption

image

πŸ—οΈ

This video is for a previous version of the Page Editor. Placing a button still works the same way, but we've simplified the steps for configuring the caption

🦈

Advanced Tip: Change your button's caption to an icon To change the caption to an icon, scroll down to the Template field in the Advanced section. In the template, replace {{{ caption }}} with {{{ icon }}}, and the default "Box" icon will appear in the button. To change the icon, select "crunchbase" in the Icon field.

2. Read Data

To select data from the page (even data not directly visible in the interface), we'll add a Component Reader brick. Click the "Add Button"

In the Brick Selection modal, click "Component Reader".

When you add a brick, the Page Editor automatically selects that brick for configuration

Identify the Framework (Automatic)

The Component Reader automatically detects what front-end framework the site creator used to create the site

For LinkedIn, it will detect the popular Ember.js framework:

No action required! - PixieBrix automatically detects the front-end framework the site was built in
No action required! - PixieBrix automatically detects the front-end framework the site was built in

β˜‘οΈ

If PixieBrix did not automatically detect "Ember.js - 3.24.5", choose it in the Framework dropdown before continuing

Select the Page Element

Next, we'll tell PixieBrix where to read the data from on the page

Click the pointer icon for the Component Selector field to toggle selection mode

image

Hover your mouse to the right of the company name. When the purple overlay looks like thee following, click to select the page element:

image

Find the Property Path to Data

Let's double-check what data PixieBrix found. In the Data Panel to the right of the field, switch the "Preview" tab and search for "salesforce"

We'll see that PixieBrix found 2 fields name and universalName for the company. For our tutorial, we'll use the universalName, because that value is typically matches how other sites refer to the company (it's universal!)

Click the copy icon next to the property

Click the page icon next to unversalName to copy its property path to your clipboard: @data.moduleTracking.organization.universalName

πŸ—οΈ

The video for the "Read Data" section is under construction

3. Perform an Action

Now that we've selected the data, let's use it to perform a lookup in Crunchbase

Define the Target URL

Look at Salesforce's Crunchbase page: https://www.crunchbase.com/organization/salesforce. The URL structure ends with the word "salesforce."

In PixieBrix, we can express this URL using a template:

https://www.crunchbase.com/organization/{{variable}}

PixieBrix will replace {{variable}} with the value of the variable

Configure an Action

To add an action, click the Add button below the data brick we just added:

In the brick selection modal, click "Open a tab" from the recommend bricks

When you add the brick, the Page Editor will automatically select the brick for configuration.

Configure the url to be the Crunchbase base url, with a template using the data path we found in the Read Data step:

image

For convenience, here's the URL with the data name from the Read Data step:

https://www.crunchbase.com/organization/{{@data.moduleTracking.organization.universalName}}

πŸ—οΈ

The following video is for a previous version of the Page Editor. The configuration options for the Open a Tab brick are the same, but the location of the options have been moved

Test Your Workflow

Press the Crunchbase button to test your workflow. Try it from different company pages to see how the URL dynamically changes. Once you're happy with the button, click Save to use this brick in the future.

πŸ—οΈ

The following video is for a previous version of the Page Editor. The saving experience has not changed.

πŸ†

You've completed the Quick Start Guide! To continue learning, check out our Tutorials