Comment on page
Search Yelp Reviews from OpenTable

🍎 Before you begin this tutorial, make sure you've completed the Developer 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.
0. Start here
Start by opening another tab for Elea's OpenTable listing: Elea. 👈 Click that. Keep that tab open, and then come back over here.
1. Place a Button
Open the Page Editor
Then, open the PixieBrix Page Editor on the OpenTable/Elea page, NOT this page.
📘 Need help opening the Page Editor? Follow the steps here: Open the 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 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
 🚨 If you had the Page Editor open before navigating to the Elea 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.
Then hover your cursor over the Overview button in the OpenTable actions. If it says button, move your mouse down a bit until it says li or span.
Click, and PixieBrix will add a new custom button called Action at the end of the button group
Don’t see it at the end, or it’s formatting weirdly? Go to the Location field that appears in the middle panel of your page editor, and click the box to the right of the mouse button. Replace the text with this ol:has(> li:contains('Overview'))
Customize the Caption
To customize the caption, replace the word "Action" in the Caption text box field with "Yelp"
2. Read the Data
We'll add the Extra from Page brick to select data from the page (even data not directly visible in the interface). Click the + button to add a brick.
Search “extract from page” and select the brick that appears. Search for Jquery Selector Reader if that doesn’t appear.
Select the Page Element
Next, we'll tell PixieBrix where to read the data on the page.
Click the pointer icon for the selector field to toggle the selection mode.
Hover your mouse to the right of the restaurant name. When the purple overlay looks like the following, click to select the page element:
Optional: Choose a More Robust Selector
By default, PixieBrix will choose a selector based on the page's structural layout. To ensure your selector works even if part of the OpenTable restaurant page layout changes, select the #mainContent h1 suggestion from the "Selector" dropdown.
Rename the Property
Change the “Property” name to something more descriptive, like restaurantName
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 expand the data. We'll see that restaurantName is “Elea” for this page, which makes sense.
Click the copy icon next to restaurantName to copy its property path to your clipboard: @data.restaurantName
3. Perform an Action
Now that we've selected the data let's use it to perform a Yelp search.
Configure an Action
To add an action, click the + button below the data brick we just added
In the brick selection modal, search for the "Yelp search in new tab" brick and choose it
​
Configure the input using the data path we found in the Read Data step:
​
4. 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.
Don’t want to build and just want to activate?
You’re in luck! Head to the marketplace to activate this mod and start using it immediately without building anything.
 🙋 Need some help with building? Head over to the Slack Community, and we’ll gladly help you!