CheerLights JavaScript Widgets

We have created a GitHub repo of widgets that leverage the CheerLights JavaScript library. You can use the widgets on your webpage or embed them on your Home Assistant dashboard.

You can pick one widget you like, get the URL, and embed it using an iframe with the URL as the source.

WordPress

Use the “Shortcode” block in the editor to embed these widgets on your WordPress site.

CheerLights Logo Widget iframe code

[iframe src="https://cheerlights.com/widgets/snow.html" width="100%" height="200"]

Steps

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

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 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.

CheerLights Widget Links

• Solid Color Background: https://widgets.cheerlights.com/color.html
• CheerLights Logo: https://widgets.cheerlights.com/logo.html
• FearLights Logo: https://widgets.cheerlights.com/fearlights.html
• Snow: https://widgets.cheerlights.com/snow.html
• Lanterns: https://widgets.cheerlights.com/lanterns.html
• Leaves: https://widgets.cheerlights.com/leaves.html
• Aurora: https://widgets.cheerlights.com/aurora.html
• Particle: https://widgets.cheerlights.com/particle.html
• Digital Clock: https://widgets.cheerlights.com/clock.html

Let us know if you have any ideas for new widgets.