Skip to content

How to use 'deeplink' to land user to a particular app page

Alexander Boldyrev edited this page Oct 31, 2024 · 3 revisions

This page describes one of the approaches of handling deep links in your app. It uses references to Example app, to configure it for your applicationCode use How to start Example app.

How to send deep link over push message

First you will need to identify the schema for your deep link, usually it is reverse DNS notation: com.infobip.mobilemessaging://deeplink/. And also define screens that you want to open as part of deep link such as screen_one, screen_two. And then it will be possible to send deep link over push message and to handle notificationTapped event.

To send message with deeplink parameter you can use Portal or HTTP API, ask your account manager in case of further questions. For our example deep link parameter will be following com.infobip.mobilemessaging://deeplink/screen_one

Example of the code implementation

Create screens, which will be opened by the deeplink

In the Example app 2 simple screens for the deeplink testing created, you can check them: screen_one.dart These screens are added to the routes in page.dart

//define application pages and routes to them
final pages = [
  Page(
    name: 'Personalize',
    route: '/signin_http',
    builder: (context) => SignInHttpDemo(),
  ),
  Page(
    name: 'screen_one',
    route: '/screen_one',
    builder: (context) => ScreenOneDemo(),
  ),
  Page(
    name: 'screen_two',
    route: '/screen_two',
    builder: (context) => ScreenTwoDemo(),
  )
];

...

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Form Samples',
    //build routes for the pages
    routes: Map.fromEntries(pages.map((d) => MapEntry(d.route, d.builder))),
    home: HomePage(),
    navigatorKey: navigatorKey,
    ...
  );

Implement deeplinks handling method

In the Example app handleDeeplinkEvent method is implemented in homepage.dart

_handleDeeplinkEvent(Message message) {
  //taking non empty path segments from Url
  if (message.deeplink != null) {
    Uri uri = Uri.parse(message.deeplink.toString());
    List<String> pathSegments = uri.pathSegments;
    for (var pathSegment in pathSegments) {
      //opening the desired screen by using navigatorKey
      navigatorKey.currentState?.pushNamed('/$pathSegment');
    }
  }
}

Handle deeplink on notificationTapped event.

InfobipMobilemessaging.on('notificationTapped', _handleDeeplinkEvent);

Don't forget to unregister from notificationTapped event.

InfobipMobilemessaging.unregister('notificationTapped', _handleDeeplinkEvent);

Handle application opening by the deeplink

Register iOS application for custom URL scheme as described here

In provided example iOS application is registered for com.infobip.mobilemessaging scheme. Check project by opening Runner.xcworkspace in Xcode, other changes are in Info.plist

Register Android application for custom URL scheme as described here

In provided example Android application is registered for com.infobip.mobilemessaging scheme. Check it by opening AndroidManifest.xml

Full source code can be found in example application. It can be tested on Android by calling the following code from command line:

adb shell am start -a android.intent.action.VIEW -c android.intent.category BROWSABLE -d "http://com.infobip.mobilemessaging/screen_one"

for iOS just open link customscheme://com.infobip.mobilemessaging/screen_one in a browser.

Clone this wiki locally