iFrame integration!

This page shows some examples for iFrame integration to In general it's always the same:

  1. Search for the service you want to integrate
  2. Copy the iFrame integration code to embed the site or widget
  3. Create a code block on your page
  4. Copy the iFrame integration code into it and add your own HTML if needed.
  5. If needed, adapt the width and height attributes in the code. Both should be "100%" if possible, otherwise set width to "320" for one-column and to "660" for two-column blocks. Height can be anything, e.g. "500".

Click here for detailed help on

Weather forecast

Go to Meteoblue and set up a widget. Copy the iFrame code into a code block and add your own HTML if needed.


You may also want to check the weather widgets at

Spotify playlist

Go to Spotify on the web, choose your playlist, click on the three dots, 'Share' and 'Copy embed code'. Then copy the iFrame code in a code block.

You can also add playlists from SoundCloud or Deezer.

Instagram Share

Open instagram from your web browser, choose a photo you shared. At the top right there is a 3-dot menu. Click it, choose 'Embed' and copy that code into a code block.

View this post on Instagram

A post shared by Frank D (@frankdux_germany)

Google Sheets

Go to your Google Sheet, click on 'File', 'Publish to the web', choose 'Embed' and copy the iFrame code in a code block.

YouTube video

Choose your YouTube video, go to 'Share', 'Embed'. Then copy the iFrame code in a code block. Change the width to 100% and height attributes to e.g. 500, otherwise the video may spill over.

Note that there is a specific block type for embedding YouTube videos to make it even easier

Any website

You can basically integrate any website, but note that our widgets are only 320 pixels wide (including some padding), so an embedded website may not look so good. You should use the extended widget width (2 columns) for more horizontal space.

Google calendar

Create a public calendar in Google, look at the "calendar integration" options and copy the iFrame-code to a code block. Please adjust the width in the copied code to "300". You can also adjust some settings within Google.

Note that you can use the 'calendar integration' block type for an easier (and prettier) way to integrate a Google calendar as shown here.

No entries

Diagram in Google Sheets

Read more about integrating a diagram fed with live data from Google Sheets.

Chessboard offers several chess boards and exercises for integration.

You can also have a look at PlayPager

Photo albums

Look at Albumizr to create a photo album which can be embedded with an iFrame.

  1. Upload your photos there
  2. Click on Embed
  3. Copy the generated code into an iFrame block (and adjust the width to 340 px for standard-width blocks)

... or look at the Flickr Album integration.

Dropbox integration

You can add files (e.g. photos) from Dropbox. This offers a whole new world of possibilities. For example, you can sync photos from your mobile phone automatically to Dropbox and share these photos to

Read more.

TikTok video

Choose your video on TikTok, share it with option "Embed". Copy the code into an iFrame block.
Set the width and max-width attributes in that code to 300px.

#jasonstatham #fastandfurious #fypシ

♬ See You Again (feat. Charlie Puth) - Wiz Khalifa

Flickr Photo Album

You can embed a photo album from Flickr: Go to, create an album and add photos to it, then click on 'Share', 'Embed' and choose 'Small' as size (320x240).


Note that the album (and thus the photos as well) have to be public. Sometimes there seems to be a delay when adding photos to an album on-the-fly from the Flickr App.

iFrame block

Displays iFrame content. Copy your HTML here. See some examples. This block type requires a premium access.

Frank, 06.11.21, 23:37

Clock widgets

Go to and choose a clock type, then embed it in an iFrame.

© 2021 Frank Dux
Imprint/Privacy Logo