Hotspots
Draw rectangle, circle, and polygon hotspots, attach actions and mutations, and gate them with variable conditions in the PanelWave editor.
Hotspots are the clickable areas that make your graphic novel interactive: a door the reader can open, a clue they can inspect, a choice that branches the story. You draw a hotspot on a panel, then attach actions (what happens on click), optional mutations (dynamic visual changes), and an optional visibility condition.
Drawing a hotspot
Hotspots come in three shapes, each with its own drawing tool:
| Shape | Tool | Shortcut | What you get |
|---|---|---|---|
| Rectangle | Rectangle | R | A rectangle centered on your click |
| Circle | Circle | C | A circle centered on your click |
| Polygon | Pen | P | A starter polygon whose vertices you reshape |
Open a panel
Hotspots are drawn in panel view — double-click a panel on the canvas to enter it.
Pick a shape tool
Select Rectangle, Circle, or Pen from the tool palette — or right-click the canvas and choose Add Hotspot → Rectangle / Circle / Polygon.
Click the canvas
The hotspot appears at the click point, drawn as a dashed, lightly tinted overlay with its label above it. It is selected and ready to edit.
The dashed outlines are drawn in panel view only. Page view shows the page layout without them.
The dashed overlay is an editing aid — readers never see it. In the published work the player renders the area as a clickable region with a gentle pulsing outline so readers can discover it (disabled for readers who prefer reduced motion), plus a highlight on hover and full keyboard access. See the reader's view.
Editing the shape
Select a hotspot (click it with the shape tool, or Tab / Shift+Tab to cycle through a panel's hotspots) and drag its control points:
- Rectangle — 8 handles: corners resize from that corner, edge handles move that side.
- Circle — a center handle moves the whole circle; a radius handle scales it.
- Polygon — every vertex is a draggable handle. In the Inspector's Shape (polygon) section you can also type exact coordinates for each point, remove a point (a polygon keeps at least 3), or click + Add Point.
The Inspector's Shape section always mirrors the canvas: for rectangles it shows X, Y, Width, Height; for circles Center X, Center Y, Radius — the values sync with your canvas edits.
Naming and accessibility
In Basic Properties:
- Label — the hotspot's name, edited per language (the field shows the active locale, e.g. Label (en-US); switch locales in the editor header). It is what screen readers announce for the hotspot, so for a choice it should say the choice. Labels are also translated in the Localization Workshop, listed as Hotspot label.
- ARIA Label — a screen-reader description, so interactive areas stay accessible.
- Shown as — how readers see the hotspot: Auto (a button with its label when the panel's hotspots offer a choice, otherwise an invisible area), Button with its label, or Invisible area — use that when the artwork paints the button itself. Written to the manifest as
display. - Visible and Locked — the usual editing toggles.
Actions — what happens on click
The Actions section lists the hotspot's actions. Click + Add Action to open the Action Builder, pick an Action Type, fill in its settings, and save. Each action shows a summary with Edit and Remove buttons.
A hotspot does one thing when clicked: Navigate, Open Extras, Open Modal or Trigger Plugin Event — if you add more than one of these, the first one is used. Set Variables combines with Navigate: the variables change when the reader jumps (that is how a choice records itself). On its own, Set Variables is the hotspot's action; next to Open Extras or Open Modal it does not run.
Navigate (Go To Panel/Page) jumps the reader elsewhere in the story. Choose a Target Type: for Panel, pick the panel from the list, grouped by chapter — any panel of the work, including one in another chapter (an ending, say); for Page, enter the Page Number. Then pick a Transition Effect: None, Fade, Slide, Zoom, or Crossfade (published as Fade). This is the building block for choices and branching — see Graph for how branches fit into your story flow.
The list stores the panel itself, not its friendly ID, so renaming a friendly ID never breaks a jump. An older action that names its target by friendly ID is shown with the matching panel selected; saving it once stores the panel.
Set Variables changes story state. Add one or more rows, each with a variable name, an operation, and a value:
- Set — assign the value
- Increment — add to a number
- Toggle — flip a true/false value
This is how a hotspot remembers things ("the reader took the key", "score + 10"). Manage the variables themselves in the Variables designer.
Open Extras shows a bonus-content item. Enter the Extras ID of the content you created in the Extras manager.
Open Modal pops up a dialog over the story. Set a Modal ID and the Modal Content text.
Trigger Plugin Event sends an event to a plugin. Pick the Plugin ID (Image Zoom, 360° Panorama, or Gallery), an Event Name, and optional Event Data as JSON.
Mutations — dynamic visual changes
Mutations change how the hotspot itself looks or behaves in response to the reader. Click + Add Mutation in the Mutations section, choose a Trigger Event, and add one or more property mutations:
- Triggers: On Hover, On Click, or When Variable Changes (the last one takes a condition expression, e.g.
hasKey === true). - Properties you can mutate: Visible, Opacity, Scale, Rotation, Position, Color — each with a target value, a Duration (ms), and an Easing curve (Linear, Ease, Ease In, Ease Out, Ease In Out).
A typical use: a subtle On Hover scale-up so readers can discover what's clickable.
Mutations are kept with the hotspot in the CMS but are not part of the published work yet — the PanelWave format has no hover or click effects for hotspots. Readers get the player's own pulsing outline and hover highlight instead. Variable changes belong in a Set Variables action.
Transition
The Transition section styles the moment the hotspot fires: an Effect (None, Fade, Slide, Zoom, Crossfade), a Duration (ms), and an Easing function. It applies to a Navigate action (the jump's transition) when the action itself sets none; Crossfade is published as Fade.
Conditions — showing hotspots only sometimes
The Visibility Condition section makes a hotspot appear only when your story state allows it. Visible If takes a JSON Logic rule against the story variables — for example {"==": [{"var": "hasKey"}, true]}; leave it empty to always show the hotspot. A rule that is not valid JSON is flagged under the field.
The friendlier way is Build Condition, which opens the JSON Logic Rule Builder below the field:
- Click + Create Rule and pick an operator — comparisons (equals, not equals, less than, greater than, less or equal, greater or equal) or the logical AND, OR and NOT.
- Fill in the operands: a Variable from your work's variables, a Literal value (text, a number,
true/false), or a Nested Rule for combinations. - The rule is written to Visible If as you build. Switch to JSON to see or paste it, and use the test area to try it with sample variable values.
Conditions evaluate against the variables of your work; read Variables in the editor and Variables concepts to understand scopes and how state persists for the reader.
Classic pattern: hotspot A runs a Set Variables action (hasKey → true). Hotspot B, elsewhere in the story, has the visibility condition {"==": [{"var": "hasKey"}, true]} — it only becomes clickable once the reader found the key.
Building a choice
A reader's choice is a set of hotspots on one panel, one per option, usually each on top of a caption that shows the option's text:
Add the captions
Right-click the panel → Add Speech Bubble → Narrator for each option and type its text. A balloon preset such as choice gives all choices one look; Fit height to text sizes each box for its longest translation.
Add a hotspot per option
Draw a rectangle hotspot over each caption (or set its X, Y, Width and Height to the caption's box). Set the Label to the option's text and Shown as to Invisible area, since the caption already shows it. (Without captions, leave Auto: readers then see each label as a button.)
Navigate + Set Variables
Give each hotspot a Navigate action to the panel the option leads to, and a Set Variables action that records the choice (choice1 → "A") and its effects (trust → increment 1).
Gate options that depend on the story
An option that only some readers get carries a Visible If rule — on the hotspot and on its caption.
In the player's page view, the panels of options not taken are shown as placeholders, and the outcome of a choice appears once the reader makes it — see Choices in page view. For where the branches meet again and conditional routing, use the Graph Editor.
Finding panels with hotspots
The structure tree's filter bar has a Show panels with hotspots toggle, handy for auditing interactivity across a long work. Always test your hotspots in Preview before publishing.
Measuring hotspot engagement
Once a published version is being read, the analytics dashboard's Click heatmap shows where readers actually click on each panel — hotspot hits ranked per hotspot, plus dead clicks (taps that hit nothing). A hot cluster outside your hotspots is a reader telling you where the next hotspot belongs.
A hotspot needs at least a shape, a label, and one action to appear in the published work — hotspots without an action are left out of the export (the format requires one), so a silent, do-nothing area can never ship by accident. The label is shown on the canvas above the hotspot in the language you are editing.