@quattro-bet/embeddable-app

Install

npm i @quattro-bet/embeddable-app

or

yarn add @quattro-bet/embeddable-app

Usage

1. Add javascript file embeddable-app.js from dist to your page:

<script src="https://domain.com/embeddable-app.js"></script>

Or import embeddable-app from node_modules:

import * as app from "@quattro-bet/embeddable-app";

2. Call app.create():

/**
 * @param {Object} options
 * @return {Promise} Promise with the control object
 */
var control = app.create(options);

Or via async/await:

async function foo() {
  var control = await app.create(options);
}

Terms:

• Host application - JavaScript application which runs Embedded application.
• Embedded application - JavaScript application which runs in host application.

Options

|Name |Type |Required |Description
|-----------------------------|--------------------|-----------|-------------------------------------------------------------------------------------| |url |string |yes |Embedded application API URL | |elementId |string |yes |id of a DOM element, in which the embedded application will be built | |pathNamespace |string |yes |Namespace path, in which the embedded application is launched | |initPath |string |yes |Path, in which the embedded application is launched | |mobile |boolean |no |Mobile or desktop version, default value is false | |onEmbeddedHistoryChange |function |yes |Callback that will be called by changing the path in the embedded application | |subscribeOnHostHistoryChange |function |yes |Function that will be called by an embedded application to subscribe on path changes |
|params | | token |string |no |Partner system player token may be omitted when a player is not logged | | locale |tr_TR or en_US |no |Application locale, default value is tr_TR | | defaultCurrency |string |no |The default currency for unauthorized player, default value is EUR | | timeZoneOffset |number |no |Timezone offset in milliseconds, browser timezone by default | | theme |string |no |It's possible to set a color theme, for example: light, dark |

Control methods:

changeParams(params: Object): void   - Change params.
destroy(): void   - Force destroy embedded application.

Login/logout

For login & logout players use params.token. When you want to create an application but the user is not logged, you should omit a token field. When the user is logged, call: control::changeParams with token field.

 control.changeParams({token: "user_token"})

When the user is logged out, call change params with null.

 control.changeParams({token: null})

A call control::changeParams with an empty object doesn't affect the application. If you want to delete some fields or a certain field, you should set its value equal to null.

URL path synchronization

Embedded application doesn't change the browser history directly. Instead, it provides callbacks onEmbeddedHistoryChange and subscribeOnHostHistoryChange for history synchronization.

Host application should subscribe to changes of path in embedded app via the onEmbeddedHistoryChange callback. This callback will be called when the path has been changed in the embedded app. Embedded app expects that host app changes path via HistoryApi.

When the host app changes, URI (for instance, user clicks on the link outside of the embedded app but this route is controlled by the embedded app) This event should be propagated to the embedded app via call listener registered in subscribeOnHostHistoryChange. When a new path starts with pathNamespace, the path will be routed via internal router in the embedded app. If the route doesn't match pathNamespace , the embedded app will be destroyed.

It means that the link received to the control object at the time of initialization will be relevant. When the host application dispatch changes history with path that controlled via embedded app, the embedded app will be restored.

It's important that host application should add a node with elementId to the DOM tree, provided in options. Embedded app will observe the DOM tree with a node elementId. When this node will be added to the DOM tree, the application will be created.

Example:

var router = new Router(); // some partner router

const listeners = [];

router.onChange(function(path) {
  listeners.forEach(function (listener){ 
    listener(path);
  });
});

async function foo() {
  var control = await app.create({
    url: "https://domain.com",
    elementId: "app",
    pathNamespace: "/sportsbook",
    initPath: "/sportsbook/prelive",
    onEmbeddedHistoryChange(path) { 
      // when the embedded app changes route, the (`onHistoryChange`) function will be called
      // host application should change path using HistoryApi
     return router.push(path);
    },
    subscribeOnHostHistoryChange(embeddedListener) {
      // embedded application listener
      // when the host application changes route, the `embeddedListener` should be called with new path argument
      listeners.push(embeddedListener)
    },
    params: {
     token: "n3add69a9-f2c1-4029-ba3b-946a12263c4a",
     locale: "tr_TR"
    }
  })
}