branch io web sdk generate link as banner

673 Views Asked by At

I have created a smart banner using the Branch.io web SDK, but I also need to generate a Branch deep linking url (e.g https://bnc.lt/l/3HZMytU-BW) to use as the href value in a normal link.

Here is the behavior I want this link to have:

If user is on a mobile device

  • Send user to app store if app is not installed
  • Deep link into app if app installed

If user on desktop

  • Send the user to a web url (e.g www.mysite.com/welcome) with appended custom params (e.g www.mysite.com/welcome?deeplink=true&getme=20)

I have seen that I can generate a Branch link by using the javascript banner.link() method, or via an HTTP API call. Then I can add a query string to the generated link, which works fine on desktop. Will those query string values also be available inside the app if it is installed when the user clicks the link?

I have seen that I can pass different fallback URLs for each device (iOS, Android, desktop, etc.) to use if the app is not installed. How does this work on the mobile devices? If the app is installed, does it still open when these fallback URLs are specified? Do these fallback URLs override the App/Play Store redirects?

I would really appreciate your help. Thanks in advance.

1

There are 1 best solutions below

0
On

Link Behavior

What you've described is the standard behavior for Branch.io links (full disclosure: I'm on the Branch team).

  • Desktop users will be sent to a fallback website URL
  • Mobile users with the app installed will be sent to the app
  • Mobile users without the app installed will be sent to the App Store (though you can override this and send them somewhere else).

Appending Query Params

Query parameters appended to a generated Branch link (e.g., https://branchmaps.app.link/LC3Cj399jz?foo=bar) will be passed through to both the website fallback destination and the app.

Desktop Website

Let's say the desktop destination of https://branchmaps.app.link/LC3Cj399jz is https://branch.io/maps. Appending to foo=bar to that (https://branchmaps.app.link/LC3Cj399jz?foo=bar) will automatically append foo=bar to the destination URL: https://branch.io/maps?foo=bar

Mobile App

Appended params (e.g., https://branchmaps.app.link/LC3Cj399jz?foo=bar) will be captured and returned inside the link data dictionary when the app launches. This would look something like the following:

{
    tags: [ 'tag1', 'tag2' ],
    channel: 'facebook',
    feature: 'dashboard',
    stage: 'new user',
    alias: 'myalias',
    data: {
        foo: 'bar',
        // other data
    }
}

HOWEVER, if you append the query params to the desktop fallback URL (e.g., https://branch.io/maps?foo=bar) inside the Branch link, then that will not be passed through to the app. Instead, you should specify those inside the branch.link() call like so:

branch.link({
    tags: [ 'tag1', 'tag2' ],
    channel: 'facebook',
    feature: 'dashboard',
    stage: 'new user',
    data: {
        foo: 'bar',
        '$desktop_url': 'https://branch.io/maps?foo=bar',
    }

}, function(err, link) {
    console.log(err, link);
});

Fallback URLs

If you specify fallback URLs ($android_url, $ios_url), these will only take effect if the app isn't installed. These will override the default App/Play Store fallbacks.