Design

The Design panel gives you full control over how your Arcade appears and behaves. From backgrounds to autoplay settings, this is where you make your Arcade truly your own.

Table of Contents

Theme
Wrapper
Background
Cursor
Branding
Font and Colors
Metadata
Thumbnail
Background Music
Navigation and Chapters
Auto Pan and Zoom
Autoplay
Invisible Hotspots
Mobile View
Miscellaneous
Arcade Experts

Theme

See the Branding & Theme section for full details on choosing and editing your Arcade's theme.

Wrapper

What is a Wrapper?

The Wrapper is the frame around your Arcade that gives it the look of being inside a browser window. You can choose:

Light Wrapper
Dark Wrapper
No Wrapper (for a minimalist look)

Can I adjust the Wrapper?

Yes! You can change it to light, dark, or remove it entirely to better match your brand or embedding environment.

Background

What is the Background setting?

Backgrounds add a decorative area around your Arcade on desktop views. They are hidden on mobile views (screens under 600px wide).

What Background options are available?

You can:

Choose from preset backgrounds.
Upload your own (PNG, GIF, etc.).
Leave the background blank for a simpler look.

Yes — if you save them inside your Theme settings, your team can reuse the same backgrounds easily.

Cursor

What is the Cursor setting?

You can control what viewers' cursors look like when interacting with your Arcade:

Standard cursor
Enlarged cursor
Mobile-style tap cursor

Does the Cursor setting affect my recording?

No — it only affects the live playback experience, not the captured cursor during recording.

Font and Colors

Can I use my brand styles (colors and fonts)?

Yes.

Adjust fonts to any Google Font.
Set hotspot and callout colors with HEX codes.
Use Themes to apply consistent styles across multiple Arcades (Growth plan).

Can I adjust the font inside an Arcade?

Yes — choose any Google Font in the Design panel. Enterprise users can request to upload custom fonts.

Player Controls

What are Player Controls?

Player Controls allow you to choose which buttons are visible to your end users when viewing an Arcade.

Which buttons can I show or hide?

If you're looking for how to remove the copy link or fullscreen button, player controls will help.

You can toggle visibility for the following buttons:

Volume
Captions
Translation
Copy Link
Full Screen
Back
Next
Replay

Can I remove buttons from the player view?

Yes. You now have full control over which of these buttons appear for your end users.

Can I change the position of the buttons?

No. Button placement is fixed and cannot be customized. You can only control whether each button is shown or hidden.

Can I remove player buttons from all my Arcades?

Yes, player controls exist on the theme level as well to make global changes to your user's view.

Metadata

What is the Metadata section?

Metadata lets you organize and describe your Arcade for both internal and external use.

You can set:

Internal title (if this differs from the external title)
External title (seen by users)
Description (appears on share pages, not embeds)

Can I have a different internal and external name for Arcades?

Sure! On the Arcade, go to Settings. You'll see a field for both "Title" and "External Title".

Thumbnail

What is the Thumbnail?

The thumbnail is the preview image used when sharing your Arcade publicly, also called the OG Image (Open Graph Image).

You can:

Select from 4 different options
Change the accent color we set as default
If you are on the Growth plan or above, the Arcade's logos will be replaced by the ones you have set on your share page.

Background Music

See the Audio section for more details on audio.

Why should I add Background Music?

Adding music can make your Arcade feel more polished and engaging. Similar to watching a video with music, music can keep the viewer clicking around for longer.

What music options are available?

Arcade includes five royalty-free tracks.
Upload your own MP3 if you prefer.

How loud should Background Music be?

We recommend keeping music volume below 45%, ideally around 20%, to avoid overwhelming users.

What is audio ducking?

Audio ducking automatically lowers the music volume when synthetic voice or other step audio plays, so voices stay clear. Arcade automatically applies audio ducking to all Arcades with sound.

Navigation adds a progress bar and lets users jump between steps.

Options:

Off: No navigation.
Auto: Appears on hover.
On: Always visible.

Yes. You can exclude any step from appearing in the navigation to make it so that only Chapter steps or other useful steps appear. This is useful for after-steps, transitions, or mini instructional segments that don’t need to be highlighted.

Skip Step

What is Skip Step?

