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, coupon, skipToPayment, consumeCoins | Opens the voucher purchase page for a brand |
| Search | /search | category (optional) | Opens the search page or a specific category |
| Transactions | /transactions | showBackButton | Opens the transactions/redemption history |
| 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
Examples
Open brand purchase page:
https://sdk.myhubble.money/buy/uber?clientId=your_client_id&appSecret=your_app_secret&token=user_token&wrap-plt=flutter
Open brand page with pre-filled amount:
https://sdk.myhubble.money/buy/uber?amount=500&clientId=your_client_id&appSecret=your_app_secret&token=user_token&wrap-plt=flutter
Open brand page with coupon code:
https://sdk.myhubble.money/buy/starbucks?coupon=SAVE20&clientId=your_client_id&appSecret=your_app_secret&token=user_token&wrap-plt=flutter
Open help page:
https://sdk.myhubble.money/help?clientId=your_client_id&appSecret=your_app_secret&token=user_token&wrap-plt=flutter
Skip directly to payment with pre-filled amount:
https://sdk.myhubble.money/buy/uber?amount=500&skipToPayment=true&clientId=your_client_id&appSecret=your_app_secret&token=user_token&wrap-plt=flutter
Open search with category:
https://sdk.myhubble.money/search?category=food&clientId=your_client_id&appSecret=your_app_secret&token=user_token&wrap-plt=flutter
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. |
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. |
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/uber?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/uber?clientId=$clientId&appSecret=$appSecret&token=$token&wrap-plt=an"
webView.loadUrl(url)
Swift (iOS)
var components = URLComponents(string: "https://sdk.myhubble.money/buy/uber")!
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/uber?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.
- 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').
- 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. 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.