WidgetsKit

WidgetsKit adds experimental support for some widgets that use <iframe> to display various types of content. May not work properly in the current state.
== Services ==
* AllMyLinks
* Amazon Music
* Apple Music
* Apple Podcasts
* Google Forms
* itch.io
* Medal
* Pinterest
* Sketchfab
* p3d.in
* Steam
* TikTok
== Installation ==
== Usage ==
: data-type="service:type" data-width="width" data-height="height" data-id="id:additional_settings">
Inline styles on the placeholder are copied across to the <iframe>. To center the <iframe>, use style="display: block; margin: 0 auto". To align the <iframe> to the right (in LTR languages), use style="float: right" or style="display: block; margin-left: auto".
=== AllMyLinks ===
Attribute 	Description
data-type 	allmylinks
data-width 	width: Width of the iframe (in pixels, numbers only).
Example:
1280
Default:
395
data-height	height: Height of the iframe (in pixels, numbers only).
Example:
720
Default:
163
data-id 	username:theme:size
username: The name of the user on AllMyLinks
theme: The theme colour of the widget
size: The size option of the widget
https://allmylinks.com/widget/profile/username.html?dark=0&big=0
Example:
https://allmylinks.com/widget/profile/wikia.html?dark=1&big=1
Example of the end result:
 data-type="allmylinks" data-width="395" data-height="163" data-id="wikia:light:small">	Example of the end result:
 data-type="allmylinks" data-width="395" data-height="163" data-id="wikia:light:small">
=== Amazon Music ===
Attribute 	Description
data-type 	amazonmusic
data-width 	width: Width of the iframe in pixels.
Example:
500
Default:
300
data-height	height: Height of the iframe in pixels.
Example:
352
Default:
410
data-id 	asin
asin: 10-character alphanumeric Amazon Standard Identification Number for the artist, album, or track.
https://music.amazon.com/artists/asin/optional-artist-name-slug
https://music.amazon.com/albums/asin
https://music.amazon.com/tracks/asin
Examples:
https://music.amazon.com/artists/B001APGX1Y/bo-burnham
https://music.amazon.com/albums/B09BK3B29V
https://music.amazon.com/tracks/B09BK34H6P?marketplaceId=XXXXXXXXXXXXXX&musicTerritory=XX&ref=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Example of the end result:
 data-type="amazonmusic" data-width="500" data-height="352" data-id="B09BK34H6P">	Example of the end result:
 data-type="amazonmusic" data-width="500" data-height="352" data-id="B09BK34H6P">
=== Apple Music ===
Attribute 	Description
data-type 	applemusic:album or applemusic:track
data-width 	width: Width of the iframe in pixels.
Example:
660
Default:
300
data-height	height: Height of the iframe in pixels.
Example:
450 (for albums) or 175 (for tracks)
Default:
300 (for albums) or 120 (for tracks)
data-id 	album_id:track_id
album_id: Apple Music album ID. Required for both albums and tracks.
https://music.apple.com/us/album/optional-album-title-slug/album_id
Example:
https://music.apple.com/us/album/kingdom-hearts-iii-ii-8-unchained-%CF%87-union-%CF%87-cross-original/1536667542
track_id: Apple Music track ID. Only specify this for tracks.
https://music.apple.com/us/album/optional-track-title-slug/album_id?i=track_id
Example:
https://music.apple.com/us/album/dearly-beloved-kingdom-hearts-iii-version/1536667542?i=1536667548
Examples of the end result:
 data-type="applemusic:album" data-width="660" data-height="450" data-id="1536667542">
 data-type="applemusic:track" data-width="660" data-height="175" data-id="1536667542:1536667548">	Examples of the end result:
 data-type="applemusic:album" data-width="660" data-height="450" data-id="1536667542">
 data-type="applemusic:track" data-width="660" data-height="175" data-id="1536667542:1536667548">
