Process

PDF → Images → Clickable areas → Shoppable (Turn.js).

Note: Server-side image generation uses Spatie PDF-to-Image (requires PHP Imagick + Ghostscript). If not available, the editor will fall back to client-side rendering via PDF.js.

Page

@if ($pages->count() === 0)

No pages initialized.

Click Initialize Pages to count pages in the browser (PDF.js) and create page rows in the database.

@else

Draw a hotspot area on the page, then fill the details and save.

Thumbnail Preview

Shows all hotspots on this page with borders

@endif

Hotspot Details

Step 1

Choose a tool and draw on the page.

Step 2

Select an action type and enter details.

@csrf

Action

Status (Active)

Title

Color

Link

For Internal Page, you can also set the page number below.

Internal Page Number

Thumbnail Image

Hotspots on Page

Click a hotspot to edit. Use Delete Selected to remove from canvas, then save.