Integration

iFrame integration!

This page shows some examples for iFrame integration to 9blox.com. 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 9blox.com.

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.

meteoblue

You may also want to check the weather widgets at theweather.com/widget/

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.