All Collections
Campaign
Using the FunnelEnvy Visual Page Editor
Using the FunnelEnvy Visual Page Editor

The FunnelEnvy Visual Page Editor lets non-technical users create and edit variations through a point and click interface.

Arun Sivashankaran avatar
Written by Arun Sivashankaran
Updated over a week ago

The FunnelEnvy Visual Page editor is a Chrome Web Store extension that works with Google Chrome Browsers and lets FunnelEnvy users create and edit campaign variations. With the extension installed you can:

  • Edit Text

  • Edit HTML

  • Hide or Remove Elements

  • Add & Edit custom CSS

  • Run custom Javascript

As you make changes you can see the effect of them directly on the web page and save them to the associated campaign variation.

Installation

The Visual Page Editor extension must be installed on a Google Chrome browser. Navigate to the Chrome Web Store page and click on the "Add to Chrome" button.

Activating the Visual Page Editor

Once the Visual Page Editor is installed, select the campaign and variation that you would like to edit. Click on "Update Variation". If the extension is installed a new browser tab will open to the Preview URL of your campaign.

To activate the extension on this page and start editing, click on the FunnelEnvy icon in the Chrome toolbar and select "Activate Editor". This is required to give our extension permissions to access the page on your local browser.

Making Variation Changes

Once the editor is activated you can click on elements of the page. A context-sensitive menu will appear, presenting options for the changes you can make to that element.

The bar above the editor shows your place in the DOM and the selector of the current element. You can select parent elements (including the body element) by clicking on the breadcrumbs.

To change the variation CSS click on the "Edit CSS" link on the top bar. A CSS editor will appear where you can add CSS that will be applied to the variation.

If at any point in time you want to interact with the page without the Editor tools you can click on the "Interactive Mode" icon at the top bar.

Viewing, Editing and Saving Changes

The changes that have been made to the page are stored sequentially and can be seen by clicking on the N Changes text at the top right. A panel will appear which lets you Edit or Remove changes. Note that in the Visual Page Editor and when a variation runs, changes to the page are applied in this order.

To save changes from the Visual Page Editor to the variation click on the "Save" button at the top right. A confirmation message will appear if the save was successful. At this point you can exit the visual editor and return to the variation.

Did this answer your question?