> For the complete documentation index, see [llms.txt](https://docs.buildnatively.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildnatively.com/guides/integration/share-media-files.md).
# Share Media/Files
## What is Share Media/Files?
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.
{% hint style="info" %}
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.
{% endhint %}
## Prerequisites
{% hint style="success" %}
This feature is available in all plans. [See all plans](/getting-started/subscription-plans.md)
{% endhint %}
## 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
{% tabs %}
{% tab title="Bubble.io Plugin" %}
**Check Plugin**
Before starting, verify if the Natively plugin is already installed in your Bubble project.
1. Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
2. **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.
{% endtab %}
{% tab title="JavaScript SDK" %}
**Check SDK**
Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.
1. Open your project's main HTML file (or header settings) and look for the Natively script tag inside the `` section.
2. Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., `@2.26.0`).
```javascript
```
{% hint style="info" %}
To ensure you are using the most up-to-date version, check the [Natively GitHub releases page](https://github.com/buildnatively/js-sdk/releases) for the latest version number.
{% endhint %}
{% endtab %}
{% tab title="AI Agents" %}
**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 of index.html. If missing or outdated, add it: For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases
```
{% endtab %}
{% endtabs %}
### Setup Logic
{% tabs %}
{% tab title="Bubble.io Plugin" %}
#### \[Action] Natively - Share
* **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)
{% endtab %}
{% tab title="JavaScript SDK" %}
```javascript
// ============================================================================
// 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 ---
```
{% endtab %}
{% tab title="AI Agents" %}
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
{% hint style="warning" %}
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".
{% endhint %}
{% endtab %}
{% endtabs %}
### How to use
#### Share a referral link or URL
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.
#### Share a product image
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.
#### Share a document or file
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.
#### The OS controls the share sheet
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
Share sheet not appearing
Make sure the share is triggered from a user interaction - like a button tap - rather than automatically on page load. The OS may block share sheets that are not initiated by a direct user gesture.
Image or file not appearing in the share sheet
The URL must be publicly accessible. Private, authenticated, or local URLs will fail silently - the share sheet may open but without the expected content. Verify the URL is accessible in a browser before passing it to the share method.
Share sheet appears, but content is missing
Check that the correct method is being used for the content type - `shareImage` for images, `shareFile` for files, `shareText` for text only, and `shareTextAndImage` for both. Passing an image URL to `shareText` will share it as a plain text string, not as an image.
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.
No confirmation that the share was completed
There is no callback for this feature - your app has no way of knowing whether the user completed the share or dismissed the sheet. Design your flow without relying on a share confirmation.
[^1]: Replace this placeholder
