# @quattro-bet/embeddable-app
> ```bash npm i @quattro-bet/embeddable-app ``` or ```bash yarn add @quattro-bet/embeddable-app ``` ### Terms: - Host application - JavaScript application which runs Embedded application. - Embedded application - JavaScript application which runs in host a
Latest version **0.3.3** (published 2026-08-31) · MIT license · 0 weekly downloads
## Install
```sh
npm install @quattro-bet/embeddable-app
pnpm add @quattro-bet/embeddable-app
yarn add @quattro-bet/embeddable-app
bun add @quattro-bet/embeddable-app
```
## Health
**Score 60/100 (C)** — status: active.
Positive: esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.3.3 |
| Published | 2026-08-31 |
| First published | 2020-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 68.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | quattro |
## Links
- npm: https://www.npmjs.com/package/@quattro-bet/embeddable-app
- npm.io page: https://npm.io/package/@quattro-bet/embeddable-app
## Dependencies (1)
- [promise-any-polyfill](https://npm.io/package/promise-any-polyfill.md) 1.0.1
## Recent versions
- 0.3.3 (latest) — 2026-08-31
- 0.3.2 — 2026-08-17
- 0.3.1 — 2026-08-17
- 0.3.0 — 2026-08-17
- 0.2.12 — 2026-06-04
- 0.2.11 — 2026-06-02
- 0.2.10 — 2026-05-11
- 0.2.9 — 2026-04-03
- 0.2.8 — 2025-10-16
- 0.2.7 — 2025-10-14
- 0.2.6 — 2025-09-30
- 0.2.5 — 2025-09-19
- 0.2.4 — 2025-09-19
- 0.2.3 — 2025-09-15
- 0.2.2 — 2025-09-15
- … 23 more at https://npm.io/package/@quattro-bet/embeddable-app/versions
## README
# @quattro-bet/embeddable-app
## Install
```bash
npm i @quattro-bet/embeddable-app
```
or
```bash
yarn add @quattro-bet/embeddable-app
```
### Terms:
- Host application - JavaScript application which runs Embedded application.
- Embedded application - JavaScript application which runs in host application.
### Usage
#### 1. Add javascript file `embeddable-app.js` from dist to your page:
```html
```
Or import `embeddable-app` from `node_modules`:
```javascript
import * as app from "@quattro-bet/embeddable-app";
```
#### 2.(Optional) Call `app.prefetch()` as early as possible (during the initial startup) in entrypoint Host application to improve resource loading:
```javascript
/**
* @param {Object} Prefetch Options
* @returns {void}
*/
app.prefetch(options);
````
##### Prefetch Options
| Name | Type | Required | Description
|---------------|---------|----------|---------------------------------------------------------|
| siteName | string | no | **Deprecated:** use `brandId` instead. Host site name |
| brandId | number | no | Host brand id |
| url | string | yes | Embedded application API URL |
| dnsDomainName | string | no | Dns domain name queried by the embedded application |
| mobile | boolean | no | Mobile or desktop version, default value is `false` |
| widget | number | no | Prefetch a single standalone widget instead of the full application — the widget index, the same one `app.widget.create()` embeds. See [Standalone widgets](#4-embed-a-standalone-widget-with-appwidget) |
##### Example:
```javascript
// some Host application entrypoint
app.prefetch({
brandId: 00000,
url: "https://domain.com",
mobile: isMobile(), //some mobile/desktop detection
});
````
#### 3. Embed the full sportsbook with `app.create()`:
`app.create()` renders the full sportsbook application.
```javascript
/**
* @param {Object} Create Options
* @return {Promise} Promise with the control object
*/
var control = app.create(options);
```
Or via async/await:
```javascript
async function foo() {
var control = await app.create(options);
}
```
#### Create Options
| Name | Type | Required | Description
|------------------------------|--------------------|----------|--------------------------------------------------------------------------------------------------------------------|
| siteName | string | no | **Deprecated:** use `brandId` instead. Host site name |
| brandId | number | no | Host brand id |
| 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 |
| dnsDomainName | string | no | Dns domain name queried by the embedded application |
| mobile | boolean | no | Mobile or desktop version, default value is `false` |
| widget | number | no | **Deprecated:** use [`app.widget.create()`](#4-embed-a-standalone-widget-with-appwidget) instead. Render a single standalone widget instead of the full application |
| 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 |
| sbNavEnabled | boolean | no | Show sb navigation menu, default value is `true` |
| params | object | no | |
| token | string | no | Partner system player token may be omitted when a player is not logged |
| locale | string | no | Application locale, default value is `tr_TR`. See [Supported locales](#supported-locales) |
| defaultCurrency | string | no | **Deprecated:** use `currency` instead. The default currency for unauthorized player, default value is `EUR` |
| currency | string | no | The default currency for an unauthorized player, or the player’s currency if available. The 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.
#### 4. Embed a standalone widget with `app.widget`
Instead of the full sportsbook, a single standalone widget can be embedded — one method per widget:
```javascript
/**
* @param {Object} Widget Options
* @return {Promise} Promise with the control object
*/
var control = app.widget.create0(options); // widget 0 — Top events
var control = app.widget.create1(options); // widget 1 — Top leagues
var control = app.widget.create2(options); // widget 2 — Bet history
```
The returned control object is the same as for `app.create()` (see [Control methods](#control-methods)).
Each widget takes only the options listed in its table below.
> **Note:** not every widget is built for every brand. Ask your integration contact which widgets
> your brand ships; requesting a widget the brand does not build fails to load.
##### Widget 0 — Top events: `app.widget.create0()`
Carousel of the top events with their main-line markets.
| Name | Type | Required | Description |
|---------------|--------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| url | string | yes | Embedded application API URL |
| elementId | string | yes | id of a DOM element, in which the widget will be built |
| brandId | number | no | Host brand id |
| dnsDomainName | string | no | Dns domain name queried by the embedded application |
| pathNamespace | string | no | Namespace path, in which the full sportsbook is launched on the host site — used to build the links leading from the widget to the full sportsbook (e.g. an opened event). Default value is `/sportsbook` |
| params | object | no | |
| locale | string | no | Application locale, default value is `tr_TR`. See [Supported locales](#supported-locales) |
| theme | string | no | It's possible to set a color theme, for example: light, dark |
```javascript
var control = await app.widget.create0({
brandId: 00000,
url: "https://domain.com",
elementId: "widget",
params: {
locale: "tr_TR",
},
});
```
##### Widget 1 — Top leagues: `app.widget.create1()`
List of the top leagues.
| Name | Type | Required | Description |
|---------------|--------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| url | string | yes | Embedded application API URL |
| elementId | string | yes | id of a DOM element, in which the widget will be built |
| brandId | number | no | Host brand id |
| dnsDomainName | string | no | Dns domain name queried by the embedded application |
| pathNamespace | string | no | Namespace path, in which the full sportsbook is launched on the host site — used to build the links leading from the widget to the full sportsbook. Default value is `/sportsbook` |
| params | object | no | |
| locale | string | no | Application locale, default value is `tr_TR`. See [Supported locales](#supported-locales) |
| theme | string | no | It's possible to set a color theme, for example: light, dark |
```javascript
var control = await app.widget.create1({
brandId: 00000,
url: "https://domain.com",
elementId: "widget",
params: {
locale: "tr_TR",
},
});
```
##### Widget 2 — Bet history: `app.widget.create2()`
A single bet, looked up by id.
| Name | Type | Required | Description |
|---------------|--------|----------|---------------------------------------------------------------------------------------------------------------------------------------------|
| url | string | yes | Embedded application API URL |
| elementId | string | yes | id of a DOM element, in which the widget will be built |
| betId | string | yes | Id (UUID) of the bet to render |
| brandId | number | no | Host brand id |
| dnsDomainName | string | no | Dns domain name queried by the embedded application |
| params | object | no | |
| locale | string | no | Application locale, default value is `tr_TR`. See [Supported locales](#supported-locales) |
```javascript
var control = await app.widget.create2({
brandId: 00000,
url: "https://domain.com",
elementId: "widget",
betId: "0e9d5a7e-1111-2222-3333-444455556666",
params: {
locale: "tr_TR",
},
});
```
> **Note:** the same widget index can be passed to `app.prefetch()` via the `widget` option so the
> correct widget bundle is prefetched ahead of time:
> ```javascript
> app.prefetch({ brandId: 00000, url: "https://domain.com", widget: 0 });
> ```
#### 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.
```javascript
control.changeParams({token: "user_token"})
```
When the user is logged out, call change params with null.
```javascript
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.
#### Currency
The currency used by the embedded application is controlled via `params.currency`.
Pass the initial currency on `app.create()`. It is used as the currency for an unauthorized player,
or as the player's currency when no authenticated currency is available (defaults to `EUR`):
```javascript
var control = await app.create({
brandId: 00000,
url: "https://domain.com",
elementId: "app",
pathNamespace: "/sportsbook",
initPath: "/sportsbook/prelive",
onEmbeddedHistoryChange(path) {
return router.push(path);
},
subscribeOnHostHistoryChange(embeddedListener) {
listeners.push(embeddedListener);
},
params: {
currency: "USD",
},
});
```
Later, if you need to switch the currency (for example, the player changed it in the host application),
call `control::changeParams` with the new `currency`:
```javascript
control.changeParams({ currency: "EUR" })
```
#### 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:
```javascript
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({
brandId: 00000,
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",
currency: "USD",
}
})
}
```
#### Supported locales
The `locale` option accepts a `language_REGION` code (lowercase language, uppercase region).
Locales are split into two writing direction groups: **LTR** (left-to-right) and **RTL** (right-to-left).
When an RTL locale is selected, the embedded application renders its layout in right-to-left direction.
##### RTL locales
| Locale | Language |
|----------|--------------------------------|
| `ar_AE` | Arabic (United Arab Emirates) |
| `ar_AR` | Arabic |
| `ar_BH` | Arabic (Bahrain) |
| `ar_DZ` | Arabic (Algeria) |
| `ar_EG` | Arabic (Egypt) |
| `ar_IQ` | Arabic (Iraq) |
| `ar_JO` | Arabic (Jordan) |
| `ar_KW` | Arabic (Kuwait) |
| `ar_LB` | Arabic (Lebanon) |
| `ar_LY` | Arabic (Libya) |
| `ar_MA` | Arabic (Morocco) |
| `ar_OM` | Arabic (Oman) |
| `ar_QA` | Arabic (Qatar) |
| `ar_SA` | Arabic (Saudi Arabia) |
| `ar_SY` | Arabic (Syria) |
| `ar_TN` | Arabic (Tunisia) |
| `ar_YE` | Arabic (Yemen) |
| `dv_MV` | Dhivehi (Maldives) |
| `fa_IR` | Persian / Farsi (Iran) |
| `he_IL` | Hebrew (Israel) |
| `ku_IQ` | Kurdish, Sorani (Iraq) |
| `ps_AR` | Pashto |
| `syr_SY` | Syriac (Syria) |
| `ur_PK` | Urdu (Pakistan) |
##### LTR locales
| Locale | Language |
|----------|-----------------------------------|
| `af_ZA` | Afrikaans (South Africa) |
| `az_AZ` | Azerbaijani (Azerbaijan) |
| `be_BY` | Belarusian (Belarus) |
| `bg_BG` | Bulgarian (Bulgaria) |
| `bs_BA` | Bosnian (Bosnia and Herzegovina) |
| `ca_ES` | Catalan (Spain) |
| `cs_CZ` | Czech (Czech Republic) |
| `cy_GB` | Welsh (United Kingdom) |
| `da_DK` | Danish (Denmark) |
| `de_AT` | German (Austria) |
| `de_CH` | German (Switzerland) |
| `de_DE` | German (Germany) |
| `de_LI` | German (Liechtenstein) |
| `de_LU` | German (Luxembourg) |
| `el_EL` | Greek |
| `el_GR` | Greek (Greece) |
| `en_AU` | English (Australia) |
| `en_BZ` | English (Belize) |
| `en_CA` | English (Canada) |
| `en_CB` | English (Caribbean) |
| `en_GB` | English (United Kingdom) |
| `en_IE` | English (Ireland) |
| `en_JM` | English (Jamaica) |
| `en_NG` | English (Nigeria) |
| `en_NZ` | English (New Zealand) |
| `en_PH` | English (Philippines) |
| `en_TT` | English (Trinidad and Tobago) |
| `en_US` | English (United States) |
| `en_ZA` | English (South Africa) |
| `en_ZW` | English (Zimbabwe) |
| `es_AR` | Spanish (Argentina) |
| `es_BO` | Spanish (Bolivia) |
| `es_CL` | Spanish (Chile) |
| `es_CO` | Spanish (Colombia) |
| `es_CR` | Spanish (Costa Rica) |
| `es_DO` | Spanish (Dominican Republic) |
| `es_EC` | Spanish (Ecuador) |
| `es_ES` | Spanish (Spain) |
| `es_GT` | Spanish (Guatemala) |
| `es_HN` | Spanish (Honduras) |
| `es_MX` | Spanish (Mexico) |
| `es_NI` | Spanish (Nicaragua) |
| `es_PA` | Spanish (Panama) |
| `es_PE` | Spanish (Peru) |
| `es_PR` | Spanish (Puerto Rico) |
| `es_PY` | Spanish (Paraguay) |
| `es_SV` | Spanish (El Salvador) |
| `es_UY` | Spanish (Uruguay) |
| `es_VE` | Spanish (Venezuela) |
| `et_EE` | Estonian (Estonia) |
| `eu_ES` | Basque (Spain) |
| `fi_FI` | Finnish (Finland) |
| `fo_FO` | Faroese (Faroe Islands) |
| `fr_BE` | French (Belgium) |
| `fr_CA` | French (Canada) |
| `fr_CH` | French (Switzerland) |
| `fr_FR` | French (France) |
| `fr_LU` | French (Luxembourg) |
| `fr_MC` | French (Monaco) |
| `gl_ES` | Galician (Spain) |
| `gu_IN` | Gujarati (India) |
| `hi_IN` | Hindi (India) |
| `hr_BA` | Croatian (Bosnia and Herzegovina) |
| `hr_HR` | Croatian (Croatia) |
| `hu_HU` | Hungarian (Hungary) |
| `hy_AM` | Armenian (Armenia) |
| `id_ID` | Indonesian (Indonesia) |
| `is_IS` | Icelandic (Iceland) |
| `it_CH` | Italian (Switzerland) |
| `it_IT` | Italian (Italy) |
| `ja_JP` | Japanese (Japan) |
| `ka_GE` | Georgian (Georgia) |
| `kk_KZ` | Kazakh (Kazakhstan) |
| `kn_IN` | Kannada (India) |
| `ko_KR` | Korean (South Korea) |
| `kok_IN` | Konkani (India) |
| `ky_KG` | Kyrgyz (Kyrgyzstan) |
| `lt_LT` | Lithuanian (Lithuania) |
| `lv_LV` | Latvian (Latvia) |
| `mi_NZ` | Maori (New Zealand) |
| `mk_MK` | Macedonian (North Macedonia) |
| `mn_MN` | Mongolian (Mongolia) |
| `mr_IN` | Marathi (India) |
| `ms_BN` | Malay (Brunei) |
| `ms_MY` | Malay (Malaysia) |
| `mt_MT` | Maltese (Malta) |
| `nb_NO` | Norwegian Bokmål (Norway) |
| `nl_BE` | Dutch (Belgium) |
| `nl_NL` | Dutch (Netherlands) |
| `nn_NO` | Norwegian Nynorsk (Norway) |
| `ns_ZA` | Northern Sotho (South Africa) |
| `pa_IN` | Punjabi (India) |
| `pl_PL` | Polish (Poland) |
| `pt_BR` | Portuguese (Brazil) |
| `pt_PT` | Portuguese (Portugal) |
| `qu_BO` | Quechua (Bolivia) |
| `qu_EC` | Quechua (Ecuador) |
| `qu_PE` | Quechua (Peru) |
| `ro_RO` | Romanian (Romania) |
| `ru_RU` | Russian (Russia) |
| `sa_IN` | Sanskrit (India) |
| `se_FI` | Sami (Finland) |
| `se_NO` | Sami (Norway) |
| `se_SE` | Sami (Sweden) |
| `sk_SK` | Slovak (Slovakia) |
| `sl_SI` | Slovenian (Slovenia) |
| `sq_AL` | Albanian (Albania) |
| `sr_BA` | Serbian (Bosnia and Herzegovina) |
| `sr_SP` | Serbian |
| `sv_FI` | Swedish (Finland) |
| `sv_SE` | Swedish (Sweden) |
| `sw_KE` | Swahili (Kenya) |
| `ta_IN` | Tamil (India) |
| `te_IN` | Telugu (India) |
| `th_TH` | Thai (Thailand) |
| `tl_PH` | Tagalog (Philippines) |
| `tn_ZA` | Tswana (South Africa) |
| `tr_TR` | Turkish (Turkey) |
| `tt_RU` | Tatar (Russia) |
| `uk_UA` | Ukrainian (Ukraine) |
| `uz_UZ` | Uzbek (Uzbekistan) |
| `vi_VN` | Vietnamese (Vietnam) |
| `xh_ZA` | Xhosa (South Africa) |
| `zh_CN` | Chinese, Simplified (Mainland) |
| `zh_HK` | Chinese, Traditional (Hong Kong) |
| `zh_MO` | Chinese, Traditional (Macao) |
| `zh_SG` | Chinese, Simplified (Singapore) |
| `zh_TW` | Chinese, Traditional (Taiwan) |
| `zu_ZA` | Zulu (South Africa) |
---
_Source: https://npm.io/package/@quattro-bet/embeddable-app · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._