Web Integration

Gift Card Store - Web SDK integration

Hubble SDK is a hosted web application. You can embed it in your app either in an iframe or by opening it in a new window.

1. URL Format

The SDK runs at:

https://vouchers.myhubble.money/sdk/gc/?clientId=YOUR_CLIENT_ID&clientSecret=YOUR_CLIENT_SECRET&token=YOUR_TOKEN

For development, use:

https://vouchers.dev.myhubble.money/sdk/gc/?clientId=YOUR_CLIENT_ID&clientSecret=YOUR_CLIENT_SECRET&token=YOUR_TOKEN

Client ID and Client Secret will be provided by Hubble. For more details on token and sso process in general, see the SSO Guide.

2. Opening the SDK

Option A: Embed in an iframe

<iframe
  src="https://vouchers.myhubble.money/sdk/gc/?clientId=xxx&clientSecret=yyy&token=zzz"
  style="width:100%;height:100%;border:none;"
  allow="clipboard-write *"
  ...
  ...
>
</iframe>

Option B: Open in a new window

window.location.href =
  "https://vouchers.myhubble.money/sdk/gc/?clientId=xxx&clientSecret=yyy&token=zzz";

Note: If you open in a new window, you will not receive SDK events.

3. Listening to Events

When embedded in an iframe, the SDK posts events using postMessage. You can capture them like this:

window.addEventListener("message", function (event) {
  if (event.data.type === "analytics") {
    // Log events to Mixpanel, Clevertap, etc.
    //
    // Sample events:
    // {
    //   "type": "analytics",
    //   "event": "exited",
    //   "properties": {
    //     "through": "home_back_button"
    //   }
    // }
    //
    // {
    //   "type": "analytics",
    //   "event": "visit_brand_l2",
    //   "properties": {
    //     "productId": "01GMAW9HTBB70C8WQQTHW6R8SR",
    //     "brandName": "Myntra"
    //   }
    // }
  }

  if (event.data.type === "action") {
    const action = event.data.action;
    if (action === "close") {
      // User tapped close — dismiss the SDK
    } else if (action === "app_ready") {
      // SDK loaded successfully
    } else if (action === "error") {
      // SDK failed to load — show an error state
    }
  }
});

For the complete list of events and properties, see the SDK Events Reference.

4. Deeplinks (Optional)

You can direct users to a specific page in the SDK by appending the route path to the base URL. See the Deeplinks page for the full route mapping.

Page	URL Path	Additional Query Params	Example
Brand purchase	`/sdk/gc/buy/{brandId}`	`amount`, `couponCode`	`.../sdk/gc/buy/01GMAW9HTBB70C8WQQTHW6R8SR?clientId=...`
Help	`/sdk/gc/help`	—	`.../sdk/gc/help?clientId=...`
Transactions	`/sdk/gc/transactions`	—	`.../sdk/gc/transactions?clientId=...`
Search	`/sdk/gc/search`	`category`	`.../sdk/gc/search?category=electronics&clientId=...`