How To Create a Popup That Loads External Content in an Iframe

What is an Iframe and why are they useful?

An inline frame (iframe for short) is an HTML tag that allows you to display external content on your website.

Chances are you've already used iframes if you've visited a site that has:

Google Maps showing office or store locations
YouTube or Vimeo videos for courses or how-to tutorials
Slide show presentations created on SlideShare

You might notice that pulling in a Google Map on your contact page is a lot more convenient than writing and hosting your own map application.

In this article, you’ll learn how to create a popup that loads an external web page using an iframe. This allows you to automatically create custom popups using content from another website. What's more, is that the content only gets loaded if the popup launches (improving precious page speed).

Before You Start #

Our premium Remote Content extension makes loading a popup with content from a URL possible. So, you'll need the Remote Content extension installed and activated before you start.

To create a popup, click Popup Maker > Create Popup in your WordPress admin area.

Add a Remote Content Area #

From the popup editor's toolbar, click the Popup Maker icon. Select Remote Content Area.

Remote Content Area dropdown menu item

Next, you'll see the Remote Content Area General settings modal window.

Popup Maker Remote Content Area General settings for iframe

In the General settings tab, you'll have the following options:

Choose the method used to load dynamic content
Default IFrame URL
Loading Icon Style
Minimum Height

Let's cover each option.

Remote Content Area Settings #

Choose the Load From URL Setting

Under the Choose the method used to load dynamic content heading, the Load From URL option is the default. Click the dropdown and select IFrame.

Default IFrame URL

Enter the URL of the page you want to be loaded into your popup. The contents of that page will get loaded into an iframe tag.

The URL you enter here will act as the default or fallback URL for the popup. You can override or force with a Click Open trigger if needed.

Loading Icon Style

A loader animation icon will display while the remote content loads into the popup. The default animation icon is called Lines: Growing.

If you want to change that, click the dropdown and select the loading animation icon you want to appear instead.

Minimum Height

The default Minimum Height is set to 200px. To change that, you can:

Drag the slider to the right or left to increase or decrease the height
Enter the number of pixels into the input field
Click the + or - button to increase or decrease the height

When you're done, click Save to save your changes.

Click Publish or Update to save your popup's changes. Enable your popup if it isn't enabled yet.

Take a Test Drive #

Here's how to test your new Remote Content popup.

Add a new (or edit) post or page.
Insert an element.
Edit the element so that has your popup's default CSS class trigger (e.g., popmake-15).

To find your popup's default CSS class trigger, go to Popup Maker > All Popups and look in the CSS Classes column for your popup.

Visit your post or page after you've saved your changes and click the element you added.

If everything works, you'll see the animation icon and then your popup with the content from the remote URL!

Pro tip: If needed, override the default iframe URL by adding an a tag to your element. Set the href to the link you want to override the default iframe URL. Here's an example.

<div class="popmake-15">
	<a href="http://thisoverridesthedefault.xyz">
		Open Remote Content (iframe) Popup
	</a>
</div>

Troubleshooting #

My content doesn't load

Remote Content Area General settings: Make sure you have IFrame selected and your Default IFrame URL is correct.
Element in post or page: Check that you assigned your element to the Remote Content IFrame popup you created.

My popup doesn't appear when I want it to

Published and enabled: First, make sure your popup has the content you want and is published and enabled.
Targeting conditions: Next, check your Targeting settings to make sure you haven't accidentally excluded your popup from showing. Here's our help guide for checking your Targeting conditions.
CSS conflict: Sometimes, another (existing) CSS rule can block your popup. When that happens, it's called a CSS conflict. The simplest way to fix a CSS conflict is to add a CSS rule to force your popup to appear. Follow our step-by-step instructions to add the CSS rule that will fix the conflict.

Advanced troubleshooting

Visit our main troubleshooting page for more advanced help guides.

Getting help

If you need help with your popup, we're only a click away.

Head over to our support page to submit a ticket, join our Facebook group, or check out all of our resources