diff --git a/docs/widgets.md b/docs/widgets.md
index f0740f7c..cfc60ef6 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -14,10 +14,11 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
- [Exchange Rates](#exchange-rates)
- [Stock Price History](#stock-price-history)
- [Joke of the Day](#joke)
+ - [Flight Data](#flight-data)
- [Self-Hosted Services Widgets](#dynamic-widgets)
- [Dynamic Widgets](#dynamic-widgets)
- [Iframe Widget](#iframe-widget)
- - [HTML Widget](#html-widget)
+ - [HTML Embed Widget](#html-embedded-widget)
- [Build your own Widget](#build-your-own-widget)
## General Widgets
@@ -330,12 +331,31 @@ Embed any webpage into your dashboard as a widget.
--- | --- | --- | ---
**`url`** | `string` | Required | The URL to the webpage to embed
+### HTML Embedded Widget
+
+Many websites and apps provide their own embeddable widgets. These can be used with Dashy using the Embed widget, which lets you dynamically embed and HTML, CSS or JavaScript contents.
+
+⚠️ **NOTE:** Use with extreme caution. Embedding a script from an untrustworthy source may have serious unintended consequences.
+
+

+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`html`** | `string` | _Optional_ | HTML contents to render in the widget
+**`script`** | `string` | _Optional_ | Raw JavaScript code to execute (caution)
+**`scriptSrc`** | `string` | _Optional_ | A URL to JavaScript content (caution)
+**`css`** | `string` | _Optional_ | Any stylings for widget contents
+
##### Example
```yaml
-- type: iframe
- options:
- url: https://fiatleak.com/
+- type: embed
+ options:
+ css: '.coinmarketcap-currency-widget { color: var(--widget-text-color); }'
+ html: ''
+ scriptSrc: 'https://files.coinmarketcap.com/static/widget/currency.js'
```
---
diff --git a/src/components/Widgets/EmbedWidget.vue b/src/components/Widgets/EmbedWidget.vue
new file mode 100644
index 00000000..949197ed
--- /dev/null
+++ b/src/components/Widgets/EmbedWidget.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 0e77e953..06fd29d7 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -102,6 +102,13 @@
@error="handleError"
:ref="widgetRef"
/>
+
{{ handleError('No widget type was specified') }}
@@ -127,8 +134,9 @@ import XkcdComic from '@/components/Widgets/XkcdComic.vue';
import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
import StockPriceChart from '@/components/Widgets/StockPriceChart.vue';
import Jokes from '@/components/Widgets/Jokes.vue';
-import IframeWidget from '@/components/Widgets/IframeWidget.vue';
import Flights from '@/components/Widgets/Flights.vue';
+import IframeWidget from '@/components/Widgets/IframeWidget.vue';
+import EmbedWidget from '@/components/Widgets/EmbedWidget.vue';
export default {
name: 'Widget',
@@ -147,8 +155,9 @@ export default {
ExchangeRates,
StockPriceChart,
Jokes,
- IframeWidget,
Flights,
+ IframeWidget,
+ EmbedWidget,
},
props: {
widget: Object,