JS API
The LoL Game API is implemented as a sequence of asynchronous calls between an iFrame parent and child. Use the browser's built in window.postMessage to send outgoing messages, and window.addEventListener("message", message => {...}) to receive messages. Details on each method are linked below.
Direction | Category | Message Name | Added |
LoL => Game | Lifecycle | ready | V2 |
Game => LoL | Lifecycle | start | V2 |
LoL => Game | Data Payload | language | V2 |
Game => LoL | Lifecycle | loadingProgress | V1 |
Game => LoL | Progress | progress | V2 |
Game => LoL | Speech | speakText | V2 |
Game => LoL | Lifecycle | complete | V1 |
Game => LoL | Questions | showQuestion | V4 |
LoL => Game | Questions | answerResult | V4 |
Game => LoL | State | saveState | V5 |
Game => LoL | State | loadState | V5 |
function LoLApi (messageName, payloadObj) {parent.postMessage({message: messageName,payload: JSON.stringify(payloadObj)},'*')};
window.addEventListener("message", function (msg) {// Message name and JSONified payloadconst { messageName, payload } = msg.data;}
Sent by the game to indicate it is ready to receive data.
LoLApi('gameIsReady', {aspectRatio: "16:9",resolution: "1024x576",});
Sent from the gameframe (following receipt of gameIsReady) to initialize gameplay (with optional lastGameProgress payload).
// payload received (JSON stringified){"languageCode": "en","lastGameProgress": {score: 10,maxScore: 11,gameProvidedPayload: "{\"developerProvidedPayload\": true}"}}
// payload received (JSON stringified){"welcome": "Welcome!","readyToPlay": "Are you ready to play?","greatJob": "Great job!","pressContinue": "Press the next button to continue.","onePlusOne": "One + One = Two"}
LoLApi('loadingProgress', { progress: 0.56 });
LoLApi('progress', { alternativeId: 1 });
LoLApi('speakText', { key: 'welcome' });
LoLApi('saveState', {data: {key: 'welcome'}});
window.addEventListener("message", function (msg) {// Message name and JSONified payloadconst { messageName, payload } = msg.data;if (messageName === 'loadState') {// Your STATE handler herebreak;}});​parent.postMessage({message: 'loadState',payload: '*'},'*');
LoLApi('saveState', { currentProgress: 3, maximumProgress: 10, data: {key: 'welcome'}});
window.addEventListener("message", function (msg) {const { messageName, payload } = msg.data;if (messageName === 'loadState') {const previousState = JSON.parse(payload);const currentProgress = previousState && previousState.currentProgressconst maximumProgress = previousState && previousState.maximumProgressLoLApi('progress', {currentProgress, maximumProgress});// do something with the data inside payloadbreak;}});​parent.postMessage({message: 'loadState',payload: '*'},'*');
LoLApi('complete', {});
const EVENT = {RECEIVED: {PAUSE: 'pause',RESUME: 'resume',QUESTIONS: 'questions',LANGUAGE: 'language',START: 'start',INIT: 'init',STATE: 'loadState'}};​window.addEventListener("message", function (msg) {console.log('[PARENT => UNITY]', msg)​switch (msg.data.messageName) {case EVENT.RECEIVED.PAUSE:// Your PAUSE handler herebreak;case EVENT.RECEIVED.RESUME:// Your RESUME handler herebreak;case EVENT.RECEIVED.QUESTIONS:// Your QUESTIONS handler herebreak;case EVENT.RECEIVED.LANGUAGE:// Your LANGUAGE handler herebreak;case EVENT.RECEIVED.START:// Your START handler herebreak;case EVENT.RECEIVED.STATE:// Your STATE handler herebreak;case EVENT.RECEIVED.INIT:break;default:console.log('Unhandled message: ' + msg);}});
​