Fandom Developers Wiki
Fandom Developers Wiki
Fandom Developers Wiki
3,279
pages
in: JavaScript, JavaScript/Site integration, Stable, JavaScript/Site-wide use

WidgetsKit

Sign in to edit

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[]

Installation[]

Usage[]

<div data-type="service:type" data-width="width" data-height="height" data-id="id:additional_settings"></div>

Inline styles on the placeholder <div> 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:

<div data-type="allmylinks" data-width="395" data-height="163" data-id="wikia:light:small"></div>

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:

<div data-type="amazonmusic" data-width="500" data-height="352" data-id="B09BK34H6P"></div>

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:

<div data-type="applemusic:album" data-width="660" data-height="450" data-id="1536667542"></div>
<div data-type="applemusic:track" data-width="660" data-height="175" data-id="1536667542:1536667548"></div>

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:

<div data-type="applepodcasts:show" data-width="660" data-id="536258179"></div>
<div data-type="applepodcasts:episode" data-width="660" data-id="536258179:1000366951147"></div>

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
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:

<div data-type="googleforms" data-width="550" data-height="600" data-id="1FAIpQLSd8S8bfNaikYvEnRzqCWVypXMwRtbVvqHCBNZAgoZ2jkFr7CA"></div>

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:

<div data-type="googlespreadsheets" data-width="550" data-height="200" data-id="2PACX-1vREPYO-TYbMEOkrL2bJXQrkJH-_HNLn0aikXjnEKBnoG7ZSMt1tu6uw9PY3iAAIIOYmPAHGwAPvJcRV"></div>

itch.io[]

Attribute Description
data-type itchio
data-width Not supported
data-height
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:

<div data-type="itchio" data-id="257677:dark"></div>

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:

<div data-type="medal" data-id="euro-truck-sim-2:D3m8mZaqsxx20" data-width="640" data-height="360"></div>

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:

<div data-type="pinterest" data-id="509962357814086603"></div>

Sketchfab[]

Attribute Description
data-type sketchfab
data-width Not supported
data-height
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:

<div data-type="sketchfab" data-id="7b08add6fb40478a9bc465a8ef0d8ffb"></div>

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:

<div data-type="p3din" data-id="QvKGR"></div>

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:

<div data-type="steam" data-id="620:This is a great puzzle game that you should definitely play."></div>

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:

<div data-type="tiktok" data-width="250" data-height="500" data-id="6907709736355908869"></div>

See also[]

Community content is available under CC-BY-SA unless otherwise noted.