CheerLights JavaScript Widgets

CheerLights JavaScript Widgets are a collection of embeddable widgets that display the current CheerLights color on web pages. They leverage the CheerLights JavaScript library to fetch the current color and display it. You can find the CheerLights JavaScript library on GitHub.

Solid Color Background

This widget displays the background color set to the latest CheerLights color.

Solid Color Background CheerLights Widget

CheerLights Logo

This widget displays the CheerLights logo with a background color that changes to the current CheerLights color.

CheerLights Logo CheerLights Widget

FearLights Logo

This widget displays the FearLights logo with a background color that changes to the current CheerLights color. This is a Halloween-themed widget.

FearLights Logo CheerLights Widget

Snow

This widget displays falling snowflakes using the CheerLights JavaScript library.

Snow CheerLights Widget

Lanterns

This widget displays lanterns using the CheerLights JavaScript library.

Lanterns CheerLights Widget

Leaves

This widget displays falling leaves using the CheerLights JavaScript library.

Leaves CheerLights Widget

Aurora

This widget displays a dynamic aurora inspired by the current CheerLights color.

Aurora CheerLights Widget

Particle

This widget displays a particle effect inspired by the current CheerLights color. Move your mouse over the widget to interact with it.

Particle CheerLights Widget

Digital Clock

This widget displays a 7-segment digital clock with a background color that changes to the current CheerLights color.

Digital Clock CheerLights Widget

Embed CheerLights Widgets on a Home Assistant Dashboard

To embed CheerLights widgets on a Home Assistant dashboard, follow these steps:

1. Open Home Assistant: Open your Home Assistant instance in a web browser.

2. Navigate to the Dashboard: Go to the dashboard where you want to add the CheerLights widget.

3. Edit the Dashboard: Click on the three dots menu in the top right corner and select "Edit Dashboard".

4. Add a New Card: Click on the "Add Card" button to add a new card to your dashboard.

5. Select the "Webpage" Card: Scroll down and select the "Webpage" card option. This allows you to embed a webpage.

6. Enter the Widget URL: Enter the URL of the CheerLights widget you want to embed (e.g. https://widgets.cheerlights.com/snow.html).

7. Save the Card: Click on the "Save" button to save the new card to your dashboard.

Embed CheerLights Widgets on a WordPress Site

To embed CheerLights widgets on a WordPress site, follow these steps:

1. Add a new block
2. Search for “Shortcode”
3. Copy iframe code and adjust the src, width, and height as needed