Edit page
Getting Started
Components
HelpCodePenCodeSandboxFlickrGistInstagramSoundCloudSpotifyTwitchTweetVimeoYouTube

Help 💁‍♂️

Here you'll find documentation about how to use each of the components and where to source the embed codes from for each of the providers.

CodePen

To embed a CodePen using the <CodePen /> component grab the codePenId from the URL.

https://codepen.io/team/codepen/pen/PNaGbb

The codePenId is this bit.

PNaGbb

Then use it in the component like this.

<CodePen codePenId="PNaGbb" />

CodeSandbox

To embed a CodeSandbox using the <CodeSandbox /> component grab the codeSandboxId from the URL.

https://codesandbox.io/s/react-new

The codeSandboxId is this bit.

react-new

Then use it in the component like this.

<CodeSandbox codeSandboxId="react-new" />

Flickr

To embed a Flickr image using the <Flickr /> component find the img src in the Embed code.

<a
data-flickr-embed="true"
data-header="true"
data-footer="true"
href="https://www.flickr.com/photos/123516006@N05/30740580204/in/photolist-NQrvvw-x6jo9P-rMq58s-QXKf3x-qYKbuJ-QN44WS-B43xuX-E84iyH-d9WVUR-Cvdvvu-tiBRv3-NoUEMi-23Mf13i-QZ1tX1-xUXBU1-ripXpz-tdLNbN-spCQTK-Hudqfd-DFCyKN-22KD9n1-qgCP7L-24c2WZ6-RK7QPX-AZpKwi-2d4qbWD-Ck1eXd-ranHVb-BAYBKs-G9ACAJ-CHCrGV-vosLmw-DwYQvn-QSV4XU-Bkad8D-QF8GFf-s79L6o-ERMGQG-L596Ei-Q7D5DW-JzoGNT-BPaVP2-zpCDzE-zD396a-D8vtD2-sEj6Nx-DnmS36-TuEijJ-YhiQwz-22iLYzg"
title="Sunset"
><img
src="https://live.staticflickr.com/458/30740580204_7283c9987e_k.jpg"
width="2048"
height="1167"
alt="Sunset"
/></a>
<script
async
src="//embedr.flickr.com/assets/client-code.js"
charset="utf-8"
></script>

The img src is this bit.

458/30740580204_7283c9987e_k.jpg

Then use it in the component like this.

<Flickr flickrLink="458/30740580204_7283c9987e_k.jpg" />

Gist

To embed an Gist using the <Gist /> component grab the username and id from the Gist URL.

https://gist.github.com/PaulieScanlon/ca0cc9239176066492cb2aba435edbf7#file-gatsby-mdx-embed-html

The username and id are these bits.

PaulieScanlon/ca0cc9239176066492cb2aba435edbf7

Then use it in the component like this.

<Gist gistLink="PaulieScanlon/ca0cc9239176066492cb2aba435edbf7" />

Instagram

To embed an Instagram post using the <Instagram /> component grab the instagramId from the posts URL.

https://www.instagram.com/p/B7ISOoHne6s/

The instagramId is this bit.

B7ISOoHne6s

Then use it in the component like this.

<Instagram instagramId="B7ISOoHne6s" />

SoundCloud

To embed a SoundCloud player using the <SoundCloud /> component grab the tracks or albums and the id from the src URL in the Embed code.

<iframe
width="100%"
height="166"
scrolling="no"
frameborder="no"
allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/499997862&color=%23ff00f5&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
></iframe>

The tracks or album and id are these bits.

tracks/499997862

Then use it in the component like this.

<SoundCloud soundCloudLink="tracks/499997862" />

Spotify

To embed a Spotify player using the <Spotify /> component open the Spotify app and from the share menu grab the track or album and the id from the src URL in the Embed code.

<iframe
src="https://open.spotify.com/embed/album/65KwtzkJXw7oT819NFWmEP"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
></iframe>
<iframe
src="https://open.spotify.com/embed/track/3982V8R7oW3xyV8zASbCGG"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
></iframe>

The track or album and id are these bits.

album/65KwtzkJXw7oT819NFWmEP

Then use it in the component like this.

<Spotify spotifyLink="album/65KwtzkJXw7oT819NFWmEP" />

Twitch

To embed a Twitch video using the <Twitch /> component grab the twitchId from the share Video Link URL.

https://www.twitch.tv/videos/510143691

The twitchId is this bit.

510143691

Then use it in the component like this.

<Twitch twitchId="510143691" />

Tweet

To embed a Tweet using the <Tweet /> component open the menu next to any Tweet and grab the username, status and id from the Embed Tweet URL.

https://twitter.com/PaulieScanlon/status/1201514996838141952

The username, status and id are these bits.

PaulieScanlon/status/1201514996838141952

Then use it in the component like this.

<Tweet tweetLink="PaulieScanlon/status/1201514996838141952" />

Vimeo

To embed a Vimeo video using the <Vimeo /> component grab the vimeoId from the URL.

https://vimeo.com/38445453

The vimeoId is this bit.

38445453

Then use it in the component like this.

<Vimeo vimeoId="38445453" />

YouTube

To embed a YouTube video using the <YouTube /> component grab the youTubeId from the URL.

https://www.youtube.com/watch?v=WUgvvPRH7Oc

The youTubeId is this bit.

WUgvvPRH7Oc

Then use it in the component like this.

<YouTube youTubeId="WUgvvPRH7Oc" />