Powerspots

Hotspots supercharged. Create multi-step interactive experiences with popovers, overlays, audio and actions.

Introduction

Powerspots let you create interactive image-based slides where users explore content by clicking on elements placed over a background image. You can add two types of elements — hotspots (clickable markers with icons) and areas (rectangular regions with text) — and enrich them with overlays, popovers, audio, and even actions that change other elements on the slide.

Editor Overview

The Powerspots editor has three main sections:

  • Toolbar (top): Add new elements, select which element to edit, switch between landscape and portrait preview, and toggle the sidebar.
  • Canvas (center): A visual preview of your slide where you can see and drag your elements into position over the background image.
  • Sidebar (right): Two tabs — Appearance for background and interaction images, and Settings for grid configuration, element ordering, and the "Allow multiple active elements" option.

When you click on an element in the canvas (or select it from the toolbar dropdown), an Element Editor dialog opens with four tabs: General, Appearance, Additional Content, and Actions.

Core Concepts

Hotspots vs. Areas

There are two types of elements you can place on a Powerspots slide:

  • Hotspot: A circular, icon-based marker. Hotspots can play audio files and display custom icons for different states (inactive, active, hover, done). They're great for point-of-interest markers on an image.
  • Area: A rectangular region that can contain rich text and a background image. Areas are useful for larger interactive zones or text-based callouts.

Both types can have additional content (overlay or popover), be marked as mandatory, and trigger actions on other elements.

Background Image vs. Interaction Image

Each Powerspots slide supports two image layers:

  • Background image: A purely decorative image that fills the entire slide background. It may be cropped or stretched depending on the screen size. You can apply filters like blur, grayscale, sepia, brightness, and contrast.
  • Interaction image: Displayed on top of the background. This image always scales proportionally — it is never cropped or distorted. If your elements need to stay positioned exactly above specific spots on the underlying image, always use the interaction image. Only this image guarantees that your hotspots and areas remain aligned with the image content across different screen sizes. The interaction image also supports the same filters as the background image.

Both images can have separate versions for landscape and portrait orientation. If no portrait image is provided, the landscape version is used.

Completion Tracking

Powerspots slides use a completion model, not a scoring model. There are no right or wrong answers. Instead, you can mark individual elements as mandatory. The slide counts as complete once the user has interacted with all mandatory elements. An element counts as "done" when the user has clicked it (for popovers), closed its overlay, or finished listening to its audio.

Creating and Managing Elements

Adding Elements

Click the Add element button in the toolbar. A dropdown menu appears with two options:

  • Add hotspot — creates a new hotspot with a default label like "hotspot 1"
  • Add area — creates a new area with a default label like "area 1"

The new element appears on the canvas and can be immediately positioned by dragging.

Selecting and Editing Elements

You can select an element either by clicking on it directly in the canvas or by choosing it from the element dropdown in the toolbar. This opens the Element Editor dialog.

Duplicating and Deleting Elements

  • To duplicate an element, open the Element Editor and click the duplicate button in the dialog header. If the element has a popover set to open automatically, you'll be asked how to handle the duplicate.
  • To delete an element, open the Element Editor's General tab and click Delete element at the bottom.

Reordering Elements

In the sidebar under the Settings tab, you'll find Arrange elements. Drag and drop elements in the list to change their order. This order determines:

  • The sequence of elements when using grid layout.
  • The keyboard tab order — the order in which users can navigate between elements using the Tab key.
  • The screen reader announcement order — the order in which a screen reader will announce elements to visually impaired users.

Keeping this order logical and intuitive is important for accessibility.

Configuration Options

Slide-Level Settings

These settings apply to the entire slide and are found in the sidebar.

Settings tab:

  • Allow multiple active elements — When enabled, users can have several elements open at the same time. When disabled, clicking a new element automatically closes the previous one. Note: even with this enabled, starting a new audio will still stop the currently playing one.
  • Grid — Define a grid (columns and rows, 1–10 each) that elements can optionally snap to. This is useful for evenly distributing elements across the slide.

Appearance tab:

  • Background image — Choose an image for landscape and/or portrait orientation. Apply optional filters: Blur, Grayscale, Sepia (0–100), Brightness, Contrast (0–200). This image is purely decorative and may be cropped depending on screen size.
  • Interaction image — Same filter options as the background image. This image scales proportionally and is never cropped, making it the right choice when elements need to stay aligned with specific spots on the image.

Element Settings: General Tab

  • Label (required) — The name of the element. Also used by screen readers for accessibility.
  • Show label — Toggle whether the label is visible on the canvas.
  • Mandatory for slide completion — Only available if the element has additional content (overlay or popover) or, for hotspots, an audio file. When enabled, the user must interact with this element to complete the slide.
  • Audio file (hotspots only) — Attach an audio file. When present, the hotspot displays play/pause icons and plays audio on click.
  • Custom icons (hotspots only, not available when audio is attached) — Upload custom images for four states:
    • Inactive — default state
    • Active — when the element is currently open/active
    • Hover — when the user hovers over the element
    • Done — after the user has interacted with the element
  • Area text (areas only) — A rich text editor where you can format text with bold, italic, underline, lists, links, formulas, and more.
  • CSS class — For advanced users: add a custom CSS class to the element for custom styling.

