Wisepops offers 2 built-in positions for bars: top and bottom. But you can also choose to render your bars in a specific place in your website structure. Let’s see how this works.
When do you need to use the “Custom” position?
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 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.
How to choose the CSS selector
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 the bar to be displayed.
Step 2: Right-click at the place that should contain the bar.
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 doing a right-click 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 field in Wisepops editor:
More real-life examples
https://www.nytimes.com/, 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
https://www.binance.com/en/trade/ETH_USDT, to place our bar at the top of the price graph, we'll 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. So now you can take it from here and put your bar in the most advantageous place for your needs!
Feel free to contact us if you need help :)