Dynamic Advertising

Dynamic ads in RoveIQ offer a powerful way to engage your audience by showcasing live, interactive content. Unlike static images or videos, dynamic ads are HTML pages that leverage APIs to fetch live data and use JavaScript to perform specific functions. These ads are perfect for scenarios where real-time information is essential, such as countdown timers, live weather updates, sports scores, or stock market data.

Benefits of Dynamic Ads

Real-Time Updates: Automatically pull in the latest information without the need for manual updates.
Increased Engagement: Interactive and relevant content captures more attention than static visuals.
Customizable: Tailor ads to display specific data points, such as local weather, event countdowns, or performance metrics.
Versatility: Use dynamic ads across a wide range of industries, from retail to finance and entertainment.

Dynamic Weather Ad Example

This HTML creates a dynamic weather display that pulls live weather data for a specified location using the OpenWeatherMap API. Below is an explanation of key parts of the code:

Font Styling: Custom fonts (Open Runde) are used for a clean and modern look, loaded via a CDN. This matched the default system font of the RoveiQ Application.
Responsive and Centered Layout: The weather display is centered on the screen with a gradient blue background. Flexbox is used for alignment and spacing between elements.
Dynamic Weather Data: The script fetches weather data from OpenWeatherMap’s API using the latitude and longitude of the location (lat and lon variables).
- Displays the following:
- Location name
- Current temperature
- Weather description
- High and low temperatures
- Wind speed
- Weather icon
Styling Adjustments: The layout is designed for readability, with increased font sizes and white text to stand out against the gradient background.

When using an API call on your dynamic ads, it’s crucial to design them to fail silently. This means your ads should not display console errors, pop-ups, or alerts if something goes wrong, such as an API failure or network issue.

Weather Example.png

Steps to Use

Obtain API Key: Replace [YOUR API KEY HERE] with your actual OpenWeatherMap API key.
Change Location: Modify the lat and lon variables to reflect the desired location.
Host the HTML: Save this code as an HTML file (e.g., weather.html) and upload it to your preferred hosting platform.
Schedule the Ad: In RoveIQ, add this as a dynamic ad by providing the URL to the hosted HTML file. For more information on scheduling the ad check out this article.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Display</title>
<style>
@font-face {
font-family: 'Open Runde';
src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde/src/web/OpenRunde-Bold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde/src/web/OpenRunde-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Open Runde';
src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde/src/web/OpenRunde-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde/src/web/OpenRunde-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background: linear-gradient(to top, #0062FF, #5EC2F2);
font-family: 'Open Runde', Arial, sans-serif;
color: white;
text-align: center;
}

.weather-container {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: 15px;
margin-left: -100px;
}

.temperature {
font-size: 140px;
margin: 0;
font-weight: bold;
}

.description {
font-size: 48px;
margin: 5px 0;
}

.high-low, .wind {
font-size: 36px;
margin: 5px 0;
}

#weather-icon {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="weather-container">
<img id="weather-icon" src="" alt="Weather Icon">
<div class="weather-info">
<h1 id="location">Location</h1>
<h2 id="temperature" class="temperature">--</h2>
<h3 id="description" class="description">--</h3>
<p id="high-low" class="high-low">H:--° L:--°</p>
<p id="wind" class="wind">Wind: -- mph</p>
</div>
</div>

<script>
const apiKey = [YOUR API KEY HERE];
const lat = '39.08367857512911';
const lon = '-84.50857386952595';

async function fetchWeather() {
try {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=imperial`);
if (!response.ok) throw new Error();
return await response.json();
} catch (error) {
// Fail silently, no console logging or alerts
}
}

async function displayWeather() {
const weatherData = await fetchWeather();
if (!weatherData) return;

document.getElementById('location').textContent = weatherData.name;
document.getElementById('weather-icon').src = `http://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`;
document.getElementById('temperature').textContent = `${Math.round(weatherData.main.temp)}°`;
document.getElementById('description').textContent = weatherData.weather[0].description.charAt(0).toUpperCase() + weatherData.weather[0].description.slice(1);
document.getElementById('high-low').textContent = `H:${Math.round(weatherData.main.temp_max)}° L:${Math.round(weatherData.main.temp_min)}°`;
document.getElementById('wind').textContent = `Wind: ${Math.round(weatherData.wind.speed)} mph`;
}

displayWeather();
</script>
</body>
</html>

Dynamic Countdown Ad Example

This HTML creates a dynamic countdown timer that updates in real-time, providing an engaging way to build anticipation for an upcoming event. Below is an explanation of the key parts of the code:

Event Logo: Replace the placeholder logo URL with the URL of your event logo.
Target Date and Time: Update the targetDate variable to the exact date and time of your event.
Colors and Fonts: Adjust the background, text colors, and font styles in the <style> section to match the branding of the event.

Steps to Use

Swap Out the Logo: Replace the placeholder logo image URL (https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png) with the URL of your event’s logo. Alternatively, upload your logo to your hosting platform and use its link.
Change the Countdown Date: Update the targetDate variable in the script section to reflect the desired date and time for the event. Example: Replace "October 17, 2026 19:00:00" with your specific event date and time.
Customize Colors: Modify the text and background colors in the <style> section: Change background-color: #000000; to your desired background color. Adjust the color: rgb(255, 255, 255); property in #countdown to set your preferred text color.
Host the HTML: Save the file as an HTML document (e.g., countdown.html) and upload it to your preferred hosting platform.
Schedule the Ad: In RoveIQ, add this file as a dynamic ad by providing the URL to the hosted HTML file. For more information on scheduling the ad check out this article.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
font-family: Arial, sans-serif;
}


img {
max-width: 500px;
margin-bottom: 60px;
}


#countdown {
display: flex;
color: rgb(255, 255, 255);
text-align: center;
font-size: 8rem;
font-weight: bold;
}


#countdown div {
margin: 0 30px;
}


#countdown span {
display: block;
}


.label {
font-size: 3rem;
letter-spacing: 4px;
font-weight: normal;
}
</style>
</head>
<body>
<!-- Display the image above the countdown -->
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Logo Image">


<!-- Countdown Timer -->
<div id="countdown">
<div>
<span id="days">00</span>
<span class="label">DYS</span>
</div>
<div>
<span id="hours">00</span>
<span class="label">HRS</span>
</div>
<div>
<span id="minutes">00</span>
<span class="label">MIN</span>
</div>
<div>
<span id="seconds">00</span>
<span class="label">SEC</span>
</div>
</div>


<script>
// Set the target date and time
const targetDate = new Date("October 17, 2026 19:00:00").getTime();


function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate - now;


// Check if the countdown has ended
if (distance < 0) {
clearInterval(interval);
document.getElementById('countdown').innerHTML = "EXPIRED";
return;
}


// Calculate time components
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);


// Update the HTML
document.getElementById('days').innerText = days.toString().padStart(2, '0');
document.getElementById('hours').innerText = hours.toString().padStart(2, '0');
document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0');
document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0');
}


// Call the function immediately and then every second
updateCountdown(); // Run at the start
const interval = setInterval(updateCountdown, 1000); // Update every second
</script>
</body>
</html>

Benefits of Dynamic Ads

Dynamic Weather Ad Example

Steps to Use

Dynamic Countdown Ad Example

Steps to Use

Categories

Toggle navigation menu

<%= category.name %>

Benefits of Dynamic Ads

Dynamic Weather Ad Example

Steps to Use

Dynamic Countdown Ad Example

Steps to Use

Related articles

Categories

Toggle navigation menu

<%= category.name %>

Categories

Categories