Examples

Introduction

Explore live examples of the PersoScan widget with different configurations. Each example includes an interactive demo and the corresponding embed code.

Example 1: Developer Mode

Developer mode enables an interactive configuration panel that lets you test different settings and generate the configured URL.

<iframe
  src="https://widget.persoscan.com?license=your-license-key&devMode=true"
  width="100%"
  height="800"
  allow="fullscreen"
  style="border: none; border-radius: 8px; color-scheme: light dark;"
  title="PersoScan Widget - Developer Mode"
></iframe>

What’s Enabled

• devMode=true - Shows the developer configuration panel
• Full access to all customization options
• Real-time preview of changes
• URL generation with “Copy URL” button

Use Case

Perfect for testing different configurations before deploying to production. Experiment with colors, layouts, and UI visibility options to find the perfect setup for your application.

Example 2: Default with Instructions

A standard embed configuration with the instructions button enabled to help end users understand how to interact with the widget.

<iframe
  src="https://widget.persoscan.com?license=your-license-key&instructions=true"
  width="100%"
  height="680"
  allow="fullscreen"
  style="border: none; border-radius: 8px; color-scheme: light dark;"
  title="PersoScan Widget - With Instructions"
></iframe>

What’s Enabled

• instructions=true - Shows the help/instructions button
• Default light theme
• Default male body model
• All UI elements visible

Use Case

Recommended for first-time users or patient-facing applications where users may need guidance. The instructions button provides contextual help without cluttering the interface.

Example 3: Compact Body Part Filter

A minimal embed stripped of all UI controls, designed to sit inline as a compact filter field. Clicking a body part fires a zone-selected postMessage event. Use the zoneId to trigger filtering or data collection in your application.

<iframe
  src="https://widget.persoscan.com?yPosEnabled=true&yPos=90&lockZoom=true&zoom=5&lockAngle=true&changeYOnScroll=true&changeYOnDrag=true"
  width="100%"
  height="200px"
  allow="fullscreen"
  style="border: none; border-radius: 8px; color-scheme: light dark;"
  title="PersoScan Widget - Compact Filter"
></iframe>

What’s Enabled

• showForm=false (default) - All form UI controls hidden; only the 3D model is visible
• yPosEnabled=true - Vertical model position adjustable (via scroll/drag)
• yPos - Default Y position is set to 90 to display face at first.
• lockZoom=true + zoom=10 - Zoom fixed at 10 so the full silhouette fits the 100 px height
• lockAngle=true - Camera angle locked; users cannot rotate
• changeYOnScroll=true + changeYOnDrag=true - Scroll or drag pans the model vertically to reach any body part

Use Case

Embed this as a compact, single-row selector in a form or filter toolbar. Listen for the zone-selected postMessage event to receive the clicked body part’s zoneId and zoneName, then pass those values to your filtering logic or data collection pipeline.

window.addEventListener('message', (event) => {
  if (event.data?.source !== 'persoscan-widget') return;
  if (event.data.type === 'zone-selected') {
    const { zoneId, zoneName } = event.data.data;
    console.log('Selected body part:', zoneId, zoneName);
  }
});

Example 4: Mobile Resolution

The widget is fully responsive and adapts to mobile screens. This example shows how it renders on a typical smartphone display (375px width).

<iframe
src="https://widget.persoscan.com?license=your-license-key&instructions=true"
width="375"
height="680"
allow="fullscreen"
style="border: none; border-radius: 8px; color-scheme: light dark;"
title="PersoScan Widget - Mobile View"
></iframe>

What’s Different

• Narrower viewport (375px) simulates mobile screen
• UI automatically adapts to smaller space
• Touch-friendly interface for mobile users
• Form elements optimize for portrait orientation

Use Case

Test how your embed will appear on mobile devices. The widget’s responsive design ensures a smooth experience across all screen sizes, from smartphones to desktop displays.

Example 5: Customized Dark Theme

An advanced configuration showcasing extensive customization: dark theme, female model, auto-rotation, custom purple accent colors, and hidden export button.

<iframe
  src="https://widget.persoscan.com?license=your-license-key&theme=dark&sex=female&autoRotate=true&hideExport=true&accentColor=%23a855f7&highlightColor=%23c084fc&bodyColor=%2364e6fa&bgColor=%231a202c"
  width="100%"
  height="680"
  allow="fullscreen"
  style="border: none; border-radius: 8px; color-scheme: light dark;"
  title="PersoScan Widget - Customized Dark Theme"
></iframe>

What’s Enabled

• theme=dark - Dark color scheme
• sex=female - Female body model by default
• autoRotate=true - Automatic 3D model rotation
• hideExport=true - Export button hidden
• accentColor=%23a855f7 - Purple UI accent color
• highlightColor=%23c084fc - Lighter purple for highlights
• bodyColor=%2364e6fa - Dark gray body model
• bgColor=%231a202c - Very dark background

Use Case

Ideal for applications with dark mode interfaces or branded experiences. The auto-rotation creates a more dynamic presentation, while custom colors ensure the widget matches your application’s design system.

Building Your Own Configuration

Combine parameters from the Configuration reference to create your perfect setup:

1. Start with basics: key, theme, lang, sex
2. Add behavior: autoRotate, instructions, initialZone
3. Customize colors: accentColor, highlightColor, bodyColor, elementsLightColor, elementsDarkColor, transparentBackground, bgColor
4. Control visibility: hideExport, hidePainNotes, hideSexSelect, etc.
5. Position controls: formPosition for the form and sexSelectPosition for on-screen sex selector placement

Next Steps

• Quick Start - Canonical onboarding flow
• PostMessage API - Event and command contract reference
• Configuration - Complete parameter reference
• Zone Reference - All zone keys returned by zone-selected events
• E-commerce Integrations - Platform-specific integration guides
• Pricing - Get your license key