# Design
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](https://docs.arcade.software/kb/build/interactive-demo/edit/branding-and-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. {% @arcade/embed flowId="X27ZI2ZC8EBCOVXjimaI" url="" %} *** ## Background ### What is the Background setting? Backgrounds add a decorative area around your Arcade on desktop views. They are hidden on [mobile views](#mobile-view) (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. {% @arcade/embed flowId="Gl8fRYkqqLsv6taAg67Q" url="" %} ### Can I share backgrounds across my team? Yes — if you save them inside your [Theme](https://docs.arcade.software/kb/build/interactive-demo/edit/branding-and-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 {% @arcade/embed flowId="8vPSFEqnKCS2oT5FlmEf" url="" %} ### 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). {% @arcade/embed flowId="AYuWYGGVgbgyCamm8kEm" url="" %} #### 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. {% @arcade/embed flowId="ce1LcNdAiqU6QDqRdmIT" url="" %} ### 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) {% @arcade/embed flowId="ZvhUdzNQB8fs2ePeS8t1" url="" %} ### 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. {% @arcade/embed flowId="s6MhaOtyZpVZA8l9LESX" url="" %} *** ## Background Music *See the* [*Audio*](https://docs.arcade.software/kb/build/interactive-demo/edit/audio) *section for more details on audio* {% @arcade/embed flowId="tP4B9AYWaCQQCwekJ6dd" url="" %} ### 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 ### What is Navigation? Navigation adds a progress bar and lets users jump between steps. Options: * Off: No navigation. * Auto: Appears on hover. * On: Always visible. {% @arcade/embed flowId="ih0XgMyD6qJtNQI3wRO1" url="" %} ### Can I hide specific steps from navigation? 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. ### Skip Step vs. Hide from Navigation 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 skip a step? 1. Open your Arcade in Edit mode. 2. In the step panel, hover over the step you want to hide. 3. Open the step's context menu (right-click or click the ⋯ menu). 4. 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. ### 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. {% @arcade/embed flowId="WjDQumKLuLSSmJto5T3Y" url="" %} ### 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) {% @arcade/embed flowId="Ocu5w8xCbBpv3xiOHRpO" url="" %} ### 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. {% @arcade/embed flowId="B260bFgpXhfm2WhgrJHx" url="" %} ### 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. {% @arcade/embed flowId="hbaucW0t5wlVxL936MpJ" url="" %} ### 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: * [Cory Moen](https://www.coreymoen.com/) * [Cory Runnells](mailto:hello@coryrunnells.com) * [Grace Walker](https://www.gracewalker.ca/) * [Jan Losert](https://www.janlosert.com/) We also love seeing great examples — feel free to email us once your Arcade is live!