View Categories

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

This guide takes you through each step of creating a popup that loads external content from an iFrame when you click a link.

Let’s see why you might want to use an iFrame in the first place.

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. External, as in from a site different from the one your popup is on.

Chances are you’ve already used iframe tags 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
Pm Rc Iframe Slideshare

You might notice that pulling in a SlideShare slide show on your homepage is a lot more convenient than writing and hosting your own presentation app.

In this article, you’ll learn how to create a popup that loads an external web page using an iframe tag. 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 an external URL possible. So, you’ll need the Remote Content extension installed and activated before you start.

Remote Content

Follow these steps to make a Remote Content iFrame popup.

Note: For this tutorial, we create an Auto Open popup.

1. Create a Popup #

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

File Jchmk9Meho

2. 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.

3. Choose Your Remote Content Area Settings #

Choose the method used to load dynamic content #

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.

Pm Rc Dropdown Iframe

Default IFrame URL #

Enter the URL of the external page you want to load into your popup. The (entire) contents of that page will load into an iframe tag when your popup displays.

The URL you enter here will act as the default or fallback URL for the popup. That means you can set up an Auto Open and a Click Open trigger to display your popup.

Let’s cover how this Default IFrame URL setting works for both triggers.

Auto Open Triggers #

The Auto Open trigger will always use the URL you type into the Default IFrame URL field.

For the Click Open trigger, any element you choose to launch your popup that’s *not* a link on your site will use the Default IFrame URL field too. Examples of Click Open elements that aren’t links are the following:

  • Plain text (i.e., paragraphs and headings)
  • Icons
  • Plain images

Click Open Triggers That Are Links

Now, if you add a Click Open trigger and associate that trigger with a link on the front end of your site, the popup will use that link’s href value to load the content. This means your Click Open link overrides the Default IFrame URL field.

Just remember: Auto Open and non-link Click Open use the default URL field. Links use the link you click.

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

4. Save Your Remote Content Area Settings #

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

Remote Content Save Button

5. Create an Auto Open Trigger #

  1. Go to Popup Settings > Triggers.
  2. Click Add New Trigger.
  3. Click Time Delay / Auto Open in the dropdown.
  4. Click Add to save your trigger settings.
  5. Click Add to add the trigger (keeping the defaults for this tutorial).
Pm Add Click Open Demo

6. Save and Enable Your Popup #

Click Publish or Update to save your popup’s changes.

Popup Maker Publish Button

Enable your popup if it isn’t enabled yet.

Pm Popup Enabled On Closeup

Yay! You’re done. Let’s test it out now ☺️

Take a Test Drive #

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

  1. Add a new (or edit) post or page. 
  2. Insert an element. 
  3. 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 Click Open 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.
  • Click Open element in post or page: Check that you assigned your Click Open element to the Remote Content IFrame popup you created.
  • Refused to connect error: The page at the URL you used refuses to load its content in an iframe tag. Try a different URL, such as another page on your site, a shareable embed URL from your app, or a “publicly” available site like Wikipedia.
Pm Rc Iframe Wikipedia

At the time of writing, Wikipedia loaded fine in our Remote Content IFrame popup.

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.

Leave the first comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.