<style>
.floating-ad {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
display: none;
}
</style>
<div class="floating-ad">
<a href="#" target="_blank">
<img src="/ad-1.png" alt="Ad 1">
</a>
</div>
<script>
var ads = [
{
imageUrl: 'ad-1.png',
linkUrl: 'https://example.com/special-offer-1'
},
{
imageUrl: 'ad-2.png',
linkUrl: 'https://example.com/special-offer-2'
},
{
imageUrl: 'ad-3.png',
linkUrl: 'https://example.com/special-offer-3'
}
// Add more ads here as needed
];
var randomAdIndex = Math.floor(Math.random() * ads.length);
var ad = ads[randomAdIndex];
var randomTime = Math.floor(Math.random() * 60000) + 60000; // Random interval between 1 and 2 minutes
setTimeout(function() {
var adElement = document.querySelector('.floating-ad');
adElement.querySelector('img').src = ad.imageUrl;
adElement.querySelector('a').href = ad.linkUrl;
adElement.style.display = 'block';
}, randomTime);
</script>
In this example, we have an array of ads that includes the URLs of the image and the link for each ad. We then use JavaScript to randomly select an ad from the array, and set the image and link for that ad in the floating ad element.
You can add more ads to the array as needed, and customize the ad image and link URLs to match your website's offers. Note that this is a basic example and you may want to consider other factors, such as the size and placement of the ad, to optimize its effectiveness.