Wisepops offers two built-in positions for bars: top and bottom of the page. But you can also choose to place your bars in a specific place in your website structure. Let’s see how this works.

There are two main reasons why you might be interested in custom positioning.

First, you might not want to display your bar at the very top, but rather underneath your header. With custom positioning, you are free to place the bar anywhere you want in the document flow. Like in this example on our homepage:

Another reason is that the top position might overlap your fixed header. By choosing a custom position, you will be able to insert the bar inside your header. The two elements won’t be superposed, and since the bar is inside the header, it will either scroll with the content or stay fixed, depending on the style of your existing header.

When you choose the custom position, you will be asked to enter a selector to target the element where the bar will be inserted. This is something developers are familiar with. You can learn more about it here.

Here is a method that can help you find a suitable selector, using the Chrome browser.

Step 1: Go to the page where you want to display the bar.

Step 2: Right-click at the place where you want the bar to appear.

Step 3: Click on “Inspect” in the contextual menu.

Step 4: You should see the developer tools open on the Elements tab. Move your mouse over the elements; it should draw a blue square on your website. This shows you which element you are pointing at.

Step 5: Move your mouse around until you find the element that is a suitable container. Remember that the bar will be inserted as the first child of the container.

Step 6: Copy the selector by right clicking on the element > Copy > Copy selector.

For example, on https://www.xbox.com/en-us/consoles/xbox-series-x, we might want to insert our bar between the Microsoft header and the Xbox Series X menu. We will choose the CSS selector #TopContentBlockList_3 > div > div.

In the ideal situation, the chosen container has an “id” parameter. If that is the case, the copied selector will simply be the “id” of the container prefixed by #. Otherwise, Chrome will provide a selector that depends on the ancestors' hierarchy of the container. Note that it is more likely for the hierarchy dependent selector to stop working if you update your website theme.

Step 7: Paste the selector in the specified field in the Wisepops Builder and then save your work.

If we want to place the bar at the top of the header that appears when scrolling down, we'll use the following selector: .css-1y7qxpi

You can see an example of this placement on the New York Times website.

To place a bar at the top of the price graph in the below Binance example, we would use the selector: .css-1pysja1

These examples give you an idea of what’s possible and you can see that it’s not really difficult to customize the placement of your bar. Now you're equipped to place your bar in the best spot on your website.

​