Manage web modifications manage-web-modifications
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
-
Select the Modifications icon to display the corresponding pane on the left.
-
You can review each of the changes you made to the page.
-
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. -
If you are authoring a single-page application, you can apply any modification to other views. Learn more
-
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.
-
Use the More actions button on top of the Modifications pane to delete all modifications at once.
-
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.
-
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.
-
From the Modifications pane, click the More actions button.
-
Select Add a modification.
-
Select the modification type:
- CSS Selector - Learn more
- Page
<Head>- Learn more
-
Enter your content and Save your changes.
-
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.
-
Select CSS Selector as the modification type.
-
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.
-
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.
-
Select Page
<head>as the modification type.
-
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>. -
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
For example:
| code language-none |
|---|
|
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.
<head> modification type for two campaigns impacting the same URL.<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.