πŸŽ‘

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. Select data: we'll scrape data from that page
  3. Perform an action: we'll use this data to perform a lookup

In this tutorial, we'll use 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.

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 clicking Grant Permanent Access, or temporary access by clicking on the PixieBrix extension in the extensions dropdown and then refreshing the page.

🚨

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

Then 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. Then click, and PixieBrix will add a new custom button to the button group.

Customize the Caption

To customize the caption, click the Page Editor Menu Item tab and replace the word "Action" with "Crunchbase." Now the button is labeled in a more intuitive way for this workflow.

🦈

Advanced Tip: Change your button's caption to an icon To change the caption to an icon, click the Foundation tab and scroll to the Template section. In the template, replace {{{ caption }}} with {{{ icon }}}, and the default "Box" icon will appear in the button. To customize the icon for this tutorial, go to the Menu Item tab and search "crunchbase" in the Icon dropdown.

2. Select Data

Identify the Framework

Start by clicking the Data tab in the Page Editor. The Framework field identifies the framework used to develop the webpage, which is "Ember.js - 3.16.9" for LinkedIn.

If PixieBrix did not automatically detect "Ember.js - 3.16.9", choose it in the Framework dropdown for this tutorial.

Select the Page Element

In the Data tab, click the pointer icon next to Selector. Then hover your mouse over the section of the page that has the company name i.e. "salesforce" until the shaded blue area looks like the image below. Then click to select this page element:

image

Find the Property Path to Data

Click the Selector dropdown and choose the following div tag:

image
🚨

There are two div tags called .org-top-card>*. Choose the one that has both DIV and Data labels.

Next, go to the search bar at the bottom of the Page Editor, and search for "salesforce." Expand the selection until you find "salesforce"

image

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

3. Perform an Action

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 as:

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

This expression replaces "salesforce" with the value you selected surrounded by "{{" and "}}"

Configure an Action

Go to the Effect tab of the Page Editor

Choose Open a Tab, which is one of the recommended Bricks

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 workflow in the future.

πŸ†

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