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.

No entries

Diagram in Google Sheets

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

Chessboard

Chessbase.com 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 9blox.com.

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.
@jasonstathamtiktok

#jasonstatham #fastandfurious #fypシ

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

Flickr Photo Album

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

Test

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.

Payment methods

This block will display various payment methods.

More infoThis block will display buttons (and if chosen, QR codes) to your visitors so they can pay you, e.g. for donations. You have to register separately at these payment providers (see below); 9Blox.com will not process payments, but instead lead your visitors to the respective payment website / App! Play around with random data at first, if you want.
TradingView and adjust your widget. Note that the width should not be more than 320 pixels. Using "auto-size" is best.

' placeholder='Headline, e.g. "Please donate!"' id='paymentheadline' />

Payment options:

More infoThis will show a Paypal button with a Paypal-me link.
  • Users can pay with: Paypal, Credit Cards.
  • Charges and fees: Payments received via 'Family & Friends' (as chosen by the paying user) are normally free of charge, but commercial payments incur a fee.
  • Required from you: You need a (free) Paypal account.
You need to state your Paypal.me-name (just the name, not the full link).  Learn more.
e.g. https://www.paypal.com/paypalme/FrankDux

More infoThis will show a Revolut button with a Revolut username.
  • Users can pay with: Revolut, Credit Cards, Google Pay, Apple Pay.
  • Charges and fees: Payments received via Revolut are free of charge. This means you can also receive payments via Google Pay and Apple Pay free of charge!
  • Required from you: You need a (free) Revolut account.
You need to state your Revolut.me-name (just the name, not the full link).  Learn more.
e.g. https://revolut.me/frankdux

More infoThis will show a Buy me a coffee button with a Buy me a coffee username. It points to a special page which you design at Buymeacoffeec.com. You may also use the Stripe payment method (see below) directly.
  • Users can pay with: Paypal, Credit Cards, Google Pay, Apple Pay.
  • Charges and fees: Payments received via Credit Cards, Apple Pay, Google Pay are handled via Stripe and thus incur a fee, see below.
  • Required from you: You need a (free) Buy me a coffee account.
You need to state your Buy me a Coffee name (just the name, not the full link).  Learn more.
e.g. https://www.buymeacoffee.com/frankdux

More infoThis will show a Stripe button with a personal Stripe payment link. You need to state the requested amount; the user cannot change it. Stripe is a payment provider which offers many different payment methods.
  • Users can pay with: Paypal, Credit Cards, Google Pay, Apple Pay and more, depending on your configuration.
  • Charges and fees: Payments received via Credit Cards, Apple Pay, Google Pay incur a fee, which is notable especially on small amounts!
  • Required from you: You need a (free) Stripe account and you need to create a personal payment link.
You need to state the customized part of the Stripe payment link.  Learn more.
e.g. https://buy.stripe.com/fZe8yXc1n7AI9kQ001

More infoThis will show a Bitcoin button with your Bitcoin address.
  • Users can pay with: Bitcoin
  • Charges and fees: Payments received via Bitcoin may incur a fee, depending on your provider.
  • Required from you: You need a Bitcoin address. Google for more info, e.g. about Coinbase or Bitcoin.com.
You need to state your Bitcoin address.
e.g. bitcoin:3Mv6AgsxsS82ffcE2iqLiTnTxKJjJBDjLf

Cancel

Clock widgets

Go to www.booked.net/widgets/clock and choose a clock type, then embed it in an iFrame.


© 2021 Frank Dux
Imprint/Privacy
9blox.com: Logo
Twitter
WhatsApp
Email
Facebook