sintonia/docs/developer-manual/widgets.md

---
title: Widgets
---

Bring your LibreTime broadcast to your website with embeddable widgets. LibreTime comes with two widgets: a streaming player and a schedule. Both widgets use iframes to display and can be placed wherever embeddable code can on a website.

## Getting started

Before using the widgets, make sure LibreTime's Public API is enabled in **Settings** > **General**.

![](./widgets-widgets_settings.png)

:::tip Note

LibreTime widgets can't function through VPNs or SSH tunneling. The instance must be accessible from the internet for the widgets to work.

:::

## Streaming player widget

The streaming player widget inserts your LibreTime stream into your website. One example is from [WRCS Community Radio](https://wcrsfm.org/) in Columbus, Ohio, USA.

<iframe frameborder="0" width="400" height="235" src="http://broadcast.wcrsfm.org/embed/player?stream=auto&title=Now Playing"></iframe>

![](./widgets-widgets_player.png)

From **Widgets** > **Player**, enter a title for your streaming widget and select what stream you'd like to use. All selectible streams must first be configured in **Settings** > **Streams** (see [Settings](../user-manual/settings.md)). **Auto detect** should be fine for most.

## Show schedule widget

![](./widgets-widgets_schedule.png)

The show schedule widget displays the upcoming shows for the next seven days. There are no customizable settings for this widget.
Assorted work 2020-11-10 05:19:28 +01:00			`---`
			`title: Widgets`
			`---`

docs: fix vale linting errors - are not > aren't - auto-_ > auto _ - avoid backend - cannot > can't - do not > don't - does not > doesn't - ignore emoji code - has not > hasn't - ignore Microsoft.GeneralURL - is not > isn't - it is > it's - no exclamation point - put code inside code blocks - put commit sha inside code blocks - put exception message in code blocks - remove slang - should not > shouldn't - they are > they're - we are > we're - will not > won't 2022-09-24 17:40:05 +02:00			`Bring your LibreTime broadcast to your website with embeddable widgets. LibreTime comes with two widgets: a streaming player and a schedule. Both widgets use iframes to display and can be placed wherever embeddable code can on a website.`
Continuing to edit docs 2020-11-19 17:59:27 +01:00
docs: fix prose linting errors - Properly enclose code between triple backticks - Put paths and url between backticks - Remove links <> enclosing - Libretime styled name is LibreTime - Put urls and paths betwen backticks - Use sentence like capitalization for headings - Put tools name between backticks - Update links 2022-02-10 12:15:23 +01:00			`## Getting started`
Adding widgets doc 2020-12-02 21:06:10 +01:00
docs: fix prose linting errors - Properly enclose code between triple backticks - Put paths and url between backticks - Remove links <> enclosing - Libretime styled name is LibreTime - Put urls and paths betwen backticks - Use sentence like capitalization for headings - Put tools name between backticks - Update links 2022-02-10 12:15:23 +01:00			`Before using the widgets, make sure LibreTime's Public API is enabled in Settings > General.`
Adding widgets doc 2020-12-02 21:06:10 +01:00
docs: rework docs into the new website - multipass docs moved to local-dev.md - add documentation to website - rework fogotten files - disable fogotten files Co-authored-by: Zachary Klosko <zklosko@users.noreply.github.com> 2022-02-09 09:37:52 +01:00			`![](./widgets-widgets_settings.png)`
Adding widgets doc 2020-12-02 21:06:10 +01:00
docs: rework docs into the new website - multipass docs moved to local-dev.md - add documentation to website - rework fogotten files - disable fogotten files Co-authored-by: Zachary Klosko <zklosko@users.noreply.github.com> 2022-02-09 09:37:52 +01:00			`:::tip Note`

docs: fix vale linting errors - are not > aren't - auto-_ > auto _ - avoid backend - cannot > can't - do not > don't - does not > doesn't - ignore emoji code - has not > hasn't - ignore Microsoft.GeneralURL - is not > isn't - it is > it's - no exclamation point - put code inside code blocks - put commit sha inside code blocks - put exception message in code blocks - remove slang - should not > shouldn't - they are > they're - we are > we're - will not > won't 2022-09-24 17:40:05 +02:00			`LibreTime widgets can't function through VPNs or SSH tunneling. The instance must be accessible from the internet for the widgets to work.`
docs: rework docs into the new website - multipass docs moved to local-dev.md - add documentation to website - rework fogotten files - disable fogotten files Co-authored-by: Zachary Klosko <zklosko@users.noreply.github.com> 2022-02-09 09:37:52 +01:00
			`:::`
Adding note about need for public access for widgets 2020-12-02 21:10:48 +01:00
docs: fix prose linting errors - Properly enclose code between triple backticks - Put paths and url between backticks - Remove links <> enclosing - Libretime styled name is LibreTime - Put urls and paths betwen backticks - Use sentence like capitalization for headings - Put tools name between backticks - Update links 2022-02-10 12:15:23 +01:00			`## Streaming player widget`
Adding widgets doc 2020-12-02 21:06:10 +01:00
docs: fix prose linting errors - Properly enclose code between triple backticks - Put paths and url between backticks - Remove links <> enclosing - Libretime styled name is LibreTime - Put urls and paths betwen backticks - Use sentence like capitalization for headings - Put tools name between backticks - Update links 2022-02-10 12:15:23 +01:00			`The streaming player widget inserts your LibreTime stream into your website. One example is from [WRCS Community Radio](https://wcrsfm.org/) in Columbus, Ohio, USA.`
Adding widgets doc 2020-12-02 21:06:10 +01:00
			`<iframe frameborder="0" width="400" height="235" src="http://broadcast.wcrsfm.org/embed/player?stream=auto&title=Now Playing"></iframe>`

docs: rework docs into the new website - multipass docs moved to local-dev.md - add documentation to website - rework fogotten files - disable fogotten files Co-authored-by: Zachary Klosko <zklosko@users.noreply.github.com> 2022-02-09 09:37:52 +01:00			`![](./widgets-widgets_player.png)`
Adding widgets doc 2020-12-02 21:06:10 +01:00
docs: update structure and create links between pages (#1611) * docs: rework files structure * rewrite documentation entrypoint * update category files and use yml * add manuals entry page * update admin-manual titles and page order * create releases sections * move ssl configuration to reverse proxy * docs: update website vars and links * update release note codeblock syntax key * resurect troubleshooting guide * Update freeipa custom auth documentation * add notice about the state of the documentation * update the backup documentation * tmp: allow to deploy the website for preview * Don't use require.resolve for plugins * Update the main page link dest * update development environment title * rewrite the install/upgrade/migrate as guides * update website docs sections links * Fix urls * move release note to documentation * move home links to vars files * tmp: update deploy url * add react to tsconfig to handle jsx linting * fix: replace absolute url to relative path to files * tmp: allow CI Website dpeloy on working branch * Update release note title * use default syntax highlighting theme * update the troubleshooting guide * Wording * use CodeBlock components * Better prose * remove api_client config section * fix prose errors * update import prefix for vars file * reroder docs manuals links * use sentence capitalization for page titles * Wording * missing word * Update note about syslog log file * wording 2022-02-21 08:16:54 +01:00			`From Widgets > Player, enter a title for your streaming widget and select what stream you'd like to use. All selectible streams must first be configured in Settings > Streams (see [Settings](../user-manual/settings.md)). Auto detect should be fine for most.`
Adding widgets doc 2020-12-02 21:06:10 +01:00
docs: fix prose linting errors - Properly enclose code between triple backticks - Put paths and url between backticks - Remove links <> enclosing - Libretime styled name is LibreTime - Put urls and paths betwen backticks - Use sentence like capitalization for headings - Put tools name between backticks - Update links 2022-02-10 12:15:23 +01:00			`## Show schedule widget`
Adding widgets doc 2020-12-02 21:06:10 +01:00
docs: rework docs into the new website - multipass docs moved to local-dev.md - add documentation to website - rework fogotten files - disable fogotten files Co-authored-by: Zachary Klosko <zklosko@users.noreply.github.com> 2022-02-09 09:37:52 +01:00			`![](./widgets-widgets_schedule.png)`
Adding widgets doc 2020-12-02 21:06:10 +01:00
Format code using prettier 2021-05-27 16:20:34 +02:00			`The show schedule widget displays the upcoming shows for the next seven days. There are no customizable settings for this widget.`