Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

How can I embed a collection with an iframe?

Original title: embed collections

A topic by Dev Vand™ created Sep 19, 2024 Views: 1,963 Replies: 2
Viewing posts 1 to 2
(+1)

 such as

but for collections

so we can embed lists everywhere

Admin (5 edits) (+1)

I don’t believe our documentation mentions this, but here’s how embedding a collection works:

Take the URL of a collection, eg. /c/71828/interesting-stuff and change it to /embed-collection/71828. (Note you must keep the ID number the same).

Then you can use that URL in the src attribute of an iframe.

You can customize the theme of the embedded collection with the following query parameters in the URL:

  • fg_color: Foreground color in hexadecimal format.
  • bg_color: Background color in hexadecimal format.
  • link_color: Link color in hexadecimal format.
  • font: Font family, must be name of a valid Google font.
  • font_size: Font size, integer value between 25 and 200.
  • border_radius: Border radius, integer value between 0 and 50.

Here’s an example of a customized embed: /embed-collection/71828?border_radius=5&fg_color=ffffff&bg_color=000000&link_color=7777aa

I’ve tried this myself and while it works in your post if I try to embed in my blog I get the error:

Firefox Can’t Open This Page

To protect your security, itch.io will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.

I don’t know if this is intentional or an oversight. Normal embeds work fine. The HTTP response has the header “x-frame-options SAMEORIGIN” which I think causes this.