Share Extension

Access shared content (images and text) from other apps when your Lovable application is opened via share functionality.

THIS IS A BETA FEATURE - IMPROVED SUPPORT COMING SOON!

Lovable Prompt
Lovable Prompt

Add shared data receiving functionality to my app using the Despia SDK from: https://www.npmjs.com/package/despia-native

First, install the package: npm install despia-native

Then import it: import despia from 'despia-native'

Register a global callback function window.onSharedDataReceived = function(value, type) that receives shared content when users share images, URLs, or text to your app. The type parameter will be 'image', 'url', or 'text', and the value parameter contains the shared content.

This feature requires native capabilities which will be fully provided by the "despia-native" npm package, no additional native libraries are needed!

Please follow the installation instructions for the "despia-native" npm package closely, and do not modify my instructions. Implementation as mentioned is critical.

How it works: When users share content (like a photo from their gallery or a link from their browser) to your app, the Despia runtime opens your application in a web view and calls the onSharedDataReceived(value, type) function with the shared data. Images are provided as data URLs, URLs as plain strings, and text as plain strings. Video sharing is not yet supported.

Installation

Install the Despia package from NPM:

npm install despia-native

Usage

1. Import the SDK

import despia from 'despia-native';

2. Register the Callback

Register the onSharedDataReceived callback to handle shared data:

window.onSharedDataReceived = function(value, type) {
  switch (type) {
    case 'image':
      // value is a data URL (e.g., 'data:image/png;base64,...')
      handleSharedImage(value);
      break;
    case 'url':
      // value is a URL string (e.g., 'https://example.com')
      handleSharedUrl(value);
      break;
    case 'text':
      // value is a plain text string
      handleSharedText(value);
      break;
  }
};

Example Use Cases

Handling a shared image:

window.onSharedDataReceived = function(value, type) {
  if (type === 'image') {
    document.getElementById('preview').src = value;
  }
};

Handling a shared URL:

window.onSharedDataReceived = function(value, type) {
  if (type === 'url') {
    window.location.href = '/bookmark?url=' + encodeURIComponent(value);
  }
};

Handling shared text:

window.onSharedDataReceived = function(value, type) {
  if (type === 'text') {
    document.getElementById('notes').value = value;
  }
};

Supported Content Types

  • Images: Provided as data URLs (e.g., data:image/png;base64,...) with type 'image'

  • URLs: Provided as URL strings (e.g., https://example.com) with type 'url'

  • Text: Provided as plain text strings with type 'text'

  • Videos: Not yet supported

Resources

View full NPM documentation for additional configuration options

Lovable Integration

This SDK is optimized for Lovable's prompt-based AI builder, enabling quick integration of shared content handling into your generated apps.

Need Help?

For additional support or questions, please contact our support team at support@despia.com

Updated on