2024.11.2
Home ▸ Dashboards ▸

Webpage card

The webpage card allows you to embed your favorite webpage right into Home Assistant. You can also embed files stored in your <config-directory>/www folder and reference them using /local/<file>.

The webpage card is used on the Webpage dashboard.

Windy weather radar as Webpage Windy weather radar as webpage.

To add the webpage card to your user interface:

  1. In the top right of the screen, select the edit button.
    • If this is your first time editing a dashboard, the Edit dashboard dialog appears.
      • By editing the dashboard, you are taking over control of this dashboard.
      • This means that it is no longer automatically updated when new dashboard elements become available.
      • Once you’ve taken control, you can’t get this specific dashboard back to update automatically. However, you can create a new default dashboard.
      • To continue, in the dialog, select the three dots menu, then select Take control.
  2. Add a card to your dashboard.

All options for this card can be configured via the user interface.

Note that not every webpage can be embedded due to security restrictions that some sites have in place. These restrictions are enforced by your browser and prevent embedding them into a Home Assistant dashboard.

Important

You can’t embed sites using HTTP if you are using HTTPS for your Home Assistant.

YAML configuration

The following YAML options are available when you use YAML mode or just prefer to use YAML in the code editor in the UI.

Configuration Variables

Looking for your configuration file?
type string Required

iframe

url string Required

Website URL.

aspect_ratio string (Optional, default: 50%)

Forces the height of the image to be a ratio of the width. Valid formats: Height percentage value (23%) or ratio expressed with colon or “x” separator (16:9 or 16x9). For a ratio, the second element can be omitted and will default to “1” (1.78 equals 1.78:1).

allow_open_top_navigation boolean (Optional, default: false)

Allow the user to open iframe content links by opening the default browser in the Home Assistant mobile app. It is false by default because it adds allow-top-navigation-by-user-activation on the iframe sandbox attribute which is less secure. So set it to true if you need it and are confident with the iframe content.

title string (Optional)

The card title.

allow string (Optional, default: fullscreen)

The Permissions Policy of the iframe, that is, the value of the allow attribute.

Examples 

type: iframe
url: https://www.home-assistant.io
aspect_ratio: 75%

Related topics