> 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/open-external-app.md).

# Open External App

## What is Open External App?

Open External App lets your app launch other installed applications on the user's device using URL schemes. This is useful for directing users to specific content in another app - opening a location in Google Maps, starting a WhatsApp chat, triggering the phone dialer with a pre-filled number, or any other app that supports deep linking via a URL scheme.

{% hint style="info" %}
If the target app is not installed on the user's device, the command will be silently ignored by the OS - nothing will happen.
{% endhint %}

## Prerequisites

{% hint style="success" %}
This feature requires any **paid** plan. [See all plans](/getting-started/subscription-plans.md)
{% endhint %}

## Common App Schemes

A URL scheme is a string that identifies an app on the device - similar to how `https://` identifies a web URL.

The table below lists URL schemes for popular apps, along with the correct value to enter in your Natively Dashboard and the scheme to use when calling `openExternalApp`.

{% hint style="danger" %}
App schemes can change between app versions, and Natively does not guarantee their accuracy. If a scheme stops working, check the app's official documentation. For a comprehensive list beyond the table below, refer to community-maintained references such as [github.com/bhagyas/app-urls](https://github.com/bhagyas/app-urls).
{% endhint %}

{% hint style="info" %}
On Android, you can open any app using its Bundle ID followed by `://` - for example `com.whatsapp://` - even if you don't know the app's custom URL scheme.&#x20;

This does not work on iOS, which requires the app's registered custom URL scheme.
{% endhint %}

{% hint style="warning" %}
Replace any value in `[brackets]` with your actual data - remove the brackets themselves. For example, `tel:[PHONE_NUMBER]` becomes `tel:+1234567890`.
{% endhint %}

<table data-search="false"><thead><tr><th width="133.77783203125" align="center">App</th><th width="130.22222900390625" align="center">External App Scheme</th><th width="480.4447021484375" align="center">Usage Example</th></tr></thead><tbody><tr><td align="center">Phone Dialer</td><td align="center"><code>tel</code></td><td align="center"><code>tel:[PHONE_NUMBER]</code></td></tr><tr><td align="center">Email</td><td align="center"><code>mailto</code></td><td align="center"><code>mailto:[EMAIL_ADDRESS]</code></td></tr><tr><td align="center">WhatsApp</td><td align="center"><code>whatsapp</code></td><td align="center"><code>whatsapp://send?phone=[PHONE_NUMBER]</code></td></tr><tr><td align="center">Telegram</td><td align="center"><code>tg</code></td><td align="center"><p><code>tg://</code></p><p><code>tg://msg?text=[MESSAGE]</code></p><p><code>tg://resolve?domain=[TELEGRAM_USERNAME]</code></p></td></tr><tr><td align="center">Facebook</td><td align="center"><code>fb</code></td><td align="center"><code>fb://</code><br><code>fb://profile?id=[FACEBOOK_ID]</code><br><code>fb://page?id=[PAGE_ID]</code></td></tr><tr><td align="center">Twitter / X</td><td align="center"><code>twitter</code></td><td align="center"><p><code>twitter://user?screen_name=[USERNAME]</code></p><p><code>twitter://post?message=[MESSAGE]</code></p></td></tr><tr><td align="center">Waze</td><td align="center"><code>waze</code></td><td align="center"><p><code>waze://</code></p><p><code>waze://?q=[LOCATION]</code></p></td></tr><tr><td align="center">App Store (iOS only)</td><td align="center"><code>itms-apps</code></td><td align="center"><code>itms-apps://itunes.apple.com/app/id[APP_STORE_APP_ID]</code></td></tr><tr><td align="center">Play Store (Android only)</td><td align="center"><code>market</code></td><td align="center"><code>market://details?id=[PLAY_STORE_APP_BUNDLE_ID]</code></td></tr></tbody></table>

## Natively Dashboard Setup

Before using `openExternalApp`, you must whitelist the URL scheme of the target app in your Natively Dashboard.

