Full Screen

The Despia Fullscreen SDK enables your application to control the visibility of the device's status bar, allowing you to create a fullscreen experience when needed or show the status bar for normal operation.

Quick Start

1. Hide the Status Bar

Show a fullscreen experience by hiding the status bar.

Copywindow.despia = `hidebars://on`

2. Show the Status Bar

Return to normal display by showing the status bar.

Copywindow.despia = `hidebars://off`

3. Implement in Your Application Flow

Toggle the status bar visibility based on your application needs.

Copy// Hide status bar when entering fullscreen content
function enterFullscreen() {
    window.despia = `hidebars://on`;
}

// Show status bar when exiting fullscreen content
function exitFullscreen() {
    window.despia = `hidebars://off`;
}

How It Works

The Status Bar SDK provides a simple interface to control the native status bar visibility on the device. By using the window.despia property with the appropriate command string, your web application can seamlessly integrate with the native device features.

• When you set hidebars://on, the SDK triggers the native functionality to hide the status bar

• When you set hidebars://off, the SDK returns the status bar to its visible state

• The change happens immediately when the command is executed

Implementation Examples

Here's how you can implement the Status Bar SDK in your application:

Copy// Basic implementation example
function toggleStatusBar(hideStatusBar) {
    if (hideStatusBar) {
        // Hide the status bar
        window.despia = `hidebars://on`;
    } else {
        // Show the status bar
        window.despia = `hidebars://off`;
    }
    
    // EXAMPLES FOR NO-CODE/LOW-CODE TOOLS
    
    // ---------- WEWEB ----------     
    // WEWEB example using wwWorkflow to handle feature
    window.despia = `hidebars://on`;
    // or
    window.despia = `hidebars://off`;
    
    // ---------- WIZED ---------- 
    // WIZED example using Wized's JS API
    window.despia = `hidebars://on`;
    // or
    window.despia = `hidebars://off`;
                
    // ---------- NORDCRAFT / TODDLE ---------- 
    // For Nordcraft / Toddle - simply install the "Despia" Package and listen for the event callback.
    // Clone the package from here: https://toddle.dev/projects/despia_package/branches/main
    // Alternatively you could create a custom action using the method
    window.despia = `hidebars://on`;
    // OR
    window.despia = `hidebars://off`;
}

Data Structure

The Status Bar SDK uses simple string commands passed to the window.despia property:

Copy// Command to hide the status bar
"hidebars://on"

// Command to show the status bar
"hidebars://off"

Best Practices

User Experience

• Only hide the status bar when truly needed for an immersive experience

• Always restore the status bar when exiting fullscreen content

• Consider providing visual cues when transitioning between states

Implementation

• Check for feature availability before implementation

• Implement proper error handling for unsupported devices

• Test thoroughly across different device types and operating systems

Complete Implementation Example

Here's a complete example of how to implement status bar control in a web application:

Copy// Status Bar Controller Module
const StatusBarController = {
    // Check if the feature is available
    isSupported: function() {
        return typeof window.despia !== 'undefined';
    },
    
    // Hide the status bar
    hide: function() {
        if (this.isSupported()) {
            try {
                window.despia = `hidebars://on`;
                return true;
            } catch (error) {
                console.error('Failed to hide status bar:', error);
                return false;
            }
        }
        return false;
    },
    
    // Show the status bar
    show: function() {
        if (this.isSupported()) {
            try {
                window.despia = `hidebars://off`;
                return true;
            } catch (error) {
                console.error('Failed to show status bar:', error);
                return false;
            }
        }
        return false;
    },
    
    // Toggle the status bar state
    toggle: function(forceState) {
        if (typeof forceState === 'boolean') {
            return forceState ? this.hide() : this.show();
        } else {
            // Implement logic to detect current state and toggle
            // Note: Current SDK doesn't provide a way to detect current state
            console.warn('Toggle without state parameter not supported');
            return false;
        }
    }
};

// Usage examples
document.getElementById('fullscreenButton').addEventListener('click', function() {
    StatusBarController.hide();
});

document.getElementById('normalViewButton').addEventListener('click', function() {
    StatusBarController.show();
});

Troubleshooting

Common Issues

Command Not Working

• Ensure the Despia SDK is properly initialized

• Check if the device and OS support this feature

• Verify syntax of the command string is exactly as documented

Inconsistent Behavior

• Test on multiple devices and browsers

• Ensure commands are executed after the page has fully loaded

• Add proper error handling to catch and log any issues