# Embeddable Widgets You can place two widgets next to an embedded player — a **playlist list** and a **chapters list** for the current video. Previously such a list was only available on the public Kinescope page; now it can be embedded on your own site as a separate block. | Widget | What it does | Where it's available | | :--- | :--- | :--- | | **Playlist** | List of videos with thumbnail, title, and duration. A click switches the video in the player | A playlist with two or more videos | | **Chapters** | List of chapters with timecodes. A click jumps to the chapter | A single video that has chapters | The widgets don't overlap: a playlist only offers the playlist widget, a video only the chapters widget. > **Внимание:** A widget works **only together with a Kinescope player on the same page**. On its own, without a player, it shows nothing. ## Where to get the code 1. Open the video or playlist settings in the dashboard and click **Embed**. 2. Go to the **Chapters** tab (for a video) or the **Playlist** tab (for a playlist). 3. Choose the **widget theme**: `Auto`, `Light`, or `Dark`. 4. Choose the code type: **responsive** — the widget fills the block it's placed in, or **fixed size** — with width and height in pixels (400 × 600 by default). 5. Copy the **script** — it goes on the page once, no matter how many widgets you add. 6. Click **Copy embed code** — the widget block lands in your clipboard. ![The Chapters tab in the Embed panel of a video: theme, script, and widget code](images/vp-widgets-code-chapters-01.webp " =1920x1080") For a playlist the same panel opens on the Playlist tab: ![The Playlist tab in the Embed panel of a playlist](images/vp-widgets-code-playlist-01.webp " =1920x1080") The tabs don't always appear: * **Chapters** — only if chapters are enabled for the video. How to add them — in the [Working with files: subtitles, chapters, and more](https://docs.kinescope.com/catalog-and-video-management/working-with-files/) article. * **Playlist** — only if the playlist has more than one video. ## Embed code A widget consists of two parts: the loader script and the container block. **The script** — once per page, usually before the closing ``: ```html ``` **The container** — where the widget should appear: ```html ``` `PLAYLIST_ID` and `VIDEO_ID` are the playlist and video identifiers from the dashboard. You don't need to fill them in by hand — the copied code already contains them. The loader inserts an iframe with the widget into the container and connects it to the player on the page. ### Widget size The widget fills the block it's placed in: the width comes from the block's width, the height from its height. So set the height in your own markup — via the block's CSS or with the `data-height` attribute. To make the list exactly as tall as the player, put the player and the widget in the same grid row and give the widget `data-height="100%"`. ### Example: player and chapters widget side by side ```html

Lesson 1

``` This is how the chapters widget looks on a page next to the player: ![Player and chapters widget side by side on a website page](images/vp-widgets-chapters-01.webp " =1920x1080") The playlist widget is embedded the same way — with a playlist player (`https://kinescope.io/embed/pl/PLAYLIST_ID`) and the `kinescope-widget-playlist` container. More about playlists in the player — in the [Playlists](https://docs.kinescope.com/player-docs/playlists/) article. ![Playlist player and playlist widget side by side on a website page](images/vp-widgets-playlist-01.webp " =1920x1080") ## Parameters All parameters are set as container attributes. In the dashboard they are filled in automatically, based on the theme and code type you choose. | Attribute | Values | Description | | :--- | :--- | :--- | | `data-id` | Video or playlist ID | Required. What the widget shows | | `data-theme` | `light`, `dark` | Widget theme. For the `Auto` theme the attribute is omitted — the widget follows the viewer's browser theme | | `data-width` | `100%`, size in px | Widget width. Without the attribute — the width of the container block | | `data-height` | `100%`, size in px | Widget height. Without the attribute — the height of the container block | The widget theme is not tied to the player theme — it's an independent setting. The widget interface (headings, tooltips) is shown in the language of the viewer's browser. > **Информация:** To change the theme or size of a widget that's already embedded, copy the code again with the new settings and replace the block on your site. Parameters are not updated automatically. ## Syncing with the player The widget finds the Kinescope player on the page by itself — no extra code needed. Three setups work: two iframes side by side, a player created through the [IFrame API](https://docs.kinescope.com/player-docs/embedding/iframe-api/) plus a widget, and a regular embed player plus a widget. What happens next: * switching the video in the player highlights the active row in the playlist widget; * playback highlights the current chapter in the chapters widget; * clicking a video switches the player, clicking a chapter jumps to its start; * if the player is recreated, the widget reconnects automatically. If the content changes — you added a video to the playlist or a chapter to the video — the widget on your site picks it up on its own. There's no need to re-embed the code. ## On mobile On narrow screens the widget collapses: the list opens on tap and slides up over the page. The player stays where it is. No separate code is needed for the mobile version. ## Empty states | What the viewer sees | When | | :--- | :--- | | **No chapters** | Chapters were deleted or hidden for the video after the widget was embedded | | **No data** | Only one video is left in the playlist | | **This embed is unavailable** | The video or playlist was deleted or isn't available for embedding | The widget stays on the page and doesn't break the layout. ## Limitations * The widget doesn't work without a Kinescope player on the same page. * You can't edit the playlist or chapters from the widget — that's done in the dashboard. * Apart from theme and size, the styling isn't configurable: fonts, colours, and thumbnails can't be changed. * Inside the widget the list scrolls: if the block is shorter than the list, only some of the videos or chapters are visible — the active row is highlighted. * A playlist has no chapters widget, and a single video has no playlist widget. ## What's next? 1. **[Embedding](https://docs.kinescope.com/video-player/embedding/)** — player embed code, sizes, and parameters 2. **[Playlists](https://docs.kinescope.com/catalog-and-video-management/playlists/)** — how to build a playlist in the catalog 3. **[Working with files: subtitles, chapters, and more](https://docs.kinescope.com/catalog-and-video-management/working-with-files/)** — how to add chapters to a video 4. **[Player customization](https://docs.kinescope.com/video-player/player-customization/)** — the player's look and feel for your brand > **Информация:** **For developers:** how to define a playlist from code and control the player through the IFrame API — in the [player documentation](https://docs.kinescope.com/player-docs/playlists/). Still have questions? Write to the support chat within the Kinescope interface — our specialists will help!