---
title: "Remote Content — Shortcode: Remote Content Area"
description: "## Overview The Remote Content (RC) plugin extension gives you a shortcode so you can customize how you want to load your remote content. ``` [pum_remote_content][/pum_remote_content] ``` On the front end, Popup Maker's RC extension replaces that shortcode with the…"
url: "https://wppopupmaker.com/docs/remote-content/shortcode/"
updated: "2025-02-07"
category: Extensions / Remote Content
---

# Remote Content — Shortcode: Remote Content Area

## Overview

The Remote Content (RC) plugin extension gives you a shortcode so you can customize how you want to load your remote content.

```
[pum_remote_content][/pum_remote_content]
```

On the front end, Popup Maker's RC extension replaces that shortcode with the remote content you set up inside the shortcode.

The plugin uses the Popup Editor shortcode button on the **Visual** tab to set the shortcode. 

![Popup editor Visual tab with Remote Content area](https://wppopupmaker.com/wp-content/uploads/pm-rc-visual-tab-900w.png)

The option settings box provides an easy way to edit or update the shortcode attributes. We'll cover that in a bit.  

You can also see and manually edit shortcode attributes directly in the editor **Text** tab.

![Popup editor Text tab with Remote Content area](https://wppopupmaker.com/wp-content/uploads/pm-rc-text-tab-900w.png)

---

> If you're new to Remote Content popups, read our [A Beginner’s Guide to Remote Content Popups](https://wppopupmaker.com/docs/remote-content/beginners-guide-to-remote-content-popups/)!

## The Remote Content Shortcode 

### Add Shortcode

1)  From the WordPress Admin, open the Popup Editor by clicking **Add New** or clicking an existing popup from the**All Popups** page. 

2) Navigate to the Popup Maker shortcode button in the Editor menu **Visual** tab. Click the Popup Maker dropdown to display a menu of Popup Maker shortcode options.

3) Click **Remote Content Area**.

![file QSKEOPOpBN](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d23940428630abc0bb6e6/file-QSKEOPOpBN.png)

### Edit Shortcode

- In the Editor **Visual** tab, click **Dynamic/remote content area**. 
- Click the **pencil** icon to reopen the **Remote Content Area** settings for editing. 
- In the **Remote Content Area** settings, click **Save** to save your changes to the shortcode.
- Click **Publish** or**Update** to save changes to the popup.

![file 8S4wJ2qDXB](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d24c62c7d3a099f2e2ea1/file-8S4wJ2qDXB.png)

### Delete Shortcode

- In the Editor **Visual** tab, click **Dynamic/remote content area**. 
- Click the **X** icon to remove the shortcode. 
- Click **Publish** or**Update** to save changes to the popup.

![file aQH3pKhdn5](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d258c2c7d3a099f2e2ea8/file-aQH3pKhdn5.png)

---

## Remote Content Area Settings

### General settings

#### Select a Remote Content Load Method

