how to make a playable ad.

Last updated October 16, 2026 · By the Bolt Playables team, 7,000+ playables built

1. Pick the hook

A playable has seconds to work, so it shows one thing. Choose the single moment that sells the game: the core mechanic at its most satisfying, a near-win, or a choice. If you already run video ads, start with the hook from your best-performing video. It's proven, and the playable continues the story.

2. Storyboard it

Write it down before anyone builds anything. A storyboard for a playable answers five questions:

• First frame: what the player sees before touching anything, and where the hand pointer points.
• First interaction: the one gesture (tap, hold, swipe, drag) and what happens when they do it.
• Payoff: the moment it feels good: a big clear, a combo, a level-up.
• Ending: what ends the playable: a win, a fail, a timer, or a number of moves.
• End card: the app icon, a line of copy and the install button. Networks ban sending people to the store automatically, so the end card waits for a tap.

3. Gather the assets

Get the sprites or 3D models, UI, fonts and sounds from the game team, then cut them down to what the playable actually shows. Pack 2D art into sprite atlases, use low-poly models with small textures for 3D, subset fonts to the characters you use, and keep sound to a short loop and a few effects.

4. Choose the tech

A playable runs in the ad SDK's web view, so it's built with web technology. Whatever engine you use counts against the size limit, so check what it adds to your file before you commit.

5. Build it

• Portrait and landscape. Most networks require both, and the layout must survive rotation. Meta and Snapchat are portrait only.
• Start when it's visible. On MRAID networks, wait for ready and for the ad to be viewable before starting, and pause when it's hidden. See MRAID explained.
• Sound after a tap. Start muted, play sound only after the first touch, and stop it when the ad is hidden or the phone is muted or locked.
• An install button the whole time, and an end card at the end.
• No close button of your own. The network adds one, so keep its corners clear.
• Nothing loaded from the internet. No CDN libraries, web fonts or analytics. Everything ships in the file.

6. Get it under the size limit

The limit is 5 MB on almost every network (Chartboost's self-serve spec is 3 MB). Networks that take a single HTML file need every asset inlined as base64 text, which makes each asset about a third bigger. Budget for that from the start:

• Compress images hard and size them for a phone screen, not a desktop.
• Encode audio as short, low-bitrate MP3s.
• Minify the JavaScript and drop unused engine modules.
• Reuse textures and atlases instead of adding new art.

7. Add each network's install call

The install button has to call the network's own function, never window.location or a plain link. It's how the network opens the store and counts the click. Each network build ships only its own call:

// One install function per network build. Only one of these ships in each file.
function install() {
  // AppLovin, Unity, Chartboost (MRAID)
  mraid.open(STORE_URL);

  // Meta and Moloco
  // FbPlayableAd.onCTAClick();

  // Google Ads
  // ExitApi.exit();

  // TikTok
  // window.openAppStore();

  // Mintegral
  // window.install();
}

A file built for an MRAID network won't pass on Meta, Google, TikTok or Snapchat as-is, and several networks reject any file that references mraid.js. That's why every network gets its own build.

8. Package a build per network

Networks package playables three ways: one self-contained HTML file (AppLovin, Unity, Moloco, Chartboost), a ZIP with a config file (TikTok and Snapchat want config.json; Mintegral wants matching file and folder names), or a ZIP of separate files (Google, Meta, Liftoff). The exact rules are on each network's page in our playable ad specs.

9. Test it

1. In a desktop browser with device emulation, using a small stand-in for the network's API (there's one on the MRAID page).
2. In each network's own tool: AppLovin Playable Preview, Meta's Playable Preview Tool, Google's HTML5 Validator, the Ad Testing app for Unity Ads, Mintegral's test tool.
3. On real iPhones and Android phones, including an older, slower one. Rotate it, flip the mute switch, lock the screen, and check the install button opens the right store page.
4. With the console open, because some networks reject a playable that logs errors.

10. Launch and iterate

Upload, then let the results decide. The first playable is a starting point: make variants of the hook, the difficulty, the length and the end card, keep the winners and reskin them with new themes to fight creative fatigue.

Build it yourself or hire a studio?

Build in-house if you have web game developers with time, you'll make playables steadily, and you want to iterate daily. Hire a playable ad studio if your team builds in Unity rather than HTML5, you need 3D inside 5 MB, you run many networks, or you need it by a date. Most of the surprises are in packaging and network review rather than the game itself, and that's the part a studio has already solved. See examples of our work.

Common questions