How To Create a Popup That Loads Content From a URL

Have you ever wished you could automatically reuse content from different parts of your site in a popup? Not only would that save time from writing the same thing twice or having duplicate content, but your page speed improves because the content loads only when it's needed!

In this article, you’ll learn how to create a popup that grabs content from anywhere on your site via a URL. This allows you to automatically create custom popups using existing posts, pages, or parts of a post/page. 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.

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
• Content CSS Selector
• 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. Keep that setting.

Content CSS Selector

The Content CSS Selector setting lets you control what part of your post or page gets loaded into your popup.

To select or filter what content from the URL to load into the popup, type a valid CSS selector into the Content CSS Selector input field.

If you don't fill in the Content CSS Selector field, the entire post or page from the URL loads by default. That includes the header, menu, body, and footer for the post or page.

Using the earlier screen capture as an example, the popup will load the content that's only in the .entry-content section of the post or page.

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

Click Save when you're done.

Popup Settings: Click Open Trigger #

Follow the steps in our Add a Popup Trigger guide to create a Click Open trigger. In your Click Open trigger, you'll need to add a link CSS selector. Here's how.

In the Extra CSS Selectors input field, click on the left arrow icon  to see the link options.

Click  Link: Exact Match from the dropdown. 

Change the placeholder in between the double quotes (") to the link you want to launch and load into the popup. 

In the screen capture below, the popup will do 2 things:

1. Launch when you click the http://twenty-twentyone.local/about/ link that's on a post or page
2. Load the contents from the http://twenty-twentyone.local/about/ URL.

Click the Add button to add your trigger.

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.

1. Add a new (or edit) post or page. 
2. Insert a link. 
3. Edit the link so that it's the exact same one you used for your Link: Exact Match trigger setting.

Continuing with our example, we'd add the  http://twenty-twentyone.local/about/ link to our post or page.

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

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

Troubleshooting #

My content doesn't load

• Remote Content Area General settings: Make sure you have Load from URL selected and your Content CSS Selector is correct. In our example, the .entry-content CSS class must be in the post or page that's loaded. If it isn't, we'll get a blank popup.
• Click Trigger settings: Check that you have the right URL in your trigger's Extra CSS Selectors setting. If you're trying to load your about page, but the URL has "/baout" instead of "/about", the content won't load.
• Link in post or page: The link you put in your post or page must exactly match the URL you have in your Click Trigger settings. If your Click Trigger has http://abcdef.com but your post has http://abc123.com your popup won't launch.

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