In this article, you will learn how to add a banner to the top or the bottom of your website! 🚀

Top banner

Copy the code below and paste it into your website's Integrations settings as described here 🎯

Important: Remember to swap the line The text you'd like to have. with your own text before saving the changes.

<style>
.block-header {
top: 5vh;
}

@media screen and (max-width: 920px) {
.block-header {
top: 10vh !important;
}

}

.banner p {
color: white;
text-align: center;
}

.banner {
position: fixed;
top: 0;
width: 100vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
background-color: #CF8D6D;
}

@media screen and (max-width: 920px) {
.banner {
height: 10vh !important;
}
}

.marginBlock {
height: 5vh;
}

@media screen and (max-width: 920px) {
.marginBlock {
height: 10vh !important;
}
}
</style>

<script async>
setTimeout(() => {
const newDiv = document.createElement('div')
const paragraph = document.createElement('p')
newDiv.appendChild(paragraph)
// Change this line to add text
const text = "The text you'd like to have."
paragraph.innerText = text
newDiv.classList.add('banner')
const bodyTag = document.body
bodyTag.appendChild(newDiv)

const marginBlock = document.createElement('div')
marginBlock.classList.add('marginBlock')
bodyTag.prepend(marginBlock)
}, 500);
</script>

Bottom banner

Copy the code below and paste it into your website's Integrations settings as described here 🎯

Important: Remember to swap the phrase The text you'd like to have. with your own text before saving the changes.

<style>
.banner p {
color: black;
}

.closeBanner {
cursor: pointer;
position: absolute;
left: 80vw;
color: black;
}

.banner {
position: fixed;
bottom: 0;
width: 100vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
background-color: rgba(99, 58, 58, 0.7);
justify-content: center;
}
</style>
<script async>

window.addEventListener('load', (event) => {
if (!localStorage.getItem('showBanner')) {
localStorage.setItem('showBanner', true);
}

if (localStorage.getItem('showBanner') == 'true') {
} else {
document.querySelector('.banner').style.display = 'none';
}
})

function closeBanner() {
document.getElementById('banner').style.display = 'none'
localStorage.setItem('showBanner', false)
}

setTimeout(() => {
const newDiv = document.createElement('div')
const closeBtn = document.createElement('span')
const closeText = document.createTextNode('x')

closeBtn.appendChild(closeText)
closeBtn.setAttribute('class', 'closeBanner')
closeBtn.setAttribute('onclick', 'closeBanner()')
newDiv.setAttribute('id', 'banner')
newDiv.setAttribute('class', 'banner')
newDiv.innerHTML = `<p>The text you'd like to have.</p>`
newDiv.appendChild(closeBtn)
document.body.appendChild(newDiv)

const bodyTag = document.body
bodyTag.appendChild(newDiv)
}, 500);
</script>

Moving banner above the website menu

Copy the code below and paste it into your website's Integrations settings as described here 🎯

Important: Remember to swap the phrases Random text number one and Random text number one Random text number two with your own text before saving the changes.

<style>
.block-header {
top: 5vh;
}

@media screen and (max-width: 920px) {
.block-header {
top: 10vh !important;
}

}

.movingText p {
color: white;
text-align: center;
display: inline-block;
}

.movingText p:first-child {
margin-right: 100vw;
}

.banner {
position: fixed;
top: 0;
width: 100vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
background-color: #000;
}

@media screen and (max-width: 920px) {
.banner {
height: 10vh !important;
}
}

.marginBlock {
height: 5vh;
}

@media screen and (max-width: 920px) {
.marginBlock {
height: 10vh !important;
}
}
</style>

<script>
const newDiv = document.createElement('div')
const movingDiv = document.createElement('marquee')
const firstParagraph = document.createElement('p')
const secondParagraph = document.createElement('p')
newDiv.appendChild(movingDiv)
movingDiv.appendChild(firstParagraph)
movingDiv.append(secondParagraph)
const firstText = "Random text number one"
const secondText = "Random text number two"
firstParagraph.innerText = firstText
secondParagraph.innerText = secondText
movingDiv.classList.add('movingText')
movingDiv.setAttribute("loop", "infinite")
movingDiv.setAttribute("scrollamount", "20")
newDiv.classList.add('banner')
const bodyTag = document.querySelector('body')
bodyTag.appendChild(newDiv)

const marginBlock = document.createElement('div')
marginBlock.classList.add('marginBlock')
bodyTag.prepend(marginBlock)
</script>
Did this answer your question?