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://sdk.myhubble.money/?clientId=YOUR_CLIENT_ID&appSecret=YOUR_APP_SECRET&token=YOUR_TOKEN

For development, use:

https://sdk.dev.myhubble.money/?clientId=YOUR_CLIENT_ID&appSecret=YOUR_APP_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://sdk.myhubble.money/?clientId=xxx&appSecret=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://sdk.myhubble.money/?clientId=xxx&appSecret=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.

Common Issue: Events Not Reaching Analytics If you are not seeing SDK events in your analytics dashboard, check the following:

Verify your event listener is set up BEFORE loading the SDK (events fire immediately on load).

Check for CORS issues if your analytics provider requires domain whitelisting.

Ensure event.origin matches the Hubble SDK domain when filtering postMessage events.

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	`/buy/{brandId}`	`amount`, `couponCode`	`.../buy/01GMAW9HTBB70C8WQQTHW6R8SR?clientId=...`
Help	`/help`	—	`.../help?clientId=...`
Transactions	`/transactions`	—	`.../transactions?clientId=...`
Search	`/search`	`category`	`.../search?category=electronics&clientId=...`