Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 11 additions & 26 deletions source/_lovelace/iframe.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,47 @@
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
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/<file>`.
Embed data from other webservices in your dashboard. You can also embed files stored in your `<config-directory>/www` folder and reference them using `/local/<file>`.

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

<p class='img'>
<img width="500" src='/images/lovelace/lovelace_iframe.png' alt='Screenshot of the iframe card'>
Screenshot of the iframe card.
<img width="500" src='/images/lovelace/lovelace_iframe.png' alt='Windy weather radar as iframe'>
Windy weather radar as iframe.
</p>

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 `<config>/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
description: iframe
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%
```
Binary file modified source/images/lovelace/lovelace_iframe.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.