1. Open your Natively app dashboard and navigate to **Settings** > **External App Schemes**.
2. Enter the [URL scheme](#common-app-schemes) of the app you want to open.
3. Click **Add**.
4. Repeat for each app you want to support.
5. Click **Save**.
6. Rebuild your app(s).

{% hint style="warning" %}
You must rebuild your app for these changes to take effect. A new rebuild is required each time you add or modify **External App Schemes**.
{% 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.

<figure><img src="https://docs.buildnatively.com/~gitbook/image?url=https%3A%2F%2F3352617162-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F90tV7pYflEQdiAr2VfWu%252Fuploads%252FmfnSUug82IdnxOAoBrak%252Fnatively_app_builder_bubble_plugin_update.png%3Falt%3Dmedia%26token%3Dc193f69f-b03b-4be4-b80b-f34ba37ac212&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=a89e4510&#x26;sv=2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://docs.buildnatively.com/~gitbook/image?url=https%3A%2F%2F3352617162-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F90tV7pYflEQdiAr2VfWu%252Fuploads%252FC5rA42yQHcN1uGKFbzmF%252Fnatively_app_builder_bubble_plugin.png%3Falt%3Dmedia%26token%3Dd9706d9b-dbe8-459b-b9b3-5667648aa4b7&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=9aae2297&#x26;sv=2" alt=""><figcaption></figcaption></figure>
{% 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 `<head>` 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
<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>
```

{% 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 <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
```

{% endtab %}
{% endtabs %}

### Setup Logic

{% tabs %}
{% tab title="Bubble.io Plugin" %}

#### \[Action] Natively - Open external app

* **App URL** — the app's URL scheme including `://` (e.g. `whatsapp://send?phone=+1234567890`).

<figure><img src="/files/56m2A6hCH308NEzzQqda" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="JavaScript SDK" %}

```javascript
// ============================================================================
// NATIVELY OPEN EXTERNAL APP - DOCUMENTATION & EXAMPLES
// ============================================================================

// No initialization required — openExternalApp is available directly
// on the global window.natively object.

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// window.natively.openExternalApp(scheme)
//   - Opens another installed app using its URL scheme.
//   - scheme: string — the app's URL scheme including ://
//              e.g. "whatsapp://", "whatsapp://send?phone=+1234567890"

// --- Open External App. Example. Start ---

window.natively.openExternalApp("whatsapp://send?phone=+1234567890&text=Hello");

// --- Open External App. Example. End ---
```

{% endtab %}

{% tab title="AI Agents" %}
AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.&#x20;

Copy the line below and paste it into your AI agent.&#x20;

<pre><code>[<a data-footnote-ref href="#user-content-fn-1">Your feature description</a>], schemes to use [<a data-footnote-ref href="#user-content-fn-2">URL schemes to use</a>], using the Natively Open External App SDK: // window.natively.openExternalApp(scheme) — opens another installed app using its URL scheme. scheme: string — the app's URL scheme including ://, e.g. "whatsapp://send?phone=+1234567890". The scheme must be whitelisted in Natively Dashboard → Settings → External App Schemes before it will work. For reference: https://docs.buildnatively.com/guides/integration/open-external-app
</code></pre>

{% hint style="warning" %}
Replace the placeholder at the beginning with a description of what you want to build - for example: "Open WhatsApp with a pre-filled message when the user taps the contact support button".
{% endhint %}

{% hint style="warning" %}
Replace the placeholder **URL schemes to use** with those configured in your Natively Dashboard and the required path within the scheme.
{% endhint %}
{% endtab %}
{% endtabs %}

### How to use

#### Open a specific chat or contact

The most common use case - opening WhatsApp, Telegram, or Facebook with a pre-filled phone number or username so the user can start a conversation in one tap, without having to find the contact themselves.

#### Open the phone dialer

Use `tel:[PHONE_NUMBER]` to pre-fill the dialer with a support number or contact. The user still has to tap call button - nothing is dialed automatically.

#### Handle the app not being installed

If the target app is not installed, nothing happens - the OS silently ignores the call. Consider showing a message to the user first, or falling back to a web URL using [Open External URL](/guides/integration/open-external-url.md).

## Troubleshooting

<details>

<summary>Nothing happens when calling <code>openExternalApp</code></summary>

Make sure the URL scheme is added to **Settings** > **External App Schemes** in your Natively Dashboard and that you've rebuilt your app after adding it. Without both steps, `openExternalApp` will not work.

</details>

<details>

<summary>The wrong app opens</summary>

Multiple apps can register the same URL scheme. If an unexpected app opens, the device has a different app set as the default handler for that scheme. This is an OS-level behavior and cannot be controlled from Natively.

</details>

<details>

<summary>The scheme works on iOS but not on Android (or vice versa)</summary>

Some apps use different schemes on iOS and Android. Check the app's official documentation for the correct scheme per platform. On Android, you can also try using the app's Bundle ID followed by `://` as an alternative.

</details>

<details>

<summary>App opens but navigates to the wrong place</summary>

The scheme parameters may be incorrect, or the app may have updated its URL scheme format. Check the app's latest documentation for the correct parameters.

</details>

[^1]: Replace this placeholder

[^2]: Replace this with your URL schemes