Element Settings: Appearance Tab

  • Same as landscape (only visible in portrait mode) — When enabled, the element uses the same position and size as in landscape. Disable this to set separate portrait values.
  • Layout — Choose between:
    • Position manually — Place the element freely using top/left coordinates.
    • Align along grid — Snap the element to the defined grid. The element's position within the grid is determined by its order (set via the Arrange elements panel).
  • Position (manual layout only):
    • Top and Left — Set the position in percent (0–100%) or in custom CSS units for advanced use cases.
    • Dragging the element on the canvas also updates these values.
  • Size:
    • Width and Height — Set in percent or custom CSS units.
    • Set aspect ratio — Lock the proportions. Available presets include 1:1, 4:3, 16:9, 3:2 (landscape) and 1:1, 3:4, 9:16, 2:3 (portrait).
  • Background image (areas only) — Set a background image for the area.
  • Layer (z-Index) — Controls which elements appear in front of others. Higher values are on top.
  • Opacity — A value between 0 (fully transparent) and 1 (fully visible).
  • Initial behaviour:
    • Element is disabled — The element is visible but cannot be clicked.
    • Element is hidden — The element is completely invisible.

Element Settings: Additional Content Tab

Choose what happens when a user interacts with the element:

  • No additional content — The element is simply clickable with no popup.
  • Popover — A small popup appears next to the element.
  • Overlay — A larger modal dialog opens over the slide.

Popover options:

  • Rich text content — Write formatted text using the editor.
  • Open popover automatically when slide loads — The popover appears as soon as the user navigates to the slide. If another popover is already set to auto-open, you'll be prompted to allow multiple active elements.
  • CSS class — Custom styling class for the popover.

Overlay options:

  • Overlay size — Auto (sized to content) or Fullscreen.
  • Overlay layout — Choose from six layout presets:
    • One column, text only
    • One column, media only
    • Two columns, media left / text right
    • Two columns, text left / media right
    • Two rows, media top / text bottom
    • Two rows, text top / media bottom
  • Overlay title — A heading displayed at the top of the overlay.
  • Image — Add an image. If a media file is also provided, the image serves as its poster.
  • Media file — Add a video file. If the video has subtitles, you can select a default subtitle track.
  • Rich text content — Available for all layouts except "media only."
  • CSS class — Custom styling class for the overlay.

Important: If a hotspot has both an audio file and an overlay, a warning will suggest using only one of the two, or switching to a popover for better usability.

Element Settings: Actions Tab

Actions let one element change the appearance or state of another element when a specific event occurs. This is a powerful feature for building interactive, multi-step experiences.

Setting up an action:

  1. Choose a trigger event — when should the action fire?
    • Element is clicked — when the user clicks this element
    • Overlay / popover is closed — when the additional content is dismissed
    • Audio has ended — when the audio file finishes playing (hotspots with audio only)
  3. Select a target element — which other element should be affected?
  4. Configure the changes to apply to that target element:
    • Change its position, size, opacity, or layer
    • Show or hide it
    • Enable or disable it
    • Set a new background image (for areas)
    • Mark it as done
  6. Changes can be configured separately for landscape and portrait orientation.

You can add multiple actions to a single element, each targeting different elements.

Landscape and Portrait

Powerspots slides support both landscape and portrait orientations. You can:

  • Set separate background and interaction images for each orientation.
  • Toggle between orientations using the Rotate view button in the toolbar.
  • Configure separate position, size, and appearance settings per element for each orientation. By default, portrait uses the same values as landscape — disable Same as landscape in the Appearance tab to customize.

Step-by-Step Guides

Creating a Simple Image Exploration Slide

  1. Add a Powerspots slide to your cBook.
  2. In the sidebar's Appearance tab, add an interaction image. Use the interaction image (not the background image) so your hotspots stay precisely aligned with the image content on any screen size.
  3. Click Add element and choose Add hotspot.
  4. Drag the hotspot to the desired position on the image.
  5. In the Element Editor's General tab, give it a meaningful label (e.g., "Engine").
  6. Switch to the Additional Content tab, select Popover, and write a short description.
  7. Repeat for additional points of interest.
  8. Mark elements as mandatory if users must visit them all to complete the slide.
  9. Optionally, add a background image for decorative purposes — for example a blurred or dimmed version of the same image to fill any space around the interaction image.

Building an Audio Tour

  1. Add an interaction image in the sidebar's Appearance tab. This ensures your hotspots stay aligned with specific spots on the image regardless of screen size.
  2. Add a hotspot and open the Element Editor.
  3. In the General tab, click Add audio file and upload your audio clip.
  4. The hotspot will automatically display play/pause icons. Custom icons are not available when audio is attached.
  5. Optionally enable Mandatory for slide completion so users must listen to complete the slide.
  6. If you want to show text or media alongside the audio, use a Popover (recommended over an overlay for hotspots with audio).

Creating an Interactive Reveal Sequence

Use actions to build a step-by-step experience where interacting with one element reveals or changes another:

  1. Add two or more elements (e.g., "Step 1" and "Step 2").
  2. Set "Step 2" to Element is hidden in its Appearance tab so it starts invisible.
  3. Select "Step 1" and open the Actions tab.
  4. Set the trigger to Element is clicked.
  5. Select "Step 2" as the target element.
  6. In the action's style settings, uncheck Element is hidden to reveal it.
  7. Now when a user clicks "Step 1", "Step 2" will appear.

You can chain these interactions across multiple elements to create guided walkthroughs.

Using the Grid Layout

If you want elements evenly distributed (e.g., a set of hotspots arranged in a 3x2 pattern):

  1. In the sidebar's Settings tab, set Grid columns to 3 and Grid rows to 2.
  2. For each element, open the Appearance tab and set the Layout to Align along grid.
  3. Use the Arrange elements panel in the Settings tab to drag elements into the desired grid order.

Grid and manually positioned elements can coexist on the same slide. Remember that the element order also affects keyboard tab order and screen reader announcement order, so arrange elements in a logical reading sequence.

Was this article helpful?

English
Powered by Product Fruits