Deep & Dynamic Linking

Adding deep and dynamic linking allows you to share a special type of link that takes the user right inside the specific page of your app. You can also send the custom data with a link to load the page content based on the data.

For example, you could share an interesting social media post with your friends, and they can directly access its content without manually searching the post inside the app. It just works like any website link would work.

The figure below illustrates how it works:

When you click on the link, first, it checks if the app is installed. If not, the link opens the Playstore or Appstore (based on your device) to install the app. After installing, if the page requires authentication, you'll see a login page. After successful login, you can access the content shared with you.

The best thing to note here is that even if the app has a different flow for accessing the page content (e.g. Home Page -> All Posts -> Single Post), you can bypass the flow and directly open a specific page (e.g. Single Post).

On this page, you'll learn about adding deep links and dynamic links and passing data with the link.

Deep Link

The deep link allows you to create a URL that will open a specific page in your app. For the deep links to work, you must have the app installed on your device.

URL Scheme (structure)

The deep link consists of three parts. It begins with the scheme followed by the host and page name, such as designersapp://designersapp.com/profile.

If the page name is not provided (i.e. designersapp://mydesignersapp.com/)It will open the app's landing page.

Adding Deep Link

Let's build an example of sharing and opening a profile page using the deep link. The example looks like the below:

The steps to add the deep link are as follows:

1. Set URL scheme

In this step, You will set the URL scheme. To do that:

Navigate to Settings & Integrations > General > App Details.
If you want to add deep linking on multiple pages and all of them require users to log in, turn on the Pages Requires Authentication by Default.
In URL scheme fields, by default we add the values based on your project name. To change it, enter the scheme name (before "://") and hostname (after "://").
If you want users to navigate back to the home page instead of closing the app when they press the back button from a deep link page, enable the Pages Are Subroutes of Root Page option. Tip: we recommend enabling this option to increase user engagement with your app.

2. Setting page URL

The page URL points to the specific page in your app, which is used on the Web and for deep linking on mobile.

To set the page URL:

Select the page that you would like to open via a deep link.
Move the properties panel on the right and open the Route Settings section.
By default, the Route is the current page name. Edit this if you want a different name in the page URL.
By default, the page does not require authentication when it opens via the deep link. However, checkmark the Requires Authentication if your app works only after login.

You can share the deep link of the current page by adding the share action.

To share the deep link of the current page:

Select the page that you would like to open via a deep link.
From that page, select any widget (e.g. share button) from the widget tree or the canvas area.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
1. Click on the + Add Action.
2. On the right side, search and select the Share action.
3. Set the Value Source to From Variable.
4. Set the Source to Global Properties.
5. Set the Available Options to Link To Current Page.
6. Click Close.

4. Testing deep link

Deep links can not be tested in Run Mode. Instead, you will need to test the deep links on a real device/emulator.

Before you test the deep link, you need to get it first. The easiest way to get it is to run the app on a device/emulator, click on the share button and then copy the deep link.

Now, you can test the deep link in two ways:

Using CLI tools
Using Firefox mobile browser

4.1 Using CLI tools

If you have Android Studio with the SDK platform tools installed, you can run the following command in the terminal and replace it with your deep link.

adb shell am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "designersapp://designersapp.com/profile"

4.2 Using Firefox mobile browser

You can also test the deep link in a Firefox mobile browser. To do so, open the browser, paste the URL in the search bar, open the options menu and click on the Open in app.

Here is how you do it:

Dynamic Link

The dynamic link opens a specific page in your app. Unlike the deep link, the dynamic link survives the app install. That means if the user has not installed the app, they can be taken to the respective store to install the app. After the app is installed, users can be taken straight to the intended app page.

For the dynamic link to work, you need to enable the deep link. You can think of a dynamic link as the additional benefit of the deep link.

FlutterFlow uses Firebase Dynamic Link (a product from Firebase) to create dynamic links.

Adding Dynamic Link

Let's build an example of sharing and opening a profile page using the dynamic link. The example looks like the below:

The steps to add the dynamic link are as follows:

1. Setting up a domain

The dynamic link requires a domain name that will be used as the URL prefix in the link.

To set up the domain name, follow the steps below:

Open the Firebase console, and click on Dynamic Link (in the left side menu).
Click on the Get Started button. This will open a popup.
Enter the domain name. If you don't own a domain, you can select the free Google Provided Domain that ends with a page.link. To set up your own domain, follow the guide here.
If you chose Google Provided Domain, you could Finish the setup.

2. iOS setup

You must complete additional configuration for the dynamic link to work on the iOS devices.

Setting up iOS includes:

Adding App Store and Team ID to the Firebase project
Adding Associated Domain capability to App Store

2.1 Add App Store and Team ID to the Firebase project

To add the App Store and Team ID to the Firebase project:

Open the Firebase console, and click on Project Overview (in the left side menu).
Select the iOS project and click on the Settings (gear) icon inside.
Scroll down to see your selected iOS project.
Find the App Store ID field, click on the edit icon (pencil icon), enter the ID, and click Save. To know where is your App Store ID, click on the question mark icon beside the label.
Similarly, find the Team ID field, click on the edit icon (pencil icon), enter the ID, and click Save. To know where is your Team ID, click on the question mark icon beside the label.

2.2 Adding Associated Domain capability to App Store

To add the Associated Domain capability on App Store:

Open the Apple Developer homepage and select Certificates, IDs & Profiles.
Select Identifiers (far left menu) and then click on your app identifier.
Checkmark the Associated Domains.
Click Save.

3. Set URL scheme

In this step, You will set the URL scheme. To do that:

Navigate to Settings & Integrations > General > App Details.
If you want to add deep linking on multiple pages and all of them require users to log in, turn on the Pages Requires Authentication by Default.
Also, turn on the Use Firebase Dynamic Links.
In URL scheme fields, by default, we add the values based on your project name. To change it, enter the scheme name (before "://") and hostname (after "://").
If you want users to navigate back to the home page instead of closing the app when they press the back button from a deep link page, enable the Pages Are Subroutes of Root Page option. Tip: we recommend enabling this option to increase user engagement with your app.

4. Setting page URL

The page URL points to the specific page in your app, which is used on the Web and for deep linking on mobile.

To set the page URL:

Select the page that you would like to open via a dynamic link.
Move the properties panel on the right and open the Route Settings section.
By default, the Route is the current page name. Edit this if you want a different name in the page URL.
By default, the page does not require authentication when it opens via the dynamic link. However, checkmark the Requires Authentication if your app works only after login.

You can share the dynamic link of the current page by adding the Generate Current Page Link action and then sharing it using the share action.

To share the dynamic link of the page:

Select the page that you would like to open via a deep link.
Select any widget (e.g. share button) from the widget tree or the canvas area.
First, add the action to Generate Current Page Link.
Now chain the next action to share the dynamic link.
To do that, click on the + button at the bottom of the box and select Add Action.
On the right side, search and select the Share action.
Set the Value Source to From Variable.
Set the Source to Widget State.
Set the Available Options to the Current Page Link.
Click Close.

6. Testing dynamic link

Dynamic links can not be tested in Run Mode. Instead, you will need to test the links on a real device/emulator.

Before you test the dynamic link, you need to get it first. The easiest way is to run the app on a device/emulator. Click on the share button and then copy the dynamic link.

Now you can test the link in a Firefox mobile browser. To do so, open the browser and paste the URL into the search bar.

Here is how you do it:

Passing data with a link

In most cases, you might want to pass custom data with a link. For example, you send the product page link with a discount code and share the profile page with its profile ID. Passing custom data with the link can be used to retrieve the information required to display on the page.

To pass custom data with the link, you need to have the following: