How to add iframe to Squarespace without errors

Here's a step-by-step tutorial on how to add an iframe to your Squarespace site.

We'll go over:

• The basics of iframe
• How to add iframe on your Squarespace site via the custom code block
• How to troubleshoot the iframe if there're errors
• and go over some common questions about adding iframes to Squarespace

By the end of this tutorial, you should have a working iframe on your site.

Let's dive right in.

iframe basics

Basically, iframes allow you to add content from an external site to your Squarespace site.

Personally, I would avoid iframes (if I can) just because they add extra loading time to your page and the user experience is subpar.

That said, some circumstances require iframes to get the job done.

Common examples of using an iframe on a site:

• Adding an external portfolio to your current CV page.
• Showing a product catalog on your marketing site.
• Embedding Youtube or Vimeo videos.
• Showing Google documents on your site.

Here's how it looks like in the Squarespace editor when you add an iframe.

iframe code sample

Here's an example of an iframe code:

<iframe src="URL" title="Page title" height="400px" width="100%"></iframe>

The iframe code is made up of 4 components:

1. URL — The full URL of the page where the iframe is loading the content from, which includes HTTP or HTTPS. Example: "https://www.makingthatwebsite.com".
2. Title — A name for this page that's being loaded. This is used by screen readers to read out what the content of the iframe is. For example: "Making that website home page".
3. Height — Set the height of the iframe. Example: 400px or 100% (recommended)
4. Width — Set the width of the iframe. Example: 800px or 100% (recommended)

There are other ways to customize an iframe, such as removing the border or giving it a custom style.

While customizing the iframe is beyond the scope of what we're trying to do here, you can check out this tutorial to start.

Now that you know how does an iframe works, let's go ahead and add one to your Squarespace site.

How to add an iframe on your Squarespace site

Make sure you're logged into your Squarespace site, and select the site you want to add the iframe to.

Go ahead and edit the site.

In an empty section, add a new Code block.

Then, edit the code block and add the iframe code to the editor.

<iframe src="URL" title="Page title" height="400px" width="100%"></iframe>

Make sure to edit the URL (insert your page URL, obviously), the page title, the height, and the width.

Here's the sample iframe code used in the screenshot loading a page Makingthatwebsite.com page if you want to test it out.

<iframe src="https://www.makingthatwebsite.com/templates/"
title="Squarespace templates" height="600px" width="100%">
</iframe>

Once you've added the iframe, you should be able to preview the iframe content on your editor.

That's it! You've now added an iframe to your Squarespace site.

Troubleshooting iframe errors on Squarespace

Here are 3 common reasons why iframes don't work as intended on Squarespace and how to solve them:

1. You're currently on Squarespace Personal plan

As mentioned, adding a custom code is a premium feature that requires a Business plan (or above) on your Squarespace account.

If you're still on the personal plan, you can upgrade directly on their pricing page.

2. You're loading iframe from a site that bans clickjacking

Some popular sites like Google or Facebook don't allow you to embed their site in an iframe because of clickjacking.

Clickjacking is a common technique scammers use to trick users into clicking a page that's different from what they see.

If you're testing an iframe from a popular site, chances are they probably blocked it, so the solution is to load an iframe from your own page instead.

3.  Your iframe is loading content from an insecure site.

If your website is currently on a secure network (your URL starts with HTTPS), but the URL specified in the iframe starts with HTTP, then the iframe will return an error.

To solve this, simply add the "s" to the URL in your iframe.

Update 

<iframe src="http://www.makingthatwebsite.com"> 

To 

<iframe src="https://www.makingthatwebsite.com"> 

Frequently Asked Questions about adding iframes on Squarespace

Does Squarespace support iframe?

Yes, you can add an iframe to Squarespace via the Code block, which is a feature that's only available on the Business plan and above.

Why is my iframe not working in Squarespace?

Your iframe may not work due to one of three reasons:

1. You're currently on Squarespace Personal plan
2. You're loading iframe from a site that bans clickjacking
3. Your iframe is loading content from an insecure site.

Click here to learn how to troubleshoot and resolve these issues.

Can I embed a web page in Squarespace

Yes, you can embed a web page in Squarespace with an iframe. The way to do this is to add a code block directly in the page section.

Related Squarespace tutorials

• How to set up recurring events on Squarespace
• How to embed PDFs in Squarespace
• How to upload Youtube video to Squarespace without plugin
• How to add custom font to Squarespace
• How to add Google Analytics to Squarespace
• Squarespace vs Wix vs Weebly vs Wordpress (Detailed comparison)

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.