📘 This article explains how to use the Visual Editor to select page elements and preview your changes when creating or editing Page Editor optimizations in PageWorkers. PageWorkers is part of Botify's Activation Suite, available as an option with all Botify plans.
Overview
The Visual Editor displays a preview of a page directly in the Page Editor optimization configuration. Instead of writing a CSS selector, you click an element in the preview, and PageWorkers generates the CSS selector for you.
Use the Visual Editor to:
Select the element where PageWorkers adds or changes content
Select the element from which PageWorkers extracts a variable value
See your template changes applied to the page as you edit
The Visual Editor does not replace the other ways to define a CSS selector. You can still define a CSS selector on your own or generate one with Botify Assist, and you can check any selector with the Preview button.
The Visual Editor is available in both the creation and editing workflows for Page Editor optimizations.
Prerequisites
The optimization must use the Page Editor type. The Visual Editor is not available for Replace URL, Remove URL, or Nofollow URL optimizations.
You must select a page in the "Choose a page to test & preview" section before you can continue to the next step.
How the preview works
The Visual Editor displays a preview by asking Botify’s crawler to query the page, render it as we do in SiteCrawler, and send it to the editor to render the HTML in the iframe. We do not query the site directly through the iframe. Because our crawler gets the HTML, we can use your crawl configuration to pass eventual IP blocks, custom-header requirement, and authentication to render most pages properly.
Page source: The preview is built by fetching the page HTML live. The page does not have to be part of a Botify crawl.
Rendering differences: The preview can look different from your live page. For example, the saved HTML may lack scripts your website uses to apply styles.
Navigation: Links in the preview do not open other pages. To view a different page, select another URL in the "Choose a page to test & preview" section.
Head elements: Elements that do not display on the page, such as the title and meta description, appear in a dedicated section of the Visual Editor.
Selecting an element to add or modify
Adding a new H1 heading or custom HTML requires a CSS selector that identifies where PageWorkers places the content. Changing an existing title, description, or H1 does not require a CSS selector.
To select an element in the Visual Editor:
Create a PageWorkers optimization using the Page Editor type, or edit an existing Page Editor optimization.
In the "Choose a page to test & preview" section, select the page to display in the preview. Only pages crawled by Botify are in this list, but you can add any URL.
On Step 2 of the PageWorkers wizard, the page you selected for testing automatically loads in a frame on the right-hand side of the page.
In the "Elements to update" section, expand the Add an element dropdown, then select the element type to add or edit.
To add or edit an element, define your template in the text box. PageWorkers generates a CSS selector for the selected element. For new H1 tags, click Choose where to insert, then select the location in the Visual Editor, as shown in the example below.
Select a strategy to define where the new content is placed in relation to the selected element.
Optionally, edit the generated CSS selector, then click Preview to confirm it returns the expected result.
Continue configuring the optimization.
Example: Adding an element
This example shows adding an H1 tag to the page in the Visual Editor:
Example: Editing an element
This example shows using the Visual Editor to replace an existing H1 tag with the page meta description:
Selecting an element for an extracted variable
To extract a variable value from an element you select in the preview:
While defining a template, click Create new.
Provide a name for the variable and choose to extract the value from the page.
Click Select an element, then click the element in the preview that contains the value to extract. PageWorkers generates a CSS selector for the selected element.
Select an extraction strategy. If you select the attribute strategy, identify the attribute name.
Optionally, edit the generated CSS selector, then click Preview to confirm it returns the expected value.
Click Save.
👉 For multi-value variables, you can use the Visual Editor to select the container element only. To define the CSS selector for each field within the container, define the selector on your own or generate it with Botify Assist.
Example: Editing an extracted variable
In this example, we use the Visual Editor to get the CSS selector for the publication date, then use a custom HTML element to update its value:
Previewing template changes
As you define your template, the preview displays the page with your changes applied, so you can check the result before saving the optimization.
👉 If a variable's values are defined by URL, individually or with a CSV file, the preview displays a placeholder in place of the variable's value.
Hover over the editor to access the following views:
Web page: The default view with the web page inside the iframe next to the optimization configuration options. You cannot navigate to other pages on the website from this view.
HTML head: The values of the elements inside the page's metadata.
Live page: The live page view in a separate tab, where you can navigate the website.
Expand: Displays the page across the width of the PageWorkers interface.
The preview in the Visual Editor is different from the Preview function on the optimization detail page, which opens a page in a new browser tab to show how the saved optimization appears.
Troubleshooting
Most pages should display in the Visual Editor when creating Page Editor optimizations, as explained in How the preview works. Possible reasons for the preview to not load or to load improperly include a render failure for a page timeout or other error, and resources blocked by the iframe (e.g., fonts).
If the Visual Editor does not display a preview, define CSS selectors on your own or with Botify Assist, and check them with the preview.
Read next: