Deep Links

Deep links allow you to directly navigate users to specific content within the Super Qi app. This guide covers the deep link format specification and how to integrate them into your systems.

Deep Link Format

The deep link general structure is as follows:

qicardwallet://qicard/deeplink.htm?action=<action-name>&<action parameters>

To open a Miniapp, use the miniapp action with the miniappId parameter, plus _griver_appended_url_part (H5+) or page (DSL) to land on a specific page. Every Miniapp deep link also has a matching short link that can be shared with users directly.

H5+ Deeplink Format

For opening H5+ Miniapps and passing data to them, use the following structure:

qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId=[0]&_griver_appended_url_part=[1]

Integration & Usage

As this is a URI and not a URL (What's the difference?), we can't share it with users directly. However, we can use another approach where we direct the user to the Deep Link URI from a custom web page.

Sample JavaScript Code

The whole idea is to redirect the user visiting our web page to the Deep Link URI using this simple snippet:

const url = `qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId=${appID}&_griver_appended_url_part=${pathAndQuery}`

window.onload = () => {
  window.location.replace(url);
}

Advanced Handling

We always strive for better user experience. Since the link would be publicly accessible, we can take a couple of extra steps to enhance the user's interaction with our system.

Users With Super Qi Not Installed

If the user does not have Super Qi installed, then the window.location.replace will not work, so we can introduce a delay to redirect the user to the store page for their respective platform:

const url = `qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId=${appID}&_griver_appended_url_part=${pathAndQuery}`

const config = {
    timeout: 5 * 1000,
    appStoreUrl: "https://apps.apple.com/app/id1450079855",
    playStoreUrl: "https://play.google.com/store/apps/details?id=iq.qicard.qipay.prod"
}

window.onload = () => {
    window.location.replace(url);

    setTimeout(() => {
        if (/android/i.test(navigator.userAgent)) {
            window.location.replace(config.playStoreUrl);
        } else if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
            window.location.replace(config.appStoreUrl);
        }
    }, config.timeout);
}

Short Links

A deep link URI can't be shared with users directly. Instead of hosting your own redirect page, you can use the link.qi.iq short link service, which performs the redirect and the store fallback for you.

Every short link maps onto an equivalent deep link URI. Miniapp links use the app prefix:

https://link.qi.iq/app/<miniapp parameters>

To create a short link for one of your own Mini Apps programmatically, rather than assembling it by hand, use the generateShortLink Open API.

Miniapp

Opens a Miniapp at its entry page.

https://link.qi.iq/app/{miniappId}

# Example
https://link.qi.iq/app/683288259

qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId={miniappId}

# Example
qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId=683288259

Miniapp With H5+ Parameters

Opens an H5+ Miniapp on a specific page. The {griver_appended_url_part} is the path, query string and fragment to append, as described in H5+ Deeplink Format.

https://link.qi.iq/app/{miniappId}/h5/{griver_appended_url_part}

# Example
https://link.qi.iq/app/683288259/h5/shop.html%3FshopId%3D1329

qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId={miniappId}&_griver_appended_url_part={griver_appended_url_part}

# Example
qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId=683288259&_griver_appended_url_part=shop.html%3FshopId%3D1329

Miniapp With DSL Parameters

Opens a DSL Miniapp on a specific page, using the page parameter instead.

https://link.qi.iq/app/{miniappId}/dsl/{page}

# Example
https://link.qi.iq/app/683288259/dsl/shop%3FshopId%3D1329

qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId={miniappId}&page={page}

# Example
qicardwallet://qicard/deeplink.htm?action=miniapp&miniappId=683288259&page=shop%3FshopId%3D1329