What is Visual Selector?

It is a toolbar which allows to select items visually. It can be used when an element or an element from a webpage needs to be selected for monitoring. Visual Selector toolbar loads automatically at the bottom or top ( in case of Web app using remote browser) of the webpage when “Add webpage” or “Select elements to Watch” is clicked. Given below is the Visual selector toolbar in Chrome extension:

Visual Selector - Distill Web Monitor

How to use Visual Selector?

Step 1: Click on “Add”→ “Webpage” from the Watchlist or “Select Elements to Watch”from the Distill menu pop-up/bookmarklet. It will open up the Visual Selector toolbar. You can see the toolbar at the top in case of remote browser using Web App otherwise at the bottom. Open up the webpage which you want to monitor.

Step 2: Click on “Select Elements” from the toolbar. Once you click on it, the “play” icon will change into “pause” button. In some cases you will have to skip this step if pause icon is already there. Visual Selector is ready to be used to select contents on the webpage. You can also filter the webpage using Regular expression. You can write the RegExp at the specified place by expanding the Visual Selector toolbar as shown below:

Expanded Visual Selector - Distill Web Monitor

Step 3: Hover around the content on the webpage which you want to monitor. Once the content area is bound inside the rectangular black box, “Click” to select. You can make multiple selections on the webpage if required. Also, you can expand, contract and delete the selection by expanding the selection box using left and right caret icon. The expand view of selection is shown below:

Step 4: “Save selection” once you are done with the selection.

Change the default settings for the added monitor in Options window. Now enjoy! while Distill will check for changes in your Monitor.