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 #
Create a Popup #
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.
Next, you'll see the Remote Content Area General settings modal window.
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.
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.
Save and Enable Your Popup #
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>
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.
Visit our main troubleshooting page for more advanced help guides.
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