Screenshot Capture

Overview

Screenshot Capture allows you to programmatically take screenshots of any screen in your WeWeb mobile application and automatically save them to the user's photo gallery. This feature is particularly useful for saving QR codes, receipts, tickets, or any visual information users might need to access later, even when offline or on a different device.

Prerequisites

Before implementing screenshot capture, ensure you have:

1. Installed the Despia plugin from the WeWeb Marketplace

2. Verified installation by checking Assets → Library → look for the book symbol showing "Despia Provider"

Implementation Steps

Step 1: Add the Despia Plugin Component

1. Click the Add button in your WeWeb editor

2. Navigate to the Assets panel

3. Find Despia Provider and locate the Despia plugin element

4. Drag the Despia plugin element to the top of your page

   • Best practice: Always place it as the first element for visibility

   • Works on both new and existing pages

Step 2: Add a Screenshot Trigger

1. Add any element that will trigger the screenshot (button, icon, or automated trigger)

2. For this example, add a button element to your page

3. Label it appropriately (e.g., "Save to Gallery" or "Take Screenshot")

Step 3: Configure the Screenshot Workflow

1. Select your trigger element

2. Navigate to Workflows panel

3. Create a new workflow with your desired trigger (typically "On click")

4. Add action: Execute component action

5. Configure the action:

   • Component: Select "Despia plugin"

   • Action: Choose "Take screenshot"

That's it! No additional parameters are needed - the action will capture the current screen and save it to the device's photo gallery.

How It Works

When the screenshot action is triggered:

1. The app captures the current visible screen content

2. The image is automatically processed and formatted

3. The screenshot is saved directly to the device's photo gallery

4. Users receive a system notification confirming the save

5. The image becomes immediately accessible in their photos app

Common Use Cases

QR Code Storage

When displaying QR codes for tickets, boarding passes, or event access, users can save them to their gallery for offline access or quick retrieval without opening the app.

Receipt Preservation

After completing a purchase or transaction, automatically or manually capture the confirmation screen so users have a permanent record in their photos.

Achievement Sharing

Allow users to capture and save their achievements, scores, or milestones directly to their gallery for sharing on social media or keeping as memories.

Information Backup

Enable users to save important information displays like reservation details, appointment confirmations, or temporary access codes for offline reference.

Visual Reports

Let users capture charts, graphs, or data visualizations from your app for presentations, reports, or personal records.

Best Practices

• User Consent: Always inform users before taking screenshots, especially for sensitive content

• Visual Feedback: Show a confirmation message or animation after screenshot capture

• Clear Labeling: Use descriptive button text like "Save to Photos" rather than just "Screenshot"

• Privacy Consideration: Avoid capturing sensitive information unless explicitly requested by the user

• Quality Assurance: Ensure the screen layout is optimized before capture

• Storage Warning: Remind users that screenshots consume device storage

Permission Handling

Both iOS and Android require photo library permissions:

• First Use: The system will automatically prompt for permission

• Permission Denied: The screenshot will fail silently

• Best Practice: Consider checking permissions before showing screenshot features

Important Considerations

Privacy and Security

Screenshots saved to the device gallery are accessible to other apps with photo permissions. Avoid automatically capturing screens containing:

• Payment information

• Personal identification numbers

• Private messages

• Sensitive health data

User Experience

The screenshot captures exactly what's visible on screen, including:

• Navigation bars and system UI (on some devices)

• Any overlays or popups currently displayed

• Loading states or temporary messages

Ensure the screen is in the desired state before triggering the capture.

Storage Management

Each screenshot consumes device storage. For apps that frequently capture screenshots, consider:

• Reminding users to manage their photo storage

• Limiting the frequency of automatic captures

• Providing options to disable automatic screenshot features

Troubleshooting

• Screenshot not saving: Check if the app has photo library permissions

• Black or blank screenshots: Ensure the Despia plugin component is on the page

• Partial captures: Wait for all content to load before triggering screenshot

• Permission prompts not appearing: User may have previously denied permissions in system settings