Skip Step removes a step from the viewer's playthrough experience. When a step is skipped, viewers will not encounter it as they move through the Arcade — it's effectively invisible to them, while still existing in your editor.

You can find the Skip Step option in the step context menu, indicated by the eye with a line through it icon.

How to skip a step?

Open your Arcade in Edit mode.
In the step panel, hover over the step you want to hide.
Open the step's context menu (right-click or click the ⋯ menu).
Select Skip Step (the eye-with-a-line icon).

The step will remain in your editor but will be invisible to viewers playing through the Arcade.

These two settings are easy to confuse, but they do different things:

Skip Step — removes the step from the viewer's flow entirely. Viewers won't see it when they play through the Arcade.
Hide from Navigation — removes the step from the progress bar only. Viewers can't jump to it from the nav bar, but they will still encounter it when moving through the Arcade step by step.

In short: Hide from Navigation affects the nav bar; Skip Step affects the full playthrough experience.

How to un-skip a step?

Skipping is fully reversible. Open the same context menu and toggle Skip Step off — the step will be included in the viewer's flow again immediately.

When to delete vs. skip a step

Skip Step only hides a step from viewers while keeping it in your editor. If you want to permanently remove a step, you'll need to delete it. If you delete a step and later want it back, you can re-add it from your Media Library — hover over the original screenshot or recording and choose Add to new step or Replace current step.

Auto Pan and Zoom

What is Auto Pan and Zoom?

Auto Pan and Zoom creates natural pan and zoom movements between steps to highlight user clicks.

When is Auto Pan and Zoom available?

Only available for Arcades captured using the Chrome extension.
Not available on video or desktop uploads (yet — update coming!).

Why is Auto Pan and Zoom disabled?

Auto Pan and Zoom is not enabled on video steps, but you can manually add pan and zoom animations from the top toolbar.

Autoplay

What is Autoplay?

Autoplay makes your Arcade progress automatically without requiring user clicks.

What is the difference between Arcade Autoplay and Step Autoplay?

Arcade-level Autoplay: Entire Arcade auto-plays until interrupted by a click from the viewer.
Step-level Autoplay: Only certain steps auto-advance.

How can I set the delay?

Choose:

Automatic delay (based on text/speech amount)
Manual delay (fixed number of seconds)

Do video steps autoplay?

Yes — video steps automatically move to the next step whether or not a hotspot is present. You can turn video autoplay off (and on) like normal step's autoplay.

Why does my autoplayed keep pausing?

When you start to edit Arcades often and build multiple demos, your cache can be altered. When testing any Arcade, especially those with autoplay, it's recommended to

Test the link in an incognito/private browser
Clear your cache and try again

These options will give you the closest view into a new user's view of your shared Arcade.

Invisible Hotspots

What are Invisible Hotspots?

Invisible Hotspots hide your click areas, making your Arcade feel like a live software demo while still requiring user interaction.

When should I use Invisible Hotspots?

Giving demos at conferences
Sales meetings
Solutions engineering presentations

How do I toggle Invisible Hotspots?

Press Command + Shift + D while previewing to toggle them on/off.

The toggle can also be found while editing under Design and Other (see the Arcade above).

Mobile View

What is Mobile View?

Mobile View optimizes your Arcade for screens smaller than 600px wide.

Hotspots and callouts move below the Arcade.
Navigation buttons appear under the Arcade.

Why is my text showing up below my Arcade?

If your callouts and hotspots are appearing under the Arcade, it’s because Mobile View is active.

You can toggle Mobile View off in the Design panel if you prefer the standard experience.

Should I test my Arcade on mobile?

Yes! Always preview on mobile to ensure readability, image clarity, and interaction usability.

Should I use special code for embedding on mobile?

No special code is needed — but if embedding inline feels too small, consider using a pop-out link instead.

Miscellaneous

Can I make my Arcade full screen?

Yes — click the expand button (top right) when viewing an Arcade to open it fullscreen. Fullscreen on iframes may be blocked by some websites, like Notion.

Arcade Experts

Need help polishing your Arcade for your site or campaign? Here are Arcade-expert designers we trust:

We also love seeing great examples — feel free to email us once your Arcade is live!

PreviousEdit NextBranding

Last updated 2 months ago

Was this helpful?