Search Yelp Reviews from OpenTable (6 min)


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

Start by navigating your browser to Elea's OpenTable page: Elea. Then, open the PixieBrix Page Editor, and grant PixieBrix access to the page.

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]
  • ℹ️

    (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.

  • Click and PixieBrix will add a new custom button "Action" at the end of the button group

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 restaurantName

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 restaurantAddress


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: restaurantName
  • For location, add the property path to restaurant address: restaurantAddress

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.