Prize (beta)

Allows to handle Stagecast Prizes

Introduction

Some Moments can hand out prizes. In order to add support for prizes to your WebApp, you need to follow these steps:

• add the plugin prizes to the list of plugins in your manifest.json

...
"plugins": [ ..., "prizes", "quiz" ] 
...

• display the Help Popup and Prize Popup Components (see: https://github.com/stagecast/moment-components). Right now, we only support Vue.js

The Prizes API are currently in beta, and work only with Moments that support the Quiz/Quest API:s. We are actively working on a way to enable prizes for all types of Moments.

API calls

getPrize(prizeId:string): Promise<Prize>

This is the first function you should call in order to initialize the prize service. All the following calls will not require the prizeId.

Params

• prizeId: string: the id of the prize to be fetched. You will find the quizId in the SDK config params.

Code

const { prizeId } = await SDK.connection.getMomentClass();

SDK.quiz
 .getPrize(prizeId)
 .then(prize => console.log(prize))
 .catch(err => console.error(err.message || err))

/* prints


{
  "id":"prize-abc-123",
  "picture":"DFC3A843-9B3A-43A4-AE2C-E62FF2024564",
  "title":"Test Prize",
  "description":"Lorem ipsum dolor sit amet...",
  "event":"abc123",
  "claimUrl":"https://stagecast.se/claim/prize/url",
  "owner":"[e-mail]",
  "association": {
    "momentClass": "468CB95C-007C-4C60-9B90-5131A4B11B24", "instances":20, "claimed":2
  }
}

*/

claimPrize(instanceId:string): Promise<URL>

In some cases the claimPrize workflow doesn't work. This happens when the Moment runs inside a Mobile App that can't keep track of the recently-opened window context. See below for the fix.

Params

• instanceId: string: the id of the prize instance to be fetched. The prize instance gets added automatically to the top N user profiles when a Quiz series ends.

Code

// open the window now and change the location later to make it work on
// mobile and Safari
const windowReference = window.open('', '__blank')

SDK.prize.claimPrize(userInfo.prizes[0])
  .then(redirect => {
    console.log('Redirecting: ', redirect)
    windowReference.location = redirect.claimUrl
  })
  .catch()
  
/* prints 

{
  claimUrl: "https//redirect.to.prize.page"
}

*/

claimPrizeUrl(instanceId:string): Promise<URL>

There are cases where the simple claimPrize() workflow doesn't work. This often happens when the Moment is launched inside a Webview or the App rendering the Moment is itself rendered inside a Webview (see https://capacitorjs.com/).

The claimPrizeUrl offers a new workflow to work around the issue. The issue with this workaround is that the call will not return an error when the user has already claimed the prize.

Params

• instanceId: string: the id of the prize instance to be fetched. The prize instance gets added automatically to the top N user profiles when a Quiz series ends. You find the prize instance id in the user profile.

Code

// somewhere in the code, fetch the user profile
// you can't fetch the user profile inside the claimPrize() as the browsers prevent 
// new windows from being opened after an async call
const { prizes } = await SDK.quiz.getUserProfile()

// triggered on prize claim button click
function claimPrize () {
  const lastIndex = prizes.length - 1
  const claimUrl = this.$SDK.prize.getClaimUrl(prizes[lastIndex])
  // security tip: make sure to unlink the parent window from the child with 
  // window.open 'noopener' 'noreferrer' properties
  window.open(claimUrl, '_blank', 'noopener,noreferrer')
}