If you want to target the existing element of a web page and request Nosto to manipulate it, you can to create a Dynamic Placement in your Nosto Admin Panel and define the path to target the element using CSS selectors.

Example

Let's illustrate through a concrete use case.

Step #1 - Identifying the element to manipulate

I will replace the hero banner of a website.

I browse the website, right click on the element I want to manipulate and use the google chrome inspector (or similar tool for other browsers):

Once I have identified the element, which is in this case a div tag with the class name "flexslider", I can use that information in the Nosto Admin Panel when I create a new Placement.

Step #2 - Setting up the Placement

I am ready to create a new Placement and give it an explicit name such as New Banner. 

The Placement will be used on the Front page and since the element is not natively present in the page's source code, I change the Placement type to be Dynamic. 

I give the Placement a unique ID, define the CSS Selector that points to the element I want to manipulate and choose a Replace method.

Once the Placement is enabled and an Onsite Content Personalization campaign uses the Placement, the campaign is loaded as such onsite:

As we can see in the source code, the new Dynamic Placement injected on the page is the following: 

and will entirely replace the initial element: 

​Further resources

You can find all CSS selectors listed here along with an interactive selector tester here for learning purposes.