Customizing Appearance
Colors
Choose from 9 hotspot colors: Purple, Blue, Green, Red, Orange, Pink, Cyan, Yellow, and White. The color applies to the hotspot border, badge, animation glow, and tooltip label.
You can set different colors per hotspot to visually distinguish different types of information.
Animations
Five animation options control how the hotspot draws attention:
- •Pulse — gentle scale animation (default)
- •Glow — opacity fade with colored glow
- •Bounce — vertical bounce
- •Shake — horizontal shake
- •None — static, no animation
Badges
The badge is the small indicator shown inside the hotspot:
- •Number — auto-incremented (1, 2, 3...) based on hotspot order
- •Custom Text — any short text you choose (icons, abbreviations)
- •No Badge — clean highlight region only
Typography
Configure the tooltip text appearance:
- •Font family — 8 system-safe fonts (System Default, Arial, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Palatino)
- •Font size — 11px through 18px
- •Text formatting — use \\bold\\ and \italic\ in your descriptions
Tooltip Position
Tooltips are positioned automatically by default, appearing above or below the hotspot based on where the hotspot sits on the screen. For precise control, drag the tooltip directly on the canvas to reposition it. The properties panel shows a Position & Layout section for the tooltip with exact X, Y, width, and height values. Click Auto to reset to automatic positioning.
Device Frame
The device frame setting (in the top bar) controls the border radius of the walkthrough container:
- •iPhone — 44px radius (rounded corners)
- •Android — 24px radius
- •iPad — 18px radius
- •Browser — 8px radius
- •No Frame — square corners
Global Settings
Click Settings in the top bar to configure:
- •Show instruction bar — displays the screen title and instruction text below the walkthrough
- •Show progress bar — shows a segmented progress indicator
- •Progress bar colors — customize the completed and active segment colors