Visual Experience Composer (VEC)

The Visual Experience Composer (VEC) in Adobe Target is a WYSIWYG editor for creating and testing personalized experiences directly on websites and mobile web pages without editing code.

Create experiences and offers for Target activities by dragging and dropping elements, swapping content, and changing page layouts. The composer also provides options for editing HTML and JavaScript.

Browser requirements browser-requirements

Safari is supported for the Adobe Target interface. You can create form-based activities in Safari and use all functionality, except the VEC and the Enhanced Experience Composer (EEC). If you open the Visual Experience Composer in Safari, an overlay prompts you to switch to Google Chrome to edit experiences.

Browsers such as Firefox might block pages that contain mixed content, such as a non-secure page within a secure site, from displaying in the VEC. If a page does not display, click the icon next to the URL in the browser address bar, then click Disable protection on this page. This issue does not affect how pages display to site visitors.

Open the VEC open-the-vec

To set the page that opens by default in the VEC, enter a default Visual Experience Composer URL on the Target Administration > Visual Experience Composer tab.

If you do not set a default URL, the VEC opens with a blank page where you can specify a URL.

Edit experiences edit-experiences

View and name experiences view-and-name-experiences

Use the tabs in the Experiences rail to view how your page appears to different audiences or with different experiences. Give each experience a descriptive name to make it easier to identify in the list.

For example, when testing the position of the Home link in your navigation bar, name the experience in which it appears first “Home link first.”

Select and modify elements select-and-modify-elements

Move your cursor over the page to highlight individual elements with a context-sensitive box.

Click a highlighted element to display the editing options for that element type. For example, select an image and click Change Image source to replace it, or select a button to change its text color.

You cannot edit content inside an iframe embedded in the page. To edit that content, ensure that the iframe document is Target-enabled, then load the iframe URL directly in the VEC.

Changes to the page structure outside the VEC can affect locations used by an activity. If those locations change, Target might not be able to find the elements you modified, which can cause issues when editing experiences.

Browse and design browse-and-design

Click Browse to navigate to a page accessible from the current page, such as a shipping page or shopping cart, and test changes there.

In Browse mode, you can also access elements that appear on hover, such as flyout menus and mini-carts. When you reach the page or element you want to edit, click Design to edit the experience.

If a hover state depends on JavaScript, ensure that Disable JavaScript is not selected. JavaScript must be enabled to edit elements that depend on it.

For details about the available editing options, see Visual Experience Composer Options.

Manage page loading manage-page-loading

Some editing options remain available while a page loads or after it fails to load. You can also cancel page loading to access these options without waiting.

Edit a page while the page is loading or after the page fails to load loading

You can make some changes before a page finishes loading in the VEC or after it fails to load, for example, because custom code no longer works.

Use the available editing options to:

The Experiences rail, Components rail, and Configure options remain accessible while the page loads or after it fails to load.

Cancel loading of a page within the VEC cancel-loading

Cancel page loading in the VEC to edit the activity without waiting for the page to finish loading.

Canceling page loading is useful when you need to:

After canceling page loading, you can switch between experiences in the activity without waiting for the page to load. Click Reload to display the page in the VEC again.

To stop page loading, click Cancel Loading while the page is loading. The page remains unloaded for this activity during the current editing session unless you reload it.

Click Reload to resume managing experiences in the current activity or add new modifications.