When an Arcade is finished recording, each click will be broken out into a step. The steps are listed on the left-hand tab and are made up of either pictures, videos, or overlays. (Here's how Arcade chooses when to use still images and when to use video.)
When you're editing an Arcade, you can duplicate, merge, add, or delete steps.
What are steps?
Steps are the building blocks of Arcades.
Each click you record is automatically broken out into a separate step. Steps can be made up of:
Pictures
Videos
Overlays
You can edit steps by duplicating, merging, adding, or deleting them.
How do I edit an Arcade?
When your recording is finished:
You'll be taken to the upload page automatically.
Once the upload is complete, go to the Edit tab to start editing.
In Edit mode, you can:
Change the Arcade title
Delete and duplicate steps
Move and add hotspots
Add hotspot text, images, videos, and overlays
Change the logo
And much more
Tip: Always add text to your hotspots to tell a story rather than just labeling clicks.
Can I duplicate steps?
Yes. To duplicate:
Use ⌘C and ⌘V (just like copy-paste elsewhere)
Use Shift + Click to select multiple steps at once
Can I import steps from one Arcade into another?
Yes. You can copy steps from one Arcade and paste them into another using the same ⌘C and ⌘V shortcuts.
Note: You can only copy steps between Arcades within the same account.
How do I replace a step in an Arcade?
You have two options:
Delete the old step and drag in a new one
Go to the Media Library, hover over a step, and select Replace current step or Add to new step
What dimensions should I use when uploading new media?
Arcade will automatically crop all steps to match the dimensions of the first step.
To check the dimensions, hover over the Upload button. [See the above Arcade.]
How do I change the text in the browser search bar?
If your Arcade uses a wrapper:
The text shown in the fake browser bar is your Arcade's title.
To update it, simply click on the Arcade title in Edit mode and change it.
Hotspots
What are hotspots?
Hotspots are clickable areas created automatically during recording at every place you click.
Viewers must click on a hotspot to move forward (unless autoplay is enabled).
How can I add a hotspot to an Arcade?
You can add a hotspot in two ways:
Double-click anywhere on the Edit page
Click the Hotspot button from the top editing toolbar
A new hotspot will appear wherever you click.
How can I edit a hotspot?
When you select a hotspot, the editing options appear on the right-hand side. You can:
Add or edit the text
Align text (Left, Center, Right)
Choose whether text should open automatically
Choose a style: Hotspot (pulsating dot) or Callout (text box)
Change the Background color and Text color
Apply styling to all hotspots with one click
Adjust the Pointer position (left, right, top, or bottom of the hotspot)
Set the Destination (by default, it goes to the next step, but you can send users to any step in the Arcade)
Toggle Voiceover generation for the text
How can I add text to a hotspot?
To add text:
Click on the hotspot.
Edit the text in the right-hand side panel.
You can also:
Use plain text or emojis
Create line breaks by pressing Shift + Enter
Can I control where hotspot text appears?
Yes, when editing a hotspot, you can set whether the text appears to the left, right, top, or bottom of the hotspot.
Can I control what happens when someone clicks a hotspot?
Yes.
In the Destination setting:
By default, the hotspot progresses to the next step.
You can change it to send users to any other step in your Arcade.
Can I add a hotspot that doesn't change the step?
Yes! This is great for requiring users to interact with multiple hotspots on the same page.
To do this:
Set the hotspot destination to "this step"
The viewer will stay on the same page until all hotspots are clicked
Can I make the Arcade progress automatically without clicking a hotspot?
Yes, Arcade supports autoplay in two ways:
Step-level autoplay:
Click the three dots (...) on a step
Select Enable autoplay
or
Use the shortcut ⌘A
Arcade-level autoplay:
Click Design in the toolbar
Scroll down to the Other dropdown
Find Autoplay and turn the toggle on
Notes:
Arcade-level autoplay will not work if your Arcade starts with a video (due to browser restrictions).
Engagement and completion rates will not be collected when autoplay is turned on.
Callouts
What are callouts?
Callouts are text boxes placed over your Arcade, similar to Arcades, but designed for text over drawing attention to a location (like a hotspot)
Hotspots look like pulsating, clickable dots.
Callouts look like floating text boxes.
When should I use callouts instead of hotspots?
Callouts are best for:
Sharing extra information not tied to a click
Providing guidance, instructions, or tips
Highlighting key points without needing user interaction
If you want users to click, use a hotspot instead.
How can I add a callout to an Arcade?
You can add a callout two ways:
Double-click anywhere on the Edit page and then change the style to Callout
Click the Callout button from the top editing toolbar
How can I edit a callout?
When you select a callout, you can:
Add or edit the text
Align text (Left, Center, Right)
Change the Background color and Text color
Apply changes to all callouts with one click
Add an arrow pointing to a specific location
Choose whether or not to show a pulsating arrow button
Set the Destination (next step by default or another step)
Toggle Voiceover generation for the text
See the Hotpsot Arcade above for an overview.
Can I add an arrow to a callout?
Yes.
In the callout editing panel, use the Arrow location dropdown to add an arrow pointing to a specific part of the screen.
Can I toggle between a hotspot and a callout after creating one?
Yes.
You can switch easily between Hotspot and Callout at any time within the editing panel.
Spotlight Area
The Spotlight Area feature lets you visually emphasize a specific area of the screen while dimming everything else. It combines the flexibility of hotspots and callouts with a stronger visual focus.
What is Spotlight Area?
Spotlight Area is an area-based highlight that draws attention to a defined section of the screen rather than a single click target.
It’s designed for:
Guiding users through complex UI
Emphasizing grouped elements
Reducing visual noise during explanations
Where can Spotlight Area be used?
Spotlight Area can be applied to:
Hotspots
Callouts
It’s available anywhere the Area option appears.
How do I add a Spotlight Area?
Select an existing hotspot or callout
Choose Area
Click and drag to define the Spotlight Area
Once created, the Spotlight Area can be fully customized.
What shapes are supported?
You can choose from:
Square
Rounded corners
Circle
This allows the Spotlight Area to match the shape of the UI element being highlighted.
How do border settings work?
Border settings control the highlighted area itself, including:
Border color
Border opacity
Use the border to clearly define the Spotlight Area.
How does the overlay work?
The overlay controls everything outside the Spotlight Area:
Overlay color
Overlay opacity
This helps de-emphasize the background while keeping focus on the highlighted area.
Can I apply Spotlight Area to multiple buttons?
Yes. You can choose to apply the Spotlight Area to all matching buttons at once.
This is useful when highlighting repeated UI patterns across a flow.
Can I move or reposition the Spotlight Area?
Yes. Spotlight Area behaves like standard hotspots and callouts:
You can move it at any time
You can adjust where the text connects to the Spotlight Area
This helps avoid covering important UI elements.
What’s the difference between Border and Overlay?
Border → controls the appearance of the Spotlight Area
Overlay → controls the appearance of everything outside the Spotlight Area
Understanding this distinction makes it easier to fine-tune visual emphasis.
Does Spotlight Area follow the same rules as hotspots and callouts?
Yes. Spotlight Area follows the same rules as hotspots and callouts when it comes to:
Location and positioning
Orientation
Text placement and attachment
The difference is purely visual.
Instead of highlighting a single point, Spotlight Area changes how highlighting and opacity behave by emphasizing a defined area and dimming everything outside of it.
All interaction and layout behavior remains the same.
Text Formatting and Markdown
How can I add bold, italics, or links to hotspot or callout text?
Arcade supports Markdown inside hotspots and callouts.
You can always reference this by clicking the ? icon in Arcade and selecting Text Formatting.
Can I use CSS inside a hotspot or callout text?
Yes.
Arcade supports limited CSS inside text fields for styling.
Can I add hotspots and callouts to videos?
Absolutely.
You can add hotspots and callouts to videos the same way you do with images.
They will stay visible over the video, and clicking a hotspot will advance the Arcade to the next step.
