Implementing Nosto
Defining Nosto placements
You can define placements for Nosto to use via a code block called div-elements. Each element marks a location in your site where Nosto can hook into and expose onsite content.
Here is an example of a
<div> tag on the site:1
<div class="nosto_element" id="frontpage-nosto-1"></div>
Copied!
The class needs to always reference
nosto_element so Nosto understands that this element is available for onsite content placement. However the id frontpage-nosto-1 is flexible but requires that each unique element-id has a matching placement defined in Nosto's admin dashboard in order to expose campaigns.Here is an example of a page with multiple
<div> elements:1
// Three separate <divs> after another on a page
2
​
3
<div class="nosto_element" id="frontpage-nosto-1"></div>
4
<div class="nosto_element" id="frontpage-nosto-2"></div>
5
<div class="nosto_element" id="frontpage-nosto-3"></div>
6
​
7
// You can also add the class and id to an element you are already using for other purposes
8
​
9
<div class="sidebar nosto_element" id="nosto-sidebar">
10
​
11
<h1>Hello World!</h1>
12
<h2>This is the sidebar</h2>
13
​
14
// You can also nest nosto elements within other wrapper elements
15
​
16
<div class="nosto_element" id="nosto-sidebar-nested-1"></div>
17
​
18
</div>
Copied!
Last modified 2yr ago
Copy link