# @playkit-js/qna

> [![Build Status](https://github.com/kaltura/playkit-js-qna/actions/workflows/run_canary_full_flow.yaml/badge.svg)](https://github.com/kaltura/playkit-js-qna/actions/workflows/run_canary_full_flow.yaml) [![code style: prettier](https://img.shields.io/badge

Latest version **3.5.7** (published 2026-09-03) · AGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @playkit-js/qna
pnpm add @playkit-js/qna
yarn add @playkit-js/qna
bun add @playkit-js/qna
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 3.5.7 |
| Published | 2026-09-03 |
| First published | 2021-06-09 |
| Weekly downloads | 0 |
| License | AGPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 833.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | orenme, adi-mach-kaltura, shai.kaltura, eransakalkaltura, semarche, playkitjs.bot |
| Keywords | qna, kaltura, player, playkit-js, playkit-js-qna, html5 player |

## Links

- npm: https://www.npmjs.com/package/@playkit-js/qna
- Repository: https://github.com/kaltura/playkit-js-qna
- Homepage: https://github.com/kaltura/playkit-js-qna#readme
- Issues: https://github.com/kaltura/playkit-js-qna/issues
- npm.io page: https://npm.io/package/@playkit-js/qna

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@playkit-js/common](https://npm.io/package/@playkit-js/common.md) ^1.2.10
- [@playkit-js/playkit-js-ui](https://npm.io/package/@playkit-js/playkit-js-ui.md) ^0.77.3
- [@playkit-js/webpack-common](https://npm.io/package/@playkit-js/webpack-common.md) ^1.0.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 3.5.7 (latest) — 2026-09-03
- 3.5.7-canary.0-0c4a3f6 (canary) — 2026-09-03
- 3.5.6 — 2026-08-28
- 3.5.6-canary.0-fe034f8 — 2026-08-28
- 3.5.5 — 2026-06-04
- 3.5.5-canary.0-5a5ea45 — 2026-06-04
- 3.5.5-canary.0-f2bb9eb — 2026-05-04
- 3.5.4 — 2025-12-18
- 3.5.4-canary.0-8525302 — 2025-12-08
- 3.5.4-canary.0-53997f1 — 2025-11-30
- 3.5.3 — 2025-11-27
- 3.5.3-canary.0-709c05c — 2025-11-27
- 3.5.3-canary.0-a2ce8ed — 2025-11-27
- 3.5.3-canary.0-857cba2 — 2025-11-17
- 3.5.2 — 2025-11-06
- … 142 more at https://npm.io/package/@playkit-js/qna/versions

## README

# PlayKit JS QnA - plugin for the [PlayKit JS Player]

[![Build Status](https://github.com/kaltura/playkit-js-qna/actions/workflows/run_canary_full_flow.yaml/badge.svg)](https://github.com/kaltura/playkit-js-qna/actions/workflows/run_canary_full_flow.yaml)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![](https://img.shields.io/npm/v/@playkit-js/qna/latest.svg)](https://www.npmjs.com/package/@playkit-js/qna)
[![](https://img.shields.io/npm/v/@playkit-js/qna/canary.svg)](https://www.npmjs.com/package/@playkit-js/qna/v/canary)

PlayKit JS QnA is written in [ECMAScript6], statically analysed using [Typescript] and transpiled in ECMAScript5 using [Babel].

[typescript]: https://www.typescriptlang.org/
[ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
[babel]: https://babeljs.io

## Getting Started

### Prerequisites

The plugin requires [Kaltura Player] to be loaded first.

[kaltura player]: https://github.com/kaltura/kaltura-player-js

### Installing

First, clone and run [yarn] to install dependencies:

[yarn]: https://yarnpkg.com/lang/en/

```
git clone https://github.com/kaltura/playkit-js-qna.git
cd playkit-js-qna
yarn install
```

### Building

Then, build the player

```javascript
yarn run build
```

### Embed the library in your test page

Finally, add the bundle as a script tag in your page, and initialize the player

```html
<script type="text/javascript" src="/PATH/TO/FILE/kaltura-player.js"></script>
<!--Kaltura player-->
<script type="text/javascript" src="/PATH/TO/FILE/playkit-kaltura-cuepoints.js"></script>
<!--PlayKit cuepoints plugin-->
<script type="text/javascript" src="/PATH/TO/FILE/playkit-ui-managers.js"></script>
<!--PlayKit ui-managers plugin-->
<script type="text/javascript" src="/PATH/TO/FILE/playkit-qna.js"></script>
<!--PlayKit qna plugin-->
<div id="player-placeholder" style="height:360px; width:640px">
  <script type="text/javascript">
    var playerContainer = document.querySelector("#player-placeholder");
    var config = {
     ...
     targetId: 'player-placeholder',
     plugins: {
      qna: { ... },
      uiManagers: { ... },
      kalturaCuepoints: { ... },
     }
     ...
    };
    var player = KalturaPlayer.setup(config);
    player.loadMedia(...);
  </script>
</div>
```

## Documentation

QnA plugin configuration can been found here:

- **[Configuration](#configuration)**

QnA plugin dependencies can been found here:

- **[Dependencies](#dependencies)**

### And coding style tests

We use ESLint [recommended set](http://eslint.org/docs/rules/) with some additions for enforcing [Flow] types and other rules.

See [ESLint config](.eslintrc.json) for full configuration.

We also use [.editorconfig](.editorconfig) to maintain consistent coding styles and settings, please make sure you comply with the styling.


## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/kaltura/playkit-js-qna/tags).

## License

This project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details

## Commands

Run dev server: `yarn dev`;<br/>
Bump version: `yarn release`;<br/>


<a name="dependencies"></a>
## Dependencies

#### Configuration Structure

```js
//Default configuration
"qna" = {};
//Plugin params
"qna" = {
  bannerDuration?: number;<br/>
  toastDuration?: number;<br/>
  dateFormat?: string;<br/>
  expandMode?: string;<br/>
  expandOnFirstPlay?: boolean;<br/>
  userRole?: string;<br/>
}
```

##

> ### config.bannerDuration
>
> ##### Type: `number`
>
> ##### Default: `60000`
>

##

> ### config.toastDuration
>
> ##### Type: `number`
>
> ##### Default: `5000`
>

##

> ### config.expandMode
>
> ##### Type: `string`;
>
> ##### Default: `over`; (‘alongside', ‘hidden’, 'over’)
>

##

> ### config.dateFormat
>
> ##### Type: `string`;
>
> ##### Default: `over`; (dd/mm/yyyy)
>

##

> ### config.userRole
>
> ##### Type: `string`
>
> ##### Default: `anonymousRole` (anonymousRole|unmoderatedAdminRole)
>

Plugin dependencies:<br/>
<a href="https://github.com/kaltura/playkit-js-kaltura-cuepoints">Cue Points</a><br/>
<a href="https://github.com/kaltura/playkit-js-ui-managers">UI Managers</a>

---
_Source: https://npm.io/package/@playkit-js/qna · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._