Deep Links

Deep links allow you to open the SDK directly to a specific page instead of the default home screen. This is useful for promotional banners, push notifications, or in-app navigation that should take the user directly to a specific brand or transaction page.

How Deep Links Work

To deep link, you modify the URL path of the SDK URL. Instead of the default path, you append a route path before the query parameters. The query parameters (clientId, appSecret, token) remain the same.

Default URL (opens home):

https://sdk.myhubble.money/?clientId=...&appSecret=...&token=...

Deep link to a specific brand:

https://sdk.myhubble.money/buy/{brandId}?clientId=...&appSecret=...&token=...

Supported Routes

Route	URL Path	Additional Query Params	Description
Home	`/`	—	Opens the default home page
Brand purchase	`/buy/{brandId}`	`amount`, `denominations`, `coupon`, `skipToPayment`, `consumeCoins`, `showBackButton`, `exitOnBack`	Opens the voucher purchase page for a brand
Search	`/search`	`category` (optional)	Opens the search page or a specific category
Transactions	`/transactions`	`showBackButton`, `exitOnBack`	Opens the transactions/redemption history
Transaction Detail	`/transaction/{transactionId}`	`showBackButton`, `exitOnBack`	Opens a specific transaction's detail page
Coin Transactions	`/coin-transactions`	`showBackButton`	Opens the coin transactions history
Help	`/help`	—	Opens the help and support page

URL Format

https://{baseUrl}/{route}?clientId={clientId}&appSecret={appSecret}&token={token}&wrap-plt={platform}

Base URLs:

Development: https://sdk.dev.myhubble.money
Production: https://sdk.myhubble.money

Brand Purchase Query Parameters

The following query parameters can be used with the brand purchase route (/buy/{brandId}):

Parameter	Type	Description
`amount`	`number`	Pre-fills the purchase amount. Must be within the brand's allowed min/max range.
`denominations`	`string`	For denomination-based vouchers only. Specifies exact denominations to purchase (e.g., `1000x2,500x1` for two ₹1000 and one ₹500 voucher). See Denominations Parameter below.
`coupon`	`string`	Applies a coupon code to the purchase.
`skipToPayment`	`boolean`	When `true`, automatically proceeds to the payment step after the page loads.
`consumeCoins`	`boolean`	When `true`, applies available coins balance towards the purchase.
`showBackButton`	`boolean`	When `false`, hides the back button. Defaults to `true`
`exitOnBack`	`boolean`	When `true`, clicking the back button exits the SDK (fires close event) instead of navigating back. Use this with deep links to handle back navigation in your app.

Denominations Parameter

For brands that use denomination-based vouchers (where you purchase specific voucher values like ₹500 or ₹1000 rather than a custom amount), you can use the denominations parameter to specify exactly which denominations to purchase.

Format: {denomination}x{quantity},{denomination}x{quantity},...

Example: 1000x2,500x1 means two ₹1000 vouchers and one ₹500 voucher (total: ₹2500)

Important Rules

The amount parameter is always required when using denominations. If no amount is provided, the denominations parameter is ignored.
The sum of the specified denominations must exactly equal the amount parameter.
If denominations are invalid or don't match the amount, the SDK will automatically derive denominations from the amount instead.

Behavior by scenario:

Scenario	Behavior
`?amount=5000`	Derives denominations automatically from amount
`?amount=5000&denominations=1000x5`	Uses explicit denominations (5 × ₹1000 = ₹5000)
`?amount=5000&denominations=999x5`	Invalid denomination → derives from amount instead
`?amount=5000&denominations=1000x3`	Sum mismatch (₹3000 ≠ ₹5000) → derives from amount instead
`?denominations=1000x5` (no amount)	No override occurs (amount is required)

Example URL with denominations:

https://sdk.myhubble.money/buy/{brandId}?amount=2500&denominations=1000x2,500x1&clientId=...&token=...

Back Button Behavior with Deep Links

When users open the SDK via a deep link, there is no navigation history. If the user clicks the back button, the default behavior navigates "back" in the WebView history—which may exit the SDK entirely or show a blank page.

To provide a better user experience, use the exitOnBack parameter:

Add exitOnBack=true to your deep link URL
Listen for the close event from the SDK
Navigate the user to your desired destination (e.g., homepage)

Example Implementation

Deep link URL with exitOnBack:

https://sdk.myhubble.money/buy/{brandId}?exitOnBack=true&clientId=...&token=...

Web (iframe):

window.addEventListener("message", (event) => {
  // Legacy format (still supported)
  if (event.data?.type === "close") {
    window.location.href = "/";
  }
  // New format
  if (event.data?.action === "close") {
    window.location.href = "/";
  }
});

Android (Kotlin):

webView.addJavascriptInterface(object {
    @JavascriptInterface
    fun close() {
        // User clicked back button - navigate to homepage
        runOnUiThread {
            startActivity(Intent(this@CurrentActivity, HomeActivity::class.java))
            finish()
        }
    }
}, "AndroidHost")

React Native:

const handleMessage = (event) => {
  const data = JSON.parse(event.nativeEvent.data);
  if (data.action === "close") {
    // User clicked back button - navigate to homepage
    navigation.navigate("Home");
  }
};

