In this video
- The button types: Button, Button with Text, CTA Button and CTA Button with Text
- Styling the label: Button Text, Background Color, Text Color, Font Size, Font Family, Font Weight and Border Radius
- Outline, Drop Shadow and Glow on the FX tab, and Change Image for a picture button
- The rule: every button on an End Card already opens the store
- One exit per ad: an End Card or a CTA Button, never both
- A Next button: Tap, then Go to Scene, then the End Card
- Landscape label sizes, translated labels, and Ellipsis for a label that does not fit
- Testing with Play, and three mistakes to avoid
About this video
Buttons are where a playable ad turns a tap into a result. A plain Button or Button with Text moves the ad on — to the next scene, a reveal, a change of text — while the click-through to the app store belongs to the End Card: every button on it opens your store link, with nothing to wire. A CTA Button is the exit for an ad that has no End Card at all, and the editor keeps the two apart so an ad never has two exits. This tutorial builds a Next button from a blank project, adds the Reward Reveal end card, swaps its button art, translates the label and tests it all with Play. Every setting shown is on every plan.
Exports for Unity, AppLovin, Google, IronSource, Mintegral, Meta (Facebook), Moloco, TikTok, Liftoff, Vungle, Chartboost, InMobi and Pangle — one self-contained HTML5 file each.
Transcript
Captions in 18 languages on YouTube
This ad has two buttons. Tap Next, and it moves on to the End Card. Tap the button on the End Card, and the store opens.
They look alike, but they do different jobs. Let's build both, and see which button goes where.
I started this project from scratch: a level-complete screen that needs a way forward. Its buttons and events are editable on any plan.
Read the full transcriptShow less
Click Add New Object. Here are the button types.
Button is your own picture. Button with Text is a label on a coloured plate. CTA Button and CTA Button with Text look the same, but a tap on one always goes to the store.
I'll add a Button with Text. It lands in the middle, so I'll move it below the headline.
Type the label into Button Text. Then pick a Background Color, and a Text Color for the words.
The label has its own Font Size, Font Family and Font Weight. It's always one line, centred on the plate.
Border Radius rounds the corners. 28 on a 56 px button makes a pill.
Outline, Drop Shadow and Glow are on the FX tab. A soft glow helps it stand out.
Now the screen it leads to. Add New Object, Add End Card, and pick a design. I'll take Reward Reveal.
Its big button is a plain Button made from a picture. Change Image swaps in new art.
Here's the rule that matters most: every button on an End Card already opens the store. There's nothing to wire. It uses the store links you paste in Export.
An ad gets one exit: an End Card, or a CTA Button. This one has an End Card, so the CTA cards are greyed out.
So a CTA Button is for an ad with no End Card at all. It has no Events tab, and it goes to the store wherever it sits.
Back on Scene 1, the Next button needs a job. Select it, open the Events tab, and add a Tap.
Choose Go to Scene, and pick the End Card.
A plain button can run any action here, like showing, hiding or changing text. What it can't do is open a web page: the click-through is the End Card's job.
In the Video Playable Maker, a button inside a video break gets one more menu: resume the video, jump to a time, or open the CTA link.
In landscape, the button keeps its own position, and its label its own font size, just like text. So I place it, and size the label for this screen.
The End Card came already translated. So open Localization, and give the Next label its words in each language.
Preview German. The label is wider than the button, so it's cut at both ends. Text Overflow, Ellipsis, trims it to fit. Shorter words are even better.
Now press Play, and tap Next. There's the End Card.
Tap its button, and nothing happens: the editor has no store to open. In the exported ad, that same tap opens your store page.
Three mistakes to avoid. One: a CTA Button as a Next button. In Play it does nothing, but in the real ad it leaves for the store, and the rest of your ad is never seen.
Two: words painted into a button picture. Localization translates text, not pictures, so every language sees the same words. For a label that translates, use Button with Text.
Three: an End Card and a CTA Button in one project. The editor won't add both, but an older project can have them. The build check warns you: two click-throughs.
For a head start, remix the Reward Reveal end card. Its button is already the click-through. Next up: the End Card itself. See you in the next video!
Build your first one free, at playableadsmaker.com.