🖼️Share Media/Files

Open the native share sheet to let users share text, images, or files with other apps on their device.

Share Media/Files opens the device's native share sheet, letting users share content directly from your app to any other app that supports it - messaging apps, email, social media, cloud storage, and more. You can share plain text, an image by URL, a combination of text and image, or a file by URL.

The share sheet is handled entirely by the OS - your app doesn't control which apps appear or what the user selects, and there is no callback when the user completes or dismisses the share.

Prerequisites

This feature is available in all plans. See all plans

Implementation

Choose your integration method below: Bubble.io Plugin (No-Code), JavaScript SDK (Code), or AI Agents (for AI-powered editors like Lovable, Base44, and Replit).

Initialization

Check Plugin

Before starting, verify if the Natively plugin is already installed in your Bubble project.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
Check Installed Plugins: Look through your list of installed plugins for "Natively iOS & Android app builder".
- If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.

If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.

Check SDK

Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.

Open your project's main HTML file (or header settings) and look for the Natively script tag inside the <head> section.
Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., @2.26.0).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

Initialize the SDK

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.

Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.

Check if the following Natively SDK script is present in the <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup Logic

Type - the type of content to share:
- text - share plain text or a URL;
- image - share an image by URL;
- both - share text/URL combined with an image;
- file - share a file by URL;
Text or URL - the text or URL to share (used for text and both types)
Image URL - the URL of the image to share (used for image and both types)
File URL - the URL of the file to share (used for file type)

// ============================================================================
// NATIVELY SHARE MEDIA / FILES - DOCUMENTATION & EXAMPLES
// ============================================================================

// No initialization required — share methods are available directly
// on the global window.natively object.

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// window.natively.shareText(text)
//   - Opens the native share sheet with plain text or a URL.
//   - text: string — the text or URL to share
//
// window.natively.shareImage(imageUrl)
//   - Opens the native share sheet with an image.
//   - imageUrl: string — publicly accessible URL of the image to share
//
// window.natively.shareTextAndImage(text, imageUrl)
//   - Opens the native share sheet with both text and an image.
//   - text: string — the text or URL to share
//   - imageUrl: string — publicly accessible URL of the image to share
//
// window.natively.shareFile(fileUrl)
//   - Opens the native share sheet with a file.
//   - fileUrl: string — publicly accessible URL of the file to share

// --- Share Media / Files. Share Text Example. Start ---

window.natively.shareText("Check out this link: https://yourapp.com");

// --- Share Media / Files. Share Text Example. End ---


// --- Share Media / Files. Share Image Example. Start ---

window.natively.shareImage("https://yourapp.com/image.jpg");

// --- Share Media / Files. Share Image Example. End ---


// --- Share Media / Files. Share Text and Image Example. Start ---

window.natively.shareTextAndImage(
    "Check out this image!",
    "https://yourapp.com/image.jpg"
);

// --- Share Media / Files. Share Text and Image Example. End ---


// --- Share Media / Files. Share File Example. Start ---

window.natively.shareFile("https://yourapp.com/document.pdf");

// --- Share Media / Files. Share File Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively Share Media/Files SDK: // window.natively.shareText(text) — shares plain text or a URL. // window.natively.shareImage(imageUrl) — shares an image by URL. // window.natively.shareTextAndImage(text, imageUrl) — shares text and an image together. // window.natively.shareFile(fileUrl) — shares a file by URL. No callback required for any method. For reference: https://docs.buildnatively.com/guides/integration/share-media-files

Replace the placeholder at the beginning with a description of what you want to build - for example: "Add a share button that lets users share the current page URL with a pre-written message".

How to use

Use shareText to let users share a link to your app or a specific page. Pre-fill the text with a message and the URL so the user just picks where to send it.

Use shareImage or shareTextAndImage to let users share a product photo with a caption. Useful for e-commerce apps where users want to send items to friends.

Use shareFile to let users share a PDF, invoice, receipt, or any other file. The file must be publicly accessible via URL - local files are not supported.

Trigger from a user interaction

Always trigger the share sheet from a user interaction like a button tap. Some browsers and OS versions may block share sheets that are triggered programmatically without a direct user gesture.

Your app has no control over which apps appear in the share sheet or what the user selects. There is no callback when the user completes or dismisses the share sheet- design your flow accordingly.

Image and file URLs must be publicly accessible

The URLs passed to shareImage, shareTextAndImage, and shareFile must be publicly accessible - the OS fetches them directly. Private or authenticated URLs will fail silently.

Troubleshooting

Not working in a web browser

This is a native feature and will not work in a standard web browser. Test on a real device using a Natively build or the Preview app.

PreviousScanner (QR/Barcode)NextSMS/Email

Last updated 1 month ago

What is Share Media/Files?

Prerequisites

Implementation

Initialization

Setup Logic

[Action] Natively - Share

How to use

Share a referral link or URL

Share a product image

Share a document or file

Trigger from a user interaction

The OS controls the share sheet

Image and file URLs must be publicly accessible

Troubleshooting