=== Apple Podcasts ===
Attribute 	Description
data-type 	applepodcasts:show or applepodcasts:episode
data-width 	width: Width of the iframe in pixels.
Example:
660
Default:
300
data-height	height: Height of the iframe in pixels.
Example:
450 (for shows) or 175 (for episodes)
Default:
450 (for shows) or 175 (for episodes)
data-id 	show_id:episode_id
show_id: Apple Podcasts show ID. Required for both shows and episodes.
https://podcasts.apple.com/us/podcast/optional-show-name-slug/idshow_id
Example:
https://podcasts.apple.com/us/podcast/welcome-to-night-vale/id536258179
episode_id: Apple Podcasts episode ID. Only specify this for episodes.
https://podcasts.apple.com/us/podcast/optional-episode-title-slug/idshow_id?i=episode_id
Example:
https://podcasts.apple.com/us/podcast/1-pilot/id536258179?i=1000366951147
Examples of the end result:
 data-type="applepodcasts:show" data-width="660" data-id="536258179">
 data-type="applepodcasts:episode" data-width="660" data-id="536258179:1000366951147">	Examples of the end result:
 data-type="applepodcasts:show" data-width="660" data-id="536258179">
 data-type="applepodcasts:episode" data-width="660" data-id="536258179:1000366951147">
=== Google Forms ===
Attribute 	Description
data-type 	googleforms
data-width 	width, height
width: Width of the iframe (in pixels, numbers only).
Example:
550
Default:
500
height: Height of the iframe (in pixels, numbers only).
Example:
600
Default:
500
data-height	width, height
width: Width of the iframe (in pixels, numbers only).
Example:
550
Default:
500
height: Height of the iframe (in pixels, numbers only).
Example:
600
Default:
500
data-id 	form_id
form_id: ID of the form from
https://docs.google.com/forms/d/e/form_id/viewform
Example:
https://docs.google.com/forms/d/e/1FAIpQLSd8S8bfNaikYvEnRzqCWVypXMwRtbVvqHCBNZAgoZ2jkFr7CA/viewform
Example of the end result:
 data-type="googleforms" data-width="550" data-height="600" data-id="1FAIpQLSd8S8bfNaikYvEnRzqCWVypXMwRtbVvqHCBNZAgoZ2jkFr7CA">	Example of the end result:
 data-type="googleforms" data-width="550" data-height="600" data-id="1FAIpQLSd8S8bfNaikYvEnRzqCWVypXMwRtbVvqHCBNZAgoZ2jkFr7CA">
=== Google Spreadsheets ===
Attribute 	Description
data-type 	googlespreadsheets
data-width 	width: Width of the iframe (in pixels, numbers only).
Example:
550
Default:
680
data-height	height: Height of the iframe (in pixels, numbers only).
Example:
200
Default:
380
data-id 	spreadsheet_id
spreadsheet_id: ID of the spreadsheet, obtained by going to File > Publish to Web..., selecting Link, then clicking Publish
https://docs.google.com/spreadsheets/d/e/spreadsheet_id/pubhtml
Example:
https://docs.google.com/forms/d/e/2PACX-1vREPYO-TYbMEOkrL2bJXQrkJH-_HNLn0aikXjnEKBnoG7ZSMt1tu6uw9PY3iAAIIOYmPAHGwAPvJcRV/pubhtml
Example of the end result:
 data-type="googlespreadsheets" data-width="550" data-height="200" data-id="2PACX-1vREPYO-TYbMEOkrL2bJXQrkJH-_HNLn0aikXjnEKBnoG7ZSMt1tu6uw9PY3iAAIIOYmPAHGwAPvJcRV">	Example of the end result:
 data-type="googlespreadsheets" data-width="550" data-height="200" data-id="2PACX-1vREPYO-TYbMEOkrL2bJXQrkJH-_HNLn0aikXjnEKBnoG7ZSMt1tu6uw9PY3iAAIIOYmPAHGwAPvJcRV">
=== itch.io ===
Attribute 	Description
data-type 	itchio
data-width 	Not supported
data-height	Not supported
data-id 	game_id:theme
game_id: ID of the game from clicking on "Related games"
https://itch.io/games-like/game_id/game-name
Example:
https://itch.io/games-like/257677/among-us
theme: The theme to use for the widget.
Example:
light (default for light themed wikis) or dark (default for dark themed wikis)
Example of the end result:
 data-type="itchio" data-id="257677:dark">	Example of the end result:
 data-type="itchio" data-id="257677:dark">
