Skip to main content

How can I embed content from Pics.io into another online page via iFrame?

Learn how to load a single file or a folder from Pics.io into another web resource.

Written by Eugene

An iFrame is a window frame that is set inside your web page and contains some content from any other site. iFrames are commonly used on websites that need to include external content like a Google map or a video from YouTube.

If you might need to build a single asset or a Pics.io collection for your website, you can use iFrame for this purpose.

NB! Please be advised that only jpeg, png, and jpg formats can be embedded in external websites.


To embed a collection:

  • Create a collection-based website from the collection you’re going to embed;

  • Navigate to the Website settings by clicking the Globe icon appearing when hovering over a collection name;

  • Copy the website link from the "Main" section of the settings;

  • Paste it into an iFrame string.

Here is an example of what the string should look like:

<iframe src="https://show.pics.io/my_collection" width="468" height="400" />

To embed a single file:

  • Share the asset that should be embedded;

  • Open the sharing settings by clicking the Globe icon over the file thumbnail or open the Infopanel;

  • Copy the link from the Direct URL for embedding the field.

!NB! To use the Direct URL for embedding, you'll need to insert it into an <img> tag, not into iFrame.
​
​


​

!NB! For the file you'd like to embed to be accessible on the web, it should be shared first or it should be a part of a shared collection (website).

To embed an Inbox:

  • Create an Inbox you want to embed on your webpage;

  • Make sure it's published, which makes it visible outside Pics.io;

  • Hover over the Inbox name and click three vertical dots to copy the inbox link to the clipboard;

  • Paste it into an iFrame string.

Tip: Embedding an inbox to your website will ease you through the process of receiving assets directly into your Pics.io library.


Can I embed a password-protected link to my website?

It's possible to use password protection for inboxes, assets, or collections shared via iFrame. Once embedded via iFrame, a password authorization will be required to access the contents just the same as when accessing a password-protected inbox, collection, or asset via a regular link to it.
​

That allows you to limit access, or create another security layer to the contents on your website if you create it through Pics.io and set the password authorization on it.

Did this answer your question?