Introduction

The mini program platform follows a deeplink structure that enables redirections of users to partner mini program and also to individual pages/sections in the partner mini program. Deeplink is supported for both Android and IOS apps. This capability helps improve the user experience by maintaining context ual redirection from the TNGD app. The deeplink can be embedded in the various assets, some of which are listed below:

1. Push Notification
2. Emails
3. SMS
4. App Banners/Assets
5. Digital Ads

Below are some of the use cases that leverage the deeplink capability to provide an improved experience to the users:

1. Transactional Push Notification - The user can be redirected to a mini program app. This can be done with additional parameters to ensure that the destination page/section is loaded.
2. Marketing Push Notification - We use a variety of tools/services to send targeted communications to the users. This can enable user to be redirected to the destination page/section.
3. App Banner/Assets - A variety of in app assets can be used to redirect the user. On click additional parameters can be passed from the TNGD app to the destination mini program.
4. Ad/Emails/SMS - To engage users and redirect them to the mini program on third party platforms. This can be used for acquisition and engagement.

Note : The deeplink capability is available on TNGD android and IOS app version 1.7.39 and after.

Deeplink for AC MPs require TNGD Android and iOS app version 1.7.50 and after.

Deeplink Structure

The deeplink structure is made of 5 parts as highlighted below:

tngdwallet:// client/dl/mp ?mpid=1234567 &path=%2Fpages%2Findex%2Findex &orderid=xxyyzz&extraflag=true

note

1. Please ensure that the mini program id is valid and has been published
2. Please ensure the page path is functional
3. If path and additional parameters are being passed please ensure that they are retrieved through onLaunch and onShow events
4. In case a mini program id is not found the user will land on an error page
5. Please ensure that cases arising due to invalid page/parameters are sufficiently handled to avoid poor user experience
6. Please ensure parameters in the deeplink are URL friendly. Non-url friendly characters like "+" will decode differently in Android and IOS and cause issues. Any non-URL friendly characters are required to be encoded using base64.

Deeplink Attributes

Reserved Keywords

The below keywords are reserved to ensure that the parameters are handled in a contextual manner:

1. mpid
2. path

Parameter Functions

The deeplink path is made of parameters with distinct functions as listed below:

Sample Use Case

Redirection to Home Page

If you want to redirect the user to your mini program home page without any additional parameters and your mini program id is 123456789, the below steps can be used for an effective redirection:

1. Locate your mini program id from the console by visiting the mini program section
2. Locate the mini program id on the page. Example: 123456789
3. Take the base schema that is tngdwallet://client/dl/mp
4. Add the mini program id tngdwallet://client/dl/mp?mpid=123456789
5. This deeplink can be embedded in push notifications, SMS, email, banners/Ads by the relevant TNGD team

Redirection to Specific Page

If you want to redirect the user to a specific page in your mini program where the destination page is /pages/promotions/happy-hours!, follow the below steps:

1. Locate your mini program id from the console by visiting the mini program section
2. Locate the mini program id on the page. Example: 123456789
3. Identify the destination page path. Example: /pages/promotions/happy-hours!
4. Encode the page path. You can refer here for URL encoding
5. Take the encoded path as %2Fpages%2Fpromotions%2Fhappy-hours%21
6. Pass the encoded path and add to the base schema under the reserved keyword path as path=%2Fpages%2Fpromotions%2Fhappy-hours%21
7. Create the full path with the base schema, mini program id and the encoded path as tngdwallet://client/dl/mp?mpid=1234567&path=%2Fpages%2Fpromotions%2Fhappy-hours%21
8. This deeplink can be embedded into push notifications, SMS, email, banners/Ads by the relevant TNGD team

Redirection with Additional Parameters

If you want to pass additional parameters to a page in your mini program so that the user can land to a more contextual page with relevant information, follow the below steps:

1. Locate your mini program id from the console by visiting the mini program section
2. Locate the mini program id on the page. Example: 123456789
3. Identify the destination page path. Example: /pages/promotions/happy-hours!
4. Encode the page path. You can refer here for URL encoding
5. Take the encoded path as %2Fpages%2Fpromotions%2Fhappy-hours%21
6. Prepare the additional parameters, we will take the below parameters

1. order_id=OR12345689
2. order_message='Your order is on its way!'
3. order_details={order_quantity: 10, order_accepted: false, order_message: 'No garlic'}

7. There are 3 additional parameters order_id is a number and need not be encoded. But order_message and order_details needs to be encoded. You can refer here to know more about encoding
8. After the encoding, the above values will look as below:

1. order_id=OR12345689
2. order_message='Your%20order%20is%20on%20its%20way!'
3. order_details=%7Border_quantity%3A%2010%2C%20order_accepted%3A%20false%2C%20order_message%3A%20%27No%20garlic%27%7D

9. Add the encoded additional parameters to the reserved keywords
10. Create the final URL with the base schema, mini program id, page and additional parameters as below:

tngdwallet://client/dl/mp?mpid=1234567&path=%2Fpages%2Fpromotions%2Fhappy-hours%21&order_id=OR12345689&order_message=Your%20order%20is%20on%20its%20way!&order_details=%7Border_quantity%3A%2010%2C%20order_accepted%3A%20false%2C%20order_message%3A%20%27No%20garlic%27%7D

Retrieving Additional Parameters

The additional parameters will be resolved and passed to the mini program. These parameters can be retrieved from the app onLaunch and onShow events:

1. The onLaunch and OnShow events will pass the value as below:

onLaunch(options) {
  my.alert({
    content:JSON.stringify(options.query.key)
  })
  console.log(JSON.stringify(options))
},
onShow(options) {
  my.alert({
    content:JSON.stringify(options.query.key)
  })
  console.log(JSON.stringify(options))
}

2. The additional parameters will be provided in the form as represented below:

options.query = {
  order_id: "OR123456789",
  order_message: "Your order is on its way!",
  order_details: "{order_quantity: 10, order_accepted: false, order_message: 'No garlic'}"
}

Note: The number of query parameters should not be too long as it may render the entire URL unreadable and rejected as per Webview Standards.