=== Medal ===
Attribute 	Description
data-type 	medal
data-width 	width: Width of the iframe (in pixels, numbers only).
Example:
1280
Default:
640
data-height	height: Height of the iframe (in pixels, numbers only).
Example:
720
Default:
360
data-id 	game:clip_id
game: The name of the game the clip is from
https://medal.tv/games/game/clips/clip_id/temporary_id
Example:
https://medal.tv/games/euro-truck-simulator-2/clips/D3m8mZaqsxx20/slIuoqZ6vIYI
clip_id: The ID from the clip.
https://medal.tv/games/game/clips/clip_id/temporary_id
Example:
https://medal.tv/games/euro-truck-simulator-2/clips/D3m8mZaqsxx20/slIuoqZ6vIYI
Example of the end result:
 data-type="medal" data-id="euro-truck-sim-2:D3m8mZaqsxx20" data-width="640" data-height="360">	Example of the end result:
 data-type="medal" data-id="euro-truck-sim-2:D3m8mZaqsxx20" data-width="640" data-height="360">
=== Pinterest ===
Attribute 	Description
data-type 	pinterest
data-width 	width: Width of the iframe (in pixels, numbers only).
Example:
345
Default:
236
data-height	height: Height of the iframe (in pixels, numbers only).
Example:
532
Default:
390
data-id 	pin_id
pin_id: ID of the pin from
https://www.pinterest.com/pin/pin_id
Example:
https://www.pinterest.com/pin/509962357814086603
Example of the end result:
 data-type="pinterest" data-id="509962357814086603">	Example of the end result:
 data-type="pinterest" data-id="509962357814086603">
=== Sketchfab ===
Attribute 	Description
data-type 	sketchfab
data-width 	Not supported
data-height	Not supported
data-id 	model_id
model_id: ID of the model from
https://sketchfab.com/3d-models/model-name-model_id
Example:
https://sketchfab.com/3d-models/doomhammer-7b08add6fb40478a9bc465a8ef0d8ffb
Example of the end result:
 data-type="sketchfab" data-id="7b08add6fb40478a9bc465a8ef0d8ffb">	Example of the end result:
 data-type="sketchfab" data-id="7b08add6fb40478a9bc465a8ef0d8ffb">
=== p3d.in ===
Attribute 	Description
data-type 	p3din
data-width 	width: Width of the iframe (in pixels, numbers only).
Example:
345
Default:
640
data-height	height: Height of the iframe (in pixels, numbers only).
Example:
532
Default:
480
data-id 	pin_id
pin_id: ID of the pin from
https://p3d.in/id
Example:
https://p3d.in/QvKGR
Example of the end result:
 data-type="p3din" data-id="QvKGR">	Example of the end result:
 data-type="p3din" data-id="QvKGR">
=== Steam ===
Attribute 	Description
data-type 	steam
data-width 	width: Width of the iframe (in pixels, numbers only).
Example:
760
Default:
646
data-height	Not supported (fixed to 190px)
data-id 	game_id:custom_description
game_id: ID of the game from
https://store.steampowered.com/app/game_id/Game_Title/
Example:
https://store.steampowered.com/app/620/Portal_2/
custom_description: Any text that can be used as a custom description for the referred game.
Example:
This is a great puzzle game that you should definitely play.
Example of the end result:
 data-type="steam" data-id="620:This is a great puzzle game that you should definitely play.">	Example of the end result:
 data-type="steam" data-id="620:This is a great puzzle game that you should definitely play.">
=== TikTok ===
Attribute 	Description
data-type 	tiktok
data-width 	width: Width of the iframe (in pixels, numbers only).
Example:
250
Default:
605
data-height	height: Height of the iframe (in pixels, numbers only).
Example:
500
Default:
730
data-id 	video_id
video_id: ID of the video from
https://tiktok.com/@user/video/video_id
Example:
https://tiktok.com/@tiktok/video/6907709736355908869
Example of the end result:
 data-type="tiktok" data-width="250" data-height="500" data-id="6907709736355908869">	Example of the end result:
 data-type="tiktok" data-width="250" data-height="500" data-id="6907709736355908869">
== See also ==
* AudioIntegrator
* BandcampPlayer
* BandcampLazyloader
* SoundcloudPlayer
* VideoIntegrator