Home / Integration Guide / HTML/JavaScript

HTML/JavaScript Integration

Integrate BZZE Ads into any HTML5 game or web app using vanilla JavaScript. No framework required!

✅ Perfect For: HTML5 games, vanilla JS apps, static websites, any web-based project

Quick Setup (3 Steps)

Step 1: Add SDK Script Tag

Add this before your closing </body> tag:

HTML
<script src="https://ads.bzze.com/sdk/rewarded.min.js"></script>

Step 2: Initialize SDK

JavaScript
RewardedAd.init({
    appId: "YOUR_APP_ID",
    apiKey: "YOUR_API_KEY",
    userId: "user_" + Math.random().toString(36).substr(2, 9),
    
    onReward: function(reward) {
        // Grant reward to user
        console.log('Reward earned!', reward);
        addCoinsToUser(100);
    },
    
    onNoFill: function() {
        console.log('No ads available');
    },
    
    onError: function(error) {
        console.error('Ad error:', error);
    }
});

Step 3: Show Ads

JavaScript
// Call this when user clicks "Watch Ad" button
function showRewardedAd() {
    RewardedAd.showAd({
        rewardPreview: "100 coins"
    });
}

Complete Example

Here's a full working example you can copy and use:

index.html - Complete
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My HTML5 Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 2rem;
        }
        #gameArea {
            max-width: 800px;
            margin: 0 auto;
            background: #f0f0f0;
            padding: 2rem;
            border-radius: 12px;
        }
        .stat {
            font-size: 2rem;
            margin: 1rem 0;
        }
        button {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            border-radius: 8px;
            cursor: pointer;
            margin: 0.5rem;
        }
        button:hover {
            transform: translateY(-2px);
        }
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <h1>🎮 My Awesome Game</h1>
        
        <div class="stat">
            💰 Coins: <span id="coins">0</span>
        </div>
        
        <div class="stat">
            ❤️ Lives: <span id="lives">3</span>
        </div>
        
        <button onclick="watchAdForCoins()">
            Watch Ad for 100 Coins
        </button>
        
        <button onclick="watchAdForLife()" id="lifeBtn">
            Watch Ad for Extra Life
        </button>
        
        <div id="status" style="margin-top: 1rem; color: #666;"></div>
    </div>

    <!-- Load BZZE Ads SDK -->
    <script src="https://ads.bzze.com/sdk/rewarded.min.js"></script>
    
    <script>
        // Game state
        let coins = 0;
        let lives = 3;
        
        // Initialize BZZE Ads
        RewardedAd.init({
            appId: "APP_1760726660483_6ohdjjgqm",
            apiKey: "bzze_fgpwe6uofk9",
            userId: "user_" + Math.random().toString(36).substr(2, 9),
            
            // Auto-preload ads for instant playback
            autoPreload: true,
            preloadCount: 2,
            
            onReward: function(reward) {
                console.log('✅ Reward earned!', reward);
                // Reward will be granted by specific function
            },
            
            onAdLoaded: function(count) {
                console.log('📦 Ads preloaded:', count);
                updateStatus('Ads ready!');
            },
            
            onNoFill: function() {
                console.log('😔 No ads available');
                updateStatus('No ads available right now. Try again later!');
            },
            
            onError: function(error) {
                console.error('❌ Error:', error);
                if (error.code === 'RATE_LIMIT_EXCEEDED') {
                    updateStatus('Please wait ' + error.remainingSeconds + ' seconds');
                } else {
                    updateStatus('Error loading ad: ' + error.message);
                }
            }
        });
        
        // Watch ad for coins
        function watchAdForCoins() {
            updateStatus('Loading ad...');
            
            // Store original onReward
            const originalOnReward = RewardedAd.config.callbacks.onReward;
            
            // Temporarily override for this specific reward
            RewardedAd.config.callbacks.onReward = function(reward) {
                coins += 100;
                document.getElementById('coins').textContent = coins;
                updateStatus('You earned 100 coins!');
                
                // Restore original callback
                RewardedAd.config.callbacks.onReward = originalOnReward;
            };
            
            RewardedAd.showAd({
                rewardPreview: "100 coins",
                placement: "main_menu_coins"
            });
        }
        
        // Watch ad for extra life
        function watchAdForLife() {
            updateStatus('Loading ad...');
            
            const originalOnReward = RewardedAd.config.callbacks.onReward;
            
            RewardedAd.config.callbacks.onReward = function(reward) {
                lives += 1;
                document.getElementById('lives').textContent = lives;
                updateStatus('You earned an extra life!');
                
                RewardedAd.config.callbacks.onReward = originalOnReward;
            };
            
            RewardedAd.showAd({
                rewardPreview: "1 extra life",
                placement: "main_menu_lives"
            });
        }
        
        // Update status message
        function updateStatus(message) {
            document.getElementById('status').textContent = message;
            setTimeout(() => {
                document.getElementById('status').textContent = '';
            }, 3000);
        }
        
        // Check ad availability every 2 seconds
        setInterval(() => {
            const available = RewardedAd.isAdAvailable();
            const buttons = document.querySelectorAll('button');
            buttons.forEach(btn => {
                if (btn.id !== 'lifeBtn') {
                    btn.disabled = !available;
                }
            });
        }, 2000);
    </script>
</body>
</html>

Best Practices

1. Preload Ads for Better UX

JavaScript
RewardedAd.init({
    // ... other config ...
    autoPreload: true,    // Auto-preload ads
    preloadCount: 2,      // Keep 2 ads ready
    
    onAdLoaded: function(count) {
        console.log(count + ' ads ready!');
        enableAdButtons(); // Enable your ad buttons
    }
});

2. Check Ad Availability

JavaScript
// Check before showing
if (RewardedAd.isAdAvailable()) {
    RewardedAd.showAd({ rewardPreview: "100 coins" });
} else {
    alert('No ads available right now');
}

3. Handle Multiple Reward Types

JavaScript
// Track what reward type user is watching for
let currentRewardType = null;

function watchAdForCoins() {
    currentRewardType = 'coins';
    RewardedAd.showAd({
        rewardPreview: "100 coins",
        placement: "shop_coins"
    });
}

function watchAdForLife() {
    currentRewardType = 'life';
    RewardedAd.showAd({
        rewardPreview: "1 extra life",
        placement: "game_over_life"
    });
}

// In your init
onReward: function(reward) {
    if (currentRewardType === 'coins') {
        addCoins(100);
    } else if (currentRewardType === 'life') {
        addLife();
    }
    currentRewardType = null; // Reset
}

4. Dynamic Button States

JavaScript
function updateAdButton() {
    const button = document.getElementById('watchAdBtn');
    
    if (RewardedAd.isAdAvailable()) {
        button.disabled = false;
        button.textContent = '▶️ Watch Ad for 100 Coins';
        button.style.opacity = '1';
    } else {
        button.disabled = true;
        button.textContent = '⏳ Loading ad...';
        button.style.opacity = '0.5';
    }
}

// Update every 2 seconds
setInterval(updateAdButton, 2000);

Common Patterns

Pattern 1: Shop Purchase Boost

JavaScript
function buyItem(itemId, price) {
    if (coins >= price) {
        // Regular purchase
        coins -= price;
        unlockItem(itemId);
    } else {
        // Not enough coins - offer ad
        if (confirm('Not enough coins! Watch an ad to get 100 coins?')) {
            watchAdForCoins();
        }
    }
}

Pattern 2: Double Reward

JavaScript
function claimDailyReward() {
    const baseReward = 500;
    
    if (confirm('Daily reward: 500 coins\\n\\nWatch an ad to DOUBLE it to 1000?')) {
        // User wants to watch ad
        RewardedAd.init({
            // ... config ...
            onReward: function() {
                addCoins(1000); // Doubled!
                alert('You got 1000 coins!');
            }
        });
        RewardedAd.showAd({ rewardPreview: "1000 coins" });
    } else {
        // Just give base reward
        addCoins(baseReward);
    }
}

Troubleshooting

SDK not defined

Problem: RewardedAd is not defined

Solution: Make sure SDK script loads before your code. Put your code after the SDK script tag or wrap in window.addEventListener('load', ...)

Ads not showing

Problem: Button click does nothing

Solution:

  • Check browser console for errors
  • Verify App ID and API Key are correct
  • Make sure init() was called before showAd()
  • Enable debug mode: RewardedAd.enableDebug()

Rewards not granted

Problem: User watched ad but didn't get reward

Solution: Make sure your reward logic is in the onReward callback, not after showAd()

Next Steps