Ask a Question ?
Design & Publish Websites Faster

How the iFrame App Works

How the iFrame App Works

In this article we’ll explain how the iFrame App works.

If you’ve never heard of an iFrame before, this guide is right for you.

The i in iFrame stands for inline. A frame is a segment that can contain other documents (such as full websites).

So what an inline frame represents in our program is an element that displays an external website within a segment of your own site. It can also contain custom code – even if it’s not a full website.

Installation

You can install this app out of the App Store, just like any other.

App Store with the iFrame app highlighted

Drag the “Install New” button to your layout

Uses

There are two ways in which you can use the iFrame app:

  1. To display a website inline (right inside your page)
  2. To insert custom code

The first choice stands for a pretty simple concept. You have your pages, and inside one of them (for whatever reason) you want to show another site.

If your site is about motorcycles, you may put a Wikipedia article in an iframe to illustrate a particular related subject.

The second one, custom code, works just like the Embed HTML app. The difference being that the iFrame is a safer bet, because it puts the code in a frame.

The code you embed there, even if it’s invalid, won’t break your site. This is because technically, the code is not embedded in your site per se, but in an “external” frame (even if it’s displayed inline).

This is handier actually than the Embed HTML app for cases that you’re using third party code that you don’t fully trust, or otherwise have a concern that it may be incorrect or invalid.

Settings

There are 4 things you can edit on the iFrame app settings:

  1. iFrame URL: here you’ll paste the URL of the external site you want to embed in your site (unless you want to use custom code)
  2. Height: the height in pixels of the app; the width is set automatically by the column that contains it
  3. Show Scrollbar: in case you want to hide the vertical scrollbar (used to slide the page up or down)
  4. Embed Code: in case you’re not using a URL but custom code, here’s where you’ll paste it
Settings of the iFrame app

Here’s all you can edit in this app

Code Validation

As stated above, the code you use here is safer than the one on the HTML Embed app.

For this reason, there’s no validation executed for the code embedded on this app.

If you want to learn more about the validation checks performed for the Embed HTML app and the Custom Tracking Code, go to the following article:

About HTML Validation Errors

That’s All

Please share your doubts below!

Menu