Onboarding

The Onboarding feature displays a multi-step tutorial introducing Reader features to new users. The tutorial shows the main features through a step-by-step modal. The content adapts based on content type: Reader steps for PDF/EPUB, Player steps for Audiobook.

---

Accessing Onboarding

Automatic Display

Onboarding may be shown automatically to new users based on tenant configuration and whether the user has seen it before.

Manual Access

Users can access the onboarding tutorial manually through:

• The Onboarding button (if enabled in Settings)
• Store administrator configuration

---

Onboarding Modal

The onboarding tutorial displays as a modal dialog with step-by-step content.

Modal Structure

Element	Description
Content Area	Step illustration, title, and description
Step Indicators	Numbered buttons showing progress
Navigation	Previous/Next buttons at the bottom

Modal Dimensions

Height: Fixed at 600px to accommodate content

Width: Responsive, adapts to screen size

---

Reader Steps (PDF/EPUB)

The Reader onboarding includes the following steps for PDF and EPUB content:

Step 1: Welcome

Step Name: welcome

Content: Introduction to the Reader with welcome message

Image: onboarding-1.svg

Includes: Title, subtitle, paragraph, and extra paragraph

Step 2: Highlights

Step Name: highlights

Content: Explains how to highlight text and use the selection tool

Image: onboarding-2.svg

Includes: Title, paragraph, and extra paragraph

Step 3: Resumes/Notes

Step Name: resume

Content: Introduces the Notebook feature for managing notes and highlights

Image: onboarding-3.svg

Includes: Title, paragraph, and extra paragraph

Step 4: App Promotion (Conditional)

Step Name: app-promote

Condition: Only shown when isPromoteAppEnabled is true and user is not in app

Content: Promotes the mobile app for a better reading experience

Image: onboarding-4.svg

Note: This step is excluded when the user is already using the mobile app

Smart Zoom Step (Conditional)

Step Name: smart-zoom

Condition: Only shown for PDF content when Smart Zoom is enabled

Note: Filtered out for EPUB content since Smart Zoom is not applicable

---

Audiobook Steps

The Audiobook Player has a separate onboarding flow with steps specific to audio content:

Step 1: Welcome

Step Name: welcome

Content: Introduction to the Audiobook Player

Image: onboarding-welcome@2x.png

Includes: Title, subtitle, and paragraph

Step 2: Reproduction/Playback

Step Name: reproduction

Content: Explains playback controls (play, pause, skip)

Image: onboarding-reproduction@2x.png

Step 3: Narrator Speed

Step Name: narrator-speed

Content: Shows how to adjust playback speed

Image: onboarding-speed@2x.png

Step 4: Chapters

Step Name: chapters

Content: Explains the Playlist feature for chapter navigation

Image: onboarding-chapters@2x.png

---

Navigation Controls

Step Indicators

Numbered circular buttons display at the bottom of the modal.

Current Step: Highlighted with pink/magenta background

Other Steps: Gray border with number

Interaction: Clicking a number jumps directly to that step

Navigation Buttons

Button	Behavior
Back/Previous	Go to previous step (hidden on first step when app promotion shown)
Next	Advance to next step
Done	Closes onboarding (shown on last step)

Gesture Support

Swipe Left: Advance to next step

Swipe Right: Go to previous step

info

Touch gestures are supported for intuitive mobile navigation through the onboarding steps.

Keyboard Navigation

Key	Action
Arrow Left	Previous step
Arrow Right	Next step
Escape	Close onboarding

---

Behavior Details

First Step Visibility

The Back button is hidden on the first step when app promotion is enabled.

When app promotion is not shown, the Back button is hidden only on the first step.

Last Step Behavior

On the last step, the Next button changes to show completion text.

Clicking advances closes the onboarding modal.

Swiping right on the last step has no effect.

Keyboard Navigation Pause

When onboarding is open, the Reader's keyboard navigation (arrow keys for page turning) is paused.

Navigation resumes when onboarding is closed.

---

App Promotion

The onboarding can include an app promotion step to encourage users to download the mobile app.

Conditions for Display

Enabled: isPromoteAppEnabled must be true

First Time: User has not seen the promotion before (tracked via localStorage)

Not in App: User is viewing content in a web browser, not the mobile app

Tracking

When the onboarding modal is closed, the system records that the user has seen the app promotion.

Storage Key: promoteAppHasBeenShown:v1

This prevents the promotion from appearing repeatedly.

---

Analytics Tracking

The onboarding tracks user interactions for analytics:

Tracked Events

Action	Trigger	Data
next	click, swipe, keyboard	Step number
previous	click, swipe, keyboard	Step number
bullet	click	Step number

---

Content Type Variations

Aspect	Reader (PDF/EPUB)	Player (Audiobook)
Number of Steps	3-4	4
App Promotion	Conditional	No
Smart Zoom Step	PDF only	No
Image Format	SVG	PNG @2x
Focus	Reading tools	Playback controls

---

Requirements

Requirements

Requirement	Description
Tenant Configuration	Onboarding must be enabled for the tenant
First-time User	May trigger automatically for new users
Localization	Content available in multiple languages