Touchpoints

Fetch a touchpoint for a screen, render it in your game, record the impression and open it in the store with the PlaySuper Web SDK

A touchpoint is a reward widget for one screen of your game, for example a card on your home screen showing a product the player can get cheaper with their coins. You choose which screens show touchpoints, and what they look like, in the console. The SDK fetches the one to show right now; your game draws it.

Fetch the touchpoint for a screen

const tp = await PlaySuper.serveTouchpoint('home');

if (PlaySuper.hasTouchpoint(tp)) {
  drawTouchpoint(tp);   // your rendering, see below
}

hasTouchpoint(tp) is false when there is nothing to show on that screen right now: the screen has no touchpoint set up, or nothing is available for it. That is not an error; draw the screen without a touchpoint. serveTouchpoint returns null only when the request failed.

Optional filters:

await PlaySuper.serveTouchpoint('home', {
  type: 'product',           // or 'coupon', 'gift-card'
  utmSource: 'my-game',
  utmMedium: 'home-card',
  utmCampaign: 'diwali',
});

Players who are signed in get offers priced for them; signed out, the touchpoint is still served.

Render it

A touchpoint always has artwork (tp.asset). It comes in two kinds:

Kind	`tp.item`	What to draw	Where it leads
Offer	present	The artwork plus the offer: `item.title`, `item.imageUrl`, price and coins (below)	The offer's page in the store
Static	`null`	The artwork alone: it is a complete image	A store page given in `tp.cta`

function drawTouchpoint(tp) {
  const card = createCard(tp.asset.imageUrl, tp.asset.orientation); // 'PORTRAIT' or 'LANDSCAPE'

  if (tp.item) {
    card.title = tp.item.title;
    card.image = tp.item.imageUrl;
    card.button = tp.item.cta.label;              // e.g. "Shop now"
    if (tp.item.pricing) {
      card.price = tp.item.pricing.price;         // before coins
      card.mrp = tp.item.pricing.mrp;             // struck through
      card.discountPct = tp.item.pricing.discountPct;
    }
    if (tp.item.coins) {
      card.coins = `${tp.item.coins.coinsRequired} ${tp.item.coins.coinName}`;
      card.priceWithCoins = tp.item.pricing?.priceAfterCoins;
    }
  } else {
    card.button = tp.cta.label;                   // static artwork
  }

  card.onLoad = () => PlaySuper.trackImpression(tp);   // once it is actually visible
  card.onClick = () => PlaySuper.openCta(tp);          // from the tap itself
}

item.pricing can be missing (coupons, for example) and item.coins is missing when your coin cannot discount that item. Draw the card without those parts rather than showing zero.

Call trackImpression once the touchpoint is on screen, not when it is fetched, and openCta from the player's tap. They record the touchpoint's impressions and taps, and the tap carries the touchpoint into the store visit.

Touchpoints 1.0

Games that set up touchpoints before Touchpoints 2.0 can still fetch them by name or ID:

const tp = await PlaySuper.getTouchpointByName('home', 'YOUR_COIN_ID');
const byId = await PlaySuper.getTouchpointById('TOUCHPOINT_ID', 'YOUR_COIN_ID');
const all = await PlaySuper.listTouchpoints('YOUR_COIN_ID');

These return the 1.0 node tree, which you render yourself; see the Touchpoints API.

Curated lists

Fetch a list of products or rewards your team curated in the console. Each entry carries a ctaUrl to pass to openStore:

const list = await PlaySuper.getCuratedList('products', 'summer-picks', 'YOUR_COIN_ID');
list?.products.forEach((p) => showProduct(p.name, () => PlaySuper.openStore(p.ctaUrl)));

Use 'rewards' for reward lists (results in list.rewards).

Fetch the touchpoint for a screen

Render it

Touchpoints 1.0

Curated lists

On this page