DocumentationJourney OptimizerJourney Optimizer Guide

Manage web modifications manage-web-modifications

Last update: September 8, 2026

CREATED FOR:

  • Intermediate
  • Beginner
  • User

On this page: Learn how to review, delete, and undo the changes applied to your web page from the Modifications pane, and how to add CSS selector and page head modifications directly in Adobe Journey Optimizer.

style
shade-box

You can easily manage all the components, adjustments and styles you added to your web page. You can also add modifications directly from the dedicated pane.

Work with the Modifications pane use-modifications-pane

  1. Select the Modifications icon to display the corresponding pane on the left.

  2. You can review each of the changes you made to the page.

  3. Select an unwanted modification and click the Delete modification option from the More actions button to remove it.

    note caution
    CAUTION
    Proceed with care when deleting an action as it may impact subsequent actions.

  4. If you are authoring a single-page application, you can apply any modification to other views. Learn more

  5. To delete multiple modifications at the same time, click the Select button on top of the Modifications pane, check the modifications of your choice and click the Delete icon.

  6. Use the More actions button on top of the Modifications pane to delete all modifications at once.

  7. You can also delete only the invalid modifications, meaning the changes that were overriden by other changes. For example, if you modify the color of a text and then you delete that text, the color modification becomes invalid as the text does not exist anymore.

  8. You can cancel and redo actions using the Undo/Redo button on top right of the screen.

    Click and hold the button to switch between the Undo and Redo options. Then click the button itself to apply the desired action.

Add modifications from the dedicated pane add-modifications

When editing a page using the web designer, you can add new changes to your content directly from the Modifications pane - without the need to select a component and edit it from the web designer interface. Follow the steps below.

  1. From the Modifications pane, click the More actions button.

  2. Select Add a modification.

  3. Select the modification type:

  4. Enter your content and Save your changes.

  5. Click the More actions button next to your modification and select Info to display its details.

CSS selector css-selector

To add a CSS Selector type modification, follow the steps below.

  1. Select CSS Selector as the modification type.

  2. The CSS Element Selector field helps you find and select the HTML elements (or nodes in the DOM tree) you want to apply changes on.

  3. Select an action type (Set Content or Set Attribute) and fill in the required information/content.

    • Set Content: specify the content that goes into the element identified by the CSS Element Selector field.

    • Set Attribute: specify an attribute to be associated with the current CSS selector so that this selector can then be identified also by this attribute. To do so, enter a name in the Attribute name field and a value in the Content field. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

Page <head> page-head

You can add custom code using the Page <head> modification type.

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. In this case, code does not wait for body or page-load events - it is executed at the beginning of the page load.

The <head> element is commonly used to add JavaScript or CSS code to the top of the page. Selectors for subsequent visual actions depend on the HTML elements added in this tab.

To add a Page <head> type modification, follow the steps below.

  1. Select Page <head> as the modification type.

  2. Add your custom code in the Content box.

    note caution
    CAUTION
    You can only add <script> and <style> elements to the <head> section. Adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.

  3. Click the Advanced editing options button. The personalization editor opens.

    You can leverage the Journey Optimizer personalization editor with all its personalization and authoring capabilities. Learn more

Custom code examples custom-code-examples

You can use the Page <head> modification type to:

  • Use JavaScript inline or link to an external JavaScript file.

    For example, to change an element’s color:

    code language-none 
    <script type="text/javascript">
document.getElementById("element_id").style.color = "blue";
</script>

  • Configure a style inline or link to an external stylesheet.

    For example, to define a class for an overlay element:

    code language-none 
    <style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>

Custom code best practices custom-code-best-practices

Always wrap the custom code in one element.

For example:

code language-none 
<script>
// Code goes here
</script>

In the case that any modifications are needed, make changes inside this container.

If you do not need the custom code anymore, just leave this container empty, but do not remove it. This ensures other experience modifications are not affected.

Do not perform document.write actions in custom code scripts.
Scripts are executed asynchronously. This often causes document.write actions to appear in the wrong place on your page. Using document.write in scripts created in custom code is not recommended.
If you create an element and then modify it, do not delete the original element.
Each change creates a new element in the Modifications panel. Because the second action modifies Element 1, if you delete Element 1, that action no longer has anything to modify, so the change no longer works.
Be careful when using the Page <head> modification type for two campaigns impacting the same URL.
If you use the Page <head> modification type for two campaigns impacting the same URL, the JavaScript is injected into the page from both campaigns. Journey Optimizer automatically determines the order of the delivered content. Make sure the code does not depend on placement. It is up to you to make sure there are no conflicts in the code.
AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to review, delete, and undo changes applied to a web page from the Modifications pane, and how to add CSS selector and page head modifications directly in Journey Optimizer.

Intents:

  • Review the changes made to a page from the Modifications pane
  • Delete a single modification, multiple modifications, all modifications, or only invalid modifications
  • Undo and redo actions using the Undo/Redo button
  • Add a modification directly from the pane as a CSS Selector or Page <head> type
  • Configure a CSS Selector modification with a Set Content or Set Attribute action
  • Add custom JavaScript or CSS code through a Page <head> modification

Glossary:

  • Modifications pane: The pane used to navigate through and manage all components, adjustments, and styles added to a web page, and to add new modifications (product-specific)
  • Invalid modifications: Changes that were overridden by other changes, for example a color modification whose target text was later deleted (product-specific)
  • CSS Selector modification: A modification type that uses the CSS Element Selector field to identify HTML elements (DOM nodes) and apply a Set Content or Set Attribute action (product-specific)
  • Page <head> modification: A modification type for adding custom code to the <head> container, executed at the beginning of page load (product-specific)
  • Set Content: A CSS Selector action that specifies the content placed into the element identified by the CSS Element Selector (product-specific)
  • Set Attribute: A CSS Selector action that associates an attribute (name and value) with the current CSS selector; an existing attribute’s value is updated, otherwise a new attribute is added (product-specific)

Guardrails:

  • Proceed with care when deleting an action, as it may impact subsequent actions.
  • You can only add <script> and <style> elements to the <head> section; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Do not perform document.write actions in custom code scripts, as scripts are executed asynchronously and this often causes document.write to appear in the wrong place.
  • If you create an element and then modify it, do not delete the original element, because the modifying action would no longer have anything to modify and would stop working.
  • If you use the Page <head> modification type for two campaigns impacting the same URL, JavaScript is injected from both campaigns and Journey Optimizer automatically determines the order; make sure the code does not depend on placement and has no conflicts.
  • Always wrap custom code in one element; if the code is no longer needed, leave the container empty but do not remove it.

Terminology:

  • Canonical name: Modifications pane — Acronym: n/a — variants: Modifications panel
  • Synonyms: “CSS Element Selector” = “CSS selector field used to find and select HTML elements”
  • Do not confuse: “Set Content” (specifies content placed into the selected element) ≠ “Set Attribute” (associates an attribute name and value with the CSS selector)
  • Do not confuse: “Delete modification” (removes one modification) ≠ “Undo” (cancels an action, reversible with Redo)
  • Do not confuse: “invalid modifications” (changes overridden by other changes) ≠ modifications you intentionally delete

FAQ:

  • Q: How do I delete all modifications at once? — Use the More actions button on top of the Modifications pane to delete all modifications at once.
  • Q: What are invalid modifications? — Changes that were overridden by other changes, such as a color modification whose target text was later deleted; you can delete only the invalid modifications.
  • Q: What can I add in a Page <head> modification? — Only <script> and <style> elements; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Q: What is the difference between Set Content and Set Attribute? — Set Content specifies the content placed into the element identified by the CSS Element Selector; Set Attribute associates an attribute name and value with the CSS selector, updating it if it already exists.
  • Q: Can I undo changes? — Yes, use the Undo/Redo button on the top right; click and hold to switch between Undo and Redo, then click to apply.
recommendation-more-help
journey-optimizer-help