Complete guide for embedding the BentoTiles SDK into plain HTML5, Canvas 2D, and WebGL games.

Vanilla HTML5 & Canvas Setup Guide

Building your game with plain JavaScript, HTML5 <canvas>, or lightweight JS frameworks? Integrating the BentoTiles SDK takes less than 5 minutes.

⚡ 1. Include the SDK Script

Add the BentoTiles SDK script tag in your index.html file inside the <head> or before your main game bundle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Awesome HTML5 Game</title>
  <!-- BentoTiles Game SDK -->
  <script src="https://sdk.bentotiles.com/v1/bentotiles-sdk.js"></script>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <script src="game.js"></script>
</body>
</html>

🚀 2. Initialize the SDK

Inside your main game script (game.js), initialize the SDK before starting your main game loop:

let isPaused = false;

// Initialize BentoTiles SDK
BentoTiles.init({
  gameId: "my-awesome-html5-game",
  debug: true,
  onPause: () => {
    // Fired automatically when an ad break starts
    isPaused = true;
    muteAudio();
  },
  onResume: () => {
    // Fired automatically when an ad break finishes
    isPaused = false;
    unmuteAudio();
  }
}).then(() => {
  console.log("BentoTiles SDK Ready!");
  // Notify platform that loading assets has finished
  BentoTiles.gameLoadingFinished();
  
  // Start your main game loop
  requestAnimationFrame(gameLoop);
});

🎬 3. Trigger Ad Breaks

Call commercial mid-rolls at natural pause points (level transition, game over, replay):

function onPlayerDied() {
  // Pause local gameplay physics
  stopGameLoop();

  // Show commercial ad break
  BentoTiles.commercialBreak({
    beforeAd: () => {
      console.log("Muting game audio...");
    },
    afterAd: () => {
      console.log("Ad finished, restarting level!");
      restartLevel();
    }
  });
}

Rewarded Ads

Give players extra lives, coins, or power-ups for watching an ad:

function onWatchExtraLifeClicked() {
  BentoTiles.rewardedBreak({
    beforeAd: () => {
      pauseAudio();
    },
    afterAd: (rewardEarned) => {
      resumeAudio();
      if (rewardEarned) {
        player.lives += 1;
        updateUI();
        console.log("Player earned 1 extra life!");
      }
    }
  });
}

💾 4. Cloud Save & Player Data

Store high scores, unlocked skins, or progress state seamlessly:

// Save game state
async function saveProgress(playerData) {
  await BentoTiles.storage.set("player_save", JSON.stringify(playerData));
}

// Load game state
async function loadProgress() {
  const data = await BentoTiles.storage.get("player_save");
  if (data) {
    return JSON.parse(data);
  }
  return { level: 1, coins: 0 };
}

🏆 5. Leaderboards

Submit high scores to BentoTiles global leaderboards:

async function submitFinalScore(score) {
  try {
    await BentoTiles.leaderboards.submitScore({
      leaderboardId: "main-high-scores",
      score: score
    });
    console.log("Score submitted successfully!");
  } catch (err) {
    console.error("Failed to submit score:", err);
  }
}

Vanilla HTML5 & Canvas Integration