Before you begin this tutorial, make sure you've completed the Quick Start Guide
In this tutorial, we'll automate a simple process: searching for Yelp reviews of restaurants you're viewing in OpenTable, all with the click of a button.
We'll use the Elea page to develop our workflow. There is a video at the end of of this tutorial demonstrating what’s covered in the text.
1. Place a Button
Open the Page Editor
Place a Button
- Click Add in the top left of the Page Editor and choose Button
- Then hover your cursor over any of the OpenTable buttons in the button group that includes [Overview, Photos, Menu, Specials, Reviews]
- Click and PixieBrix will add a new custom button "Action" at the end of the button group
(Optional Details) If you're using a different restaurant to build this flow, there might be additional buttons in the group, e.g., a Twitter button. Make sure to select a button that appears on every restaurant page, otherwise PixieBrix may infer a container selector that won't successfully locate the menu on every page. For example, if you select the Twitter button, by default PixieBrix looks for a menu with a "Twitter" button to place the new buttons.
Customize the Caption
To customize the caption, click the Page Editor Menu Item tab. Then replace the word "Action" in the Caption text box with "Yelp"
2. Select Data
Select the Page Element
- Start by clicking the Data tab in the Page Editor
- PixieBrix should detect React as website's Framework. If React is not detected, select it from the Framework dropdown
- Click the pointer icon next to the Selector, then click on "Elea"
Optional: Choose a More Robust Selector
By default, PixieBrix will have chosen a selector that's based on the structural layout of the page. To ensure your selector works even if part of the OpenTable restaurant page layout changes, you can select the primary heading element
h1 suggestion from the "Selector" dropdown.
Locate the Property Path to Data
We're now going to locate the property paths for the restaurant name and it's address.
To locate the path to the restaurant name, search for "elea" in the Page Editor Search field. You should see the following results:
We'll use the restaurant name for our Yelp search. Its property path is
Next, search for "address" in the Page Editor Search field, and you should see the following results:
We'll use the restaurant address for our Yelp search. Its property path is
You can click the 📃 icon next to the property path to copy it to your clipboard. This will come in handy when configuring your search in the next section of this tutorial.
3. Perform an Action
Configure the Search
- Go to the Effect tab of the Page Editor and click Add a Block
- Search "yelp" and choose the Yelp Search in a new tab
- For query, add the property path to restaurant name:
- For location, add the property path to restaurant address:
Test Your Search
Press the Yelp button to test your search. Try it from different restaurant pages to see how the search dynamically changes. Once you're happy with the button, click Save to use this search in the future.