The following actions modify existing content on your site when used in a Web experience. You can find options to build these actions on the Edit/Other tab of Action Builder.
Edit HTML Action
The Edit HTML action copies the HTML content of an existing element, including any child elements, on the page and inserts it after the original selector. Then, the action hides the original element. This type of action allows you to make quick edits to any existing content on a page, such as a product description or heading. The action also appends included CSS styles in the <head> of the page.
While the Edit HTML action should keep any CSS styles from an ID or class intact, it may break JavaScript bindings on elements that you select. If you need to edit elements on the page that require the native JavaScript to remain intact, then use an Insert HTML action to take over the inner content while leaving the parent element with its bindings intact.
Required Components
Relative Element Selector
Enter the element selector into Relative Element Selector. This selector determines which HTML content the action copies and makes available for editing. For additional information on selectors, refer to the Element Selectors.
HTML
This code editor is populated within Action Builder when you select an element on the page. You can edit or alter the original content in any way within this code editor. The content is a duplicate of the original content but may not keep any JavaScript binding intact.
Optional Components
CSS Style
Monetate appends anything that you add in the CSS editor to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page element.
Select All Elements
The Select multiple elements, if matched? setting allows you to apply the action to the first occurrence of the relative element selector or to all occurrences of it, if multiple exist.
Select NO if you want the action to apply to the first occurrence. Select YES if you want the action to apply to all occurrences.
Re-Check for Elements
Use the Re-check for Elements toggle to enable or disable polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if certain elements don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Hide Element Action
The Hide Element action hides the selected element(s) on the page by inserting an inline style and setting the display property to display: none !important; on the selected element(s). The action also appends included CSS styles in the <head> of the page.
Required Component
Relative Element Selector
Enter the element selector into Relative Element Selector. This selector determines which elements are hidden. For additional information on selectors, refer to Element Selectors.
Optional Components
CSS Style
Anything you input into the CSS editor is appended to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page element.
Select All Elements
Use the Select multiple elements, if matched? toggle to apply the action to the first occurrence of the relative element selector or to all occurrences of it, if multiple exist.
Select NO if you want the action to apply only to the first occurrence. Select YES if you want the action to apply to all occurrences.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Modify Attribute Action
The Modify Attribute action adds, removes, or changes the value of an attribute on one or more specific elements.
Monetate uses an attribute to define the characteristics of an element and places them inside the element's opening tag. Some examples of attributes include class, id, placeholder, src, href, and many others.
This action allows you to add or alter an element's attribute without breaking any existing JavaScript bindings on that element. For example, it allows you to edit the href location of a link without inserting a new copy of the link. This modification method keeps any data tracking already bound to that link with JavaScript intact.
Required Components
Relative Element Selector
Enter the element selector into Relative Element Selector. This selector determines which element's attribute the action adds, removes, or edits. For additional information on element selectors, refer to Element Selectors.
Attribute
Specify the attribute that you want the action to add or modify (for example, href or src). If it exists, then Monetate alters its value. If it doesn't exist, then Monetate adds it to the element with its optional value.
Optional Components
Replacement Value
Input the value(s) that you want the action to insert if you are adding or modifying the current value of an attribute. If you're removing the attribute, then you can leave this field blank.
CSS Style
Anything you add to the CSS editor is appended to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Select All Elements
The Select multiple elements, if matched? setting controls if the action applies only to the first occurrence of the relative element selector or to all occurrences of it, if multiple exist.
Select NO if you want the action to apply only to the first occurrence. Select YES if you want the action to apply to all occurrences.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Remove Attribute and Value
The Remove Attribute and Value toggle determines whether the action removes the specified attribute and its value instead of adding or modifying it.
If you select YES, then the action removes the specified attribute and any value it has from the selected element(s). If you select NO, then the action adds or modifies to the selected element(s) the attribute you specify.
Move Element Action
The Move Element action alters the position of any element on a page relative to any other element.
Some common use cases for Move Element actions are as follows:
- Changing the order of items in a navigation bar
- Moving a search box to a different position on the page
- Moving the store's physical address to a more prominent position on the page
The action appends any included CSS styles in the <head> of the page.
Required Components
Selectors
Enter into Element to Move the element selector for node that the action is moving. Enter into Relative Element Selector the element selector to find the node that the element being moved is positioned relative to. For additional information about selectors, refer to Element Selectors.
Insert Method
The option you select from Insert Method determines how the action inserts the moved element relative to the relative element:
- After the selected element
- Before the selected element
- Replace the selected element
- First child of the selected element
- Last child of the selected element
- Take over the contents of the selected element
Optional Components
Styles
The action appends any CSS you input in Style for Moved Element to the node being moved, and appends any CSS you input in Style for Relative Element to the node that the moved element is being positioned relative to.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when your the loads.
Set Background Image Action
The Set Background Image action applies a background-image property with the uploaded creative as its image URL to the selected element(s). It also appends included CSS styles in the <head> of the page.
Required Components
Image Creative
Monetate uses the image creative that you upload as the background-image property image URL of the selected element(s).
Relative Element Selector
Enter the element selector into Relative Element Selector. It determines where the background image creative is used. Monetate applies a unique class to this element for styling and applying the background-image property. For additional information on selectors, refer to Element Selectors.
Optional Components
Selector CSS Styles
Input into Selector CSS Styles any CSS that you want the action to apply as inline CSS styles to the selected element(s).
By default, the background image inherits positioning and repeat properties. You can add background property styling to this input to adjust how the background image renders. For example, background-repeat: no-repeat !important; prevents the background from repeating throughout the whole element, and background-position: center top !important; positions the image in the center of the X-axis and top of the Y-axis.
You can choose from a variety of background style properties to control the background image. Refer to W3Schools' CSS background property resource for more information.
CSS Style
Monetate appends anything you input into the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Select All Elements
The Select multiple elements, if matched? setting controls if the action applies to the first occurrence of the relative element selector or all occurrences of the selector, if multiple exist.
Select NO if you want the action to apply only to the first occurrence. Select YES if you want the action to apply to all occurrences.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Show Element Action
The Show Element action displays the selected element(s) on the page and removes any inline styling that would otherwise hide the element (for example, display: none; or visibility: hidden;). It also appends included CSS styles in the <head> of the page.
Required Component
Relative Element Selector
Enter the element selector into Relative Element Selector to identify which elements are hidden. For additional information on element selectors, refer to Element Selectors.
Optional Components
CSS Style
Monetate appends anything you input the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page elements.
Select All Elements
The Select multiple elements, if matched? setting controls if the action applies to the first occurrence of the element selector or to all occurrences of it, if multiple exist.
Select NO to apply the action to the first occurrence. Select YES to apply the action to all occurrences.
Re-Check for Elements
Use Re-check for Elements to enable or disable polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Swap Elements Action
The Swap Elements action switches the position of two elements on a page.
Some common use cases for swap actions include the following:
- Swapping the order of two products
- Reordering navigation bar links
- Switching the positions of two banners
This action also appends included CSS styles in the <head> of the page.
Required Components
Selectors for Element A and Element B
Enter into Selector For Element A the selector to find the first element that you want the action to swap. Enter into Selector For Element B the selector to find the second element that you want the action to swap. For additional information on element selectors, refer to Element Selectors.
Optional Components
Styles
The action appends any CSS you input in Style for Element A as an inline style attribute of the first element you move with this action. It appends any CSS you input in Style for Element B as an inline style attribute of the second element you move with this action.
CSS Style
Monetate appends anything you input into the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.