<WebView
  source={{ uri: deepLinkUrl }}
  onMessage={handleMessage}
/>

iOS (Swift - WKWebView):

func userContentController(_ userContentController: WKUserContentController,
                          didReceive message: WKScriptMessage) {
    if message.name == "bridge" {
        // String format (legacy)
        if let body = message.body as? String, body == "close" {
            navigateToHome()
        }
        // Dictionary format (new)
        if let body = message.body as? [String: Any],
           body["action"] as? String == "close" {
            navigateToHome()
        }
    }
}

Flutter:

JavascriptChannel(
  name: 'FlutterHost',
  onMessageReceived: (JavascriptMessage message) {
    final data = jsonDecode(message.message);
    if (data['action'] == 'close') {
      // User clicked back button - navigate to homepage
      Navigator.of(context).pushReplacementNamed('/home');
    }
  },
),

Transactions Query Parameters

The following query parameters can be used with the transactions route (/transactions) and the transaction detail route (/transaction/{transactionId}):

Parameter	Type	Description
`showBackButton`	`boolean`	When `false`, hides the back button. Defaults to `true` (unless the client is configured to hide it).
`exitOnBack`	`boolean`	When `true`, clicking the back button exits the SDK (fires close event) instead of navigating back.

Example: Promotional Deep Link

Here is how to construct a deep link that opens a specific brand with a pre-filled amount and coupon:

const brandId = "01GMAVS2CHXR0XP1BZSTA9A44K"; // Amazon brandId from Hubble
const deepLinkUrl = `https://vouchers.myhubble.money/sdk/gc/buy/${brandId}`
  + `?amount=500`
  + `&coupon=SAVE20`
  + `&clientId=${clientId}`
  + `&appSecret=${appSecret}`
  + `&token=${encodeURIComponent(userToken)}`;

// Load in iframe or WebView
document.getElementById("hubble-sdk").src = deepLinkUrl;

Implementation in Code

When initializing your WebView, construct the URL with the desired deeplink route:

JavaScript/TypeScript (React Native)

const baseUrl = "https://sdk.myhubble.money/";

const sourceUrl = `${baseUrl}buy/01GMAVS2CHXR0XP1BZSTA9A44K?clientId=${clientId}&appSecret=${appSecret}&token=${token}&wrap-plt=rn`;

// Use this URL to load your WebView

Kotlin (Android)

val baseUrl = if (env == "prod") "sdk.myhubble.money" else "sdk.dev.myhubble.money"

val url = "https://$baseUrl/buy/01GMAVS2CHXR0XP1BZSTA9A44K?clientId=$clientId&appSecret=$appSecret&token=$token&wrap-plt=an"

webView.loadUrl(url)

Swift (iOS)

var components = URLComponents(string: "https://sdk.myhubble.money/buy/01GMAVS2CHXR0XP1BZSTA9A44K")!
components.queryItems = [
    URLQueryItem(name: "clientId", value: clientId),
    URLQueryItem(name: "appSecret", value: appSecret),
    URLQueryItem(name: "token", value: token),
    URLQueryItem(name: "wrap-plt", value: "ios"),
]

webview.load(URLRequest(url: components.url!))

Dart (Flutter)

final baseUrl = 'https://sdk.myhubble.money/';
// dev baseUrl is https://sdk.dev.myhubble.money/

final sourceUrl = '${baseUrl}buy/01GMAVS2CHXR0XP1BZSTA9A44K?clientId=$clientId&appSecret=$appSecret&token=$token&wrap-plt=flutter';

_controller.loadRequest(Uri.parse(sourceUrl));

Getting the brandId

The brandId is a unique identifier for each brand in the Hubble catalog. This is NOT the brand name - it is an alphanumeric string like "01GMAVS2CHXR0XP1BZSTA9A44K". The Hubble team will provide you with the list of brandIds for your catalog. You can also find brandIds in the SDK events - the visit_brand_l2 event includes the productId which is the same as the brandId.

Common Deep Link Issues

Using the brand name instead of brandId in the URL path. The URL must use the brandId (e.g., '01GMAVS2CHXR0XP1BZSTA9A44K'), not the brand name ('Amazon').
Back button exits instead of going to homepage. When using deep links, there's no navigation history. Add exitOnBack=true to your URL and handle the close event to navigate users to your homepage. See Back Button Behavior with Deep Links.
Deep link to help page opening FAQ instead of support form. The /help route opens the help and support page, which may display FAQ content first.
Post-payment redirect not working on iOS. After payment, the SDK navigates internally. If you are trying to redirect the user outside the SDK after payment, use the voucher_generation_success event to detect completion and navigate programmatically.
On web, if the SDK is opened in a new window instead of an iframe, deep links work but you cannot receive postMessage events when the user completes their purchase.

How Deep Links Work​

Supported Routes​

URL Format​

Brand Purchase Query Parameters​

Denominations Parameter​

Back Button Behavior with Deep Links​

Example Implementation​

Transactions Query Parameters​

Example: Promotional Deep Link​

Implementation in Code​

JavaScript/TypeScript (React Native)​

Kotlin (Android)​

Swift (iOS)​

Dart (Flutter)​

Getting the brandId​