![pm rc load options dropdown](https://wppopupmaker.com/wp-content/uploads/pm-rc-load-options-dropdown.png)

You can choose from 4 content load methods. The simplest methods to use are **Load from URL** for internal RC, and **IFrame** for external RC. Each of the methods described in the following table loads content into a popup when a Click Open trigger *fires*. 

| **Load Method** | **Application** | **Description** |
| --- | --- | --- |
| ***Load from URL** * | Internal RC | This method loads a page link into a popup from the same top-level URL as the popup. Use it to load an entire, or part of a page or post into a popup. |
| ***Post Type Content*** | Internal RC | This method loads the content based on the post type registered to WordPress (for example: Posts, Media (attachments), or Popups). |
| ***iFrame*** | External RC | This method loads a page link into a popup from a URL different from the top-level URL of the popup. It loads an entire page or post into the popup.  |
| ***AJAX***    | Internal RC | This method loads content using JavaScript/jQuery and a custom PHP function that passes data dynamically to variables added to the popup container.  |

*Shortcode attributes (visible from the editor 'Text' tab):*

Load method attributes for the remote content shortcode.

The default is "load" (i.e., **Load from URL**).

```
[pum_remote_content method="load | iframe | posts | ajax" ]
{content}[/pum_remote_content]
```

### Load From URL

![file HR0oJjvGa1](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d270d2c7d3a099f2e2eaf/file-HR0oJjvGa1.png)

Use this method to load a URL link into a popup from a source of internal remote content. This method can return *either *the entire URL or a targeted section within a URL. The latter approach is useful for displaying a smaller portion of the entire remote content source. If the **Content CSS Selector** field is blank, the *entire URL* *will display* within the popup container. 

Use the  **Content CSS Selector** field to target a section of a post or page within the link URL. Identify the HTML element and/or attribute(s) that contains the target section and add them to the 'Content CSS Selector' field. When the link is clicked, the popup will display the targeted section. 

**Related article:**  [Setting Up a Remote Content Popup](https://docs.wppopupmaker.com/article/284-setting-up-a-remote-content-popup)

*Shortcode attributes (visible from the editor **Text** tab):*

Select method="load" to enable the attribute load_css_selector.

Use the 'load' method only with RC internal to a site URL.

```
[pum_remote_content method="load"
load_css_selector="{css_selector(s)}" ][/pum_remote_content]
```

### IFrame

![file 4TUXoFcV03](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d282f0428630abc0bb700/file-4TUXoFcV03.png)

Use this method to load a full-page URL into a popup from an *external* *remote content source*. This approach is also necessary when RC includes hidden styles and scripts in the header of a page template that is needed for it to display properly. 

**Default IFrame URL**: You can override the default external link click on the front-end link with this field to display your remote content. *Popups can be displayed by this method with a Time Delay / Auto Open trigger.*

*Shortcode attributes (visible from the editor **Text** tab):*

Select method="iframe" to enable the attribute iframe_default_source'.

Use this method with RC external to a site URL.

Add a URL to the iframe_default_source attribute when unable to set a link that appears on the front end.

```
[pum_remote_content
iframe_default_source="{http(s)://{remote-source-url} }" ]
[/pum_remote_content]
```

### Post Type Content

![file iA2iIeRFP8](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d42002c7d3a099f2e2f54/file-iA2iIeRFP8.png)

> At this time,  [please consult with the plugin developer for assistance in using this load method](https://wppopupmaker.com/support/) until additional documentation becomes available.

**Note:** This is an experimental RC load method introduced in plugin version 1.1.0. It displays links to a specific post type (for example, posts, attachments (Media), and popups) in an AJAX popup. 

![file jGhGllggUu](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d43392c7d3a099f2e2f5a/file-jGhGllggUu.png)

The method should be used together with a **Click Open** trigger. When setting the trigger, set a post type to match the post type set in the Remote Content Area box.

In the Remote Content Area box, the **Content Template** custom field will accept an HTML-based template using plugin template tags, including:

- {pum_rc_post_id};
- {pum_rc_post_title}; and 
- {pum_rc_post_content}

HTML elements and attributes that are accepted in the **Content Template** field include:

**Table 1. HTML Elements & Attributes Allowed in the Content Template Field.**

| **HTML Element** | **HTML Attribute** |
| --- | --- |
| <a> | id |
|   | class |
|   | href |
|   | title |
| </br> |   |
| <em></em> |   |
| <strong><strong> |   |
| <div></div> | id |
|   | class |
| <p></p> | id |
|   | class |

*Shortcode attributes (visible from the editor **Text** tab):*

Select method="posts" to enable the attribute posts_post_type.

The default is "post".

```
[pum_remote_content method="posts" posts_post_type="post |  attachment | popup"]{content}[/pum_remote_content]
```

### AJAX

![file mVYN6YK7P6](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d44db2c7d3a099f2e2f65/file-mVYN6YK7P6.png)

**Function Name ( text field ) --** When using the AJAX load method, specify the name of a callable PHP function or method that will contain the variables to dynamically pass content into the popup container.  Do not add the opening and closing parentheses [ ( ) ] after the function or method name. View the following related article for details on using this approach.

**Related article:**  [Remote Content AJAX Type Introduction](https://docs.wppopupmaker.com/article/33-remote-content-ajax-setup)

*Shortcode attributes (visible from the editor 'Text' tab):*

Select method="ajax" to enable the attribute ajax_function_name.

Enter the function or method name only.

For example: 'my_custom_function' or 'method_name'.

Do not enter: 'my_custom_function()' or 'method_name()'.

```
[pum_remote_content method="ajax" ajax_function_name="{function_or_method_name_only}" ][/pum_remote_content]
```

---

## Select Icon Animation Style

![file osnh0aj9LD](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d48162c7d3a099f2e2f74/file-osnh0aj9LD.png)

You can select from a menu of 8 different icon animations to display in the popup while the plugin loads the remote content. 

1. Lines: Growing;
2. Dots: Growing;
3. Circles: Streaking;
4. Circles: Chasing Tail;
5. Circles: Dots Chasing;
6. Circles: Dots Fading;
7. Circles: Dots Streaking;
8. Circles: Racetrack;

### Set Custom Icon Animations

![file iqEUVirkLP](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d4bd92c7d3a099f2e2f7f/file-iqEUVirkLP.png)

You can save up to 3 separate custom icon animations using either HTML, CSS or a combination of both. When the Remote Content plugin is activated, a 'Remote Content' category option page becomes available to accept HTML and CSS for custom icon animations. From the WordPress Admin, go to: 

- **'Popup Maker' >> **
- **'Settings' >> **
- **'Extensions (tab)' >>**
- **'Remote Content (category)'**

to enter code for the custom icons.

Once the code is saved on the option settings page, select the custom icon from the 'Loading Icon Style' menu. 

### Recommendations for Custom Icon Animations

Props to  [Yangshun Tay](https://github.com/yangshun) for maintaining "a curated collection of dazzling web spinners." [The repository is maintained on GitHub](https://github.com/yangshun/awesome-spinners) and refers to other repositories where custom icon animations are available for free. 

*Shortcode attributes (visible from the editor 'Text' tab):*

This is the icon animation you'll see while content loads into a popup.

The default is loading_icon="lukehass/load1" which is Lines: Growing.

```
[pum_remote_content loading_icon=
"lukehass/load1" ('Lines: Growing') |
"lukehass/load2" ('Dots: Growing' ) |
"lukehass/load3" ('Circles: Streaking') |
"lukehass/load4" ('Circles: Chasing Tail') |
"lukehass/load5" ('Circles: Dots Chasing' ) |
"lukehass/load6" ('Circles: Dots Fading') |
"lukehass/load7" ('Circles: Dots Streaking') |
"lukehass/load8" ('Circles: Racetrack') |
"custom_1" ('Custom #1') |
"custom_2" ('Custom #2') |
"custom_3" ('Custom #3') ][/pum_remote_content]
```

---

## Set the Minimum Height Display in the Popup

![file](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b3d4edd0428630abc0bb7c5/file-ZyitxMXJUV.png)

By default, the plugin sets the minimum height of the remote content loaded into the popup at 200 pixels (px), and a maximum height of 300px. You can change the container height in any of the following ways:

1) Increase the height by moving the rangeslider to the right, or decrease it by moving the rangeslider left. The maximum allowable value is preset to 300 px. 

2) Enter a different numerical value in the 'minimum height' input field. If the value exceeds the default maximum of 300px, the rangefinder and the maximum height will both reset accordingly. 

3) Incrementally increase or decrease the default minimum height by clicking on the minus ( - ) or plus ( + ) buttons.  

A vertical scroll bar will appear inside the popup container if the content height is greater than the popup height. 

The default is 200px.

```
[pum_remote_content min_height="200" ][/pum_remote_content]
```

---

## More Resources

For a guide on how to set up your Remote Content Popup or Usage Examples, check the related docs below: 

- [Remote Content -- Plugin Installation and Activation](https://docs.wppopupmaker.com/article/201-remote-content-installation-and-activation)
- [A Beginner's Guide to Remote Content Popups](https://wppopupmaker.com/docs/remote-content/beginners-guide-to-remote-content-popups/)
- [Remote Content -- AJAX Type Introduction](https://docs.wppopupmaker.com/article/33-remote-content-ajax-setup)
- [Remote Content -- Create an Image Gallery Popup](https://docs.wppopupmaker.com/article/285-create-image-gallery-with-remote-content-popups)