diff --git a/source/_lovelace/iframe.markdown b/source/_lovelace/iframe.markdown index f463ed45442..e054ddf7cf7 100644 --- a/source/_lovelace/iframe.markdown +++ b/source/_lovelace/iframe.markdown @@ -2,7 +2,7 @@ layout: page title: "iFrame Card" sidebar_label: iFrame -description: "Iframe cards are useful to embed outside websites in your dashboard with little effort. One such example is a Grafana view." +description: "Embed data from other webservices in your dashboard." date: 2018-07-01 10:28 +00:00 sidebar: true comments: false @@ -10,19 +10,15 @@ sharing: true footer: true --- -Iframe cards are useful to embed outside websites in your dashboard with little effort. One such example is a Grafana view. You can also embed files stored in your `config/www` folder and reference them using `/local/`. +Embed data from other webservices in your dashboard. You can also embed files stored in your `/www` folder and reference them using `/local/`. + +You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.

-Screenshot of the iframe card -Screenshot of the iframe card. + Windy weather radar as iframe + Windy weather radar as iframe.

-Make sure the URL you're embedding has the right protocol and allows to be embedded in an iframe on a different domain. For example, if your Home Assistant setup uses HTTPS, you won't be able to embed HTTP URLs. - -## {% linkable_title Options %} - -Create a new file `/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation. - {% configuration %} type: required: true @@ -30,34 +26,23 @@ type: type: string url: required: true - description: The iframe source URL. + description: Website URL. type: string aspect_ratio: required: false - description: The iframe height-width-ratio. + description: Height-width-ratio. type: string default: "50%" title: required: false description: The card title. type: string - default: none {% endconfiguration %} -**Reminder**: You can't mix HTTPS and HTTP content. So if your Home Assistant instance is accessed through HTTPS, you won't be able to display HTTP content in the iframe card. - -## {% linkable_title Examples %} - -```yaml - - type: iframe - url: https://worldpingdemo.grafana.net/d/000000027/worldping-endpoint-summary?var-endpoint=www_amazon_com&var-probe=All&panelId=2&fullscreen&orgId=3&theme=light - aspect_ratio: 100% -``` - -Local HTML for custom content. Place `example.html` in your `config/www` folder and reference it as below: +### {% linkable_title Examples %} ```yaml - type: iframe - url: /local/example.html - title: Sample local file + url: https://grafana.localhost/d/000000027/worldping-endpoint-summary?var-probe=All&panelId=2&fullscreen&orgId=3&theme=light + aspect_ratio: 75% ``` diff --git a/source/images/lovelace/lovelace_iframe.png b/source/images/lovelace/lovelace_iframe.png index 958824a5283..b25f1029d7d 100644 Binary files a/source/images/lovelace/lovelace_iframe.png and b/source/images/lovelace/lovelace_iframe.png differ