Remote Content Introduction

The remote content (RC) plugin extension allows you to fill your popup with a remote content source. Remote content can originate from any source that is not on the immediate page. Content can be called from within your existing site, or from another site.  

The plugin extension allows you to have links, pages, posts, images, and more open inside your popup. You can also create an AJAX call to customize the content of the popup, all based on what link the user has clicked.

Preparation to Use this Plugin Extension

Some knowledge and understanding of HTML and CSS is necessary to effectively use this plugin extension. For example, plugin users should be able to:
  • inspect HTML to find the target CSS selector(s) they will need to trigger a popup (e.g. <a> tag, <button> element, etc.), and
  • recognize an href (link) attribute and url within an HTML link. 

The example below shows an HTML <a> tag wrapping a button labeled 'Awesome Button'. The link contains class and href attributes, and a url link to a source of remote content. 

    <a class=“button awesome-button-link popmake-trigger” href=“https://www.example.com/my-awesome-remote-content”>Awesome Button</a>
    	

Remote Content Load Methods

This plugin loads remote content sources by one of three methods: 
  • Load from URL
  • iFrame
  • AJAX
The first two methods above load remote content from inside a page link through an 'href' attribute. The 'href' refers to the source of the remote content (url). 
href=“https://www.example.com/my-awesome-remote-content”
		

The 'Load from URL' and 'iFrame' methods are the most common ways that remote content gets called within a popup container. This article focuses on those two methods. The AJAX method uses jQuery and PHP to load and style content linked to a page element. Refer to 'Remote Content AJAX Type Introduction' for details on that load method.

Comparison of the 'Load from URL' and 'iFrame' Methods

iFrame: This method calls the content from the entire url for display within the popup container. This approach is sometimes necessary when RC includes hidden styles and scripts in the header of a page template that are needed for it to properly display. 

Load from URL: 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. It requires inspection of the page HTML to identify the markup container of the content you wish to display ( see 'Find CSS Selectors' section below ).  In the Popup Admin, this method enables a 'CSS Selector' input field in which to enter the HTML target container of your remote content.  

Triggering Remote Content from a Page Link

The RC plugin extension requires use of a  ‘Click Open’ popup trigger to display content within a popup container. Either of two methods can be used within the trigger to connect the RC source with the popup:
1) pass in a Popup Maker plugin class to the page link (see the 'Click Open' trigger document link above, Method #1), or 

2) copy the link’s existing class attributes and paste them into the Click Open trigger as ‘Extra CSS Selectors’ (see the 'Click Open' trigger document link above, Method #2). 

Find CSS Selectors Within a Target Link

  • The Popup Maker CSS Selector tool (build into the WP Admin tool bar when logged in as an Admin user);
  • The Google Chrome extension ‘jQuery Unique Selector’ (for Chrome browser users), or
  • Manually by using developer tools (e.g. Chrome Dev Tools, Firefox Web Developer, or Safari Web Inspector). 

Popup Admin - Remote Content Settings

The Remote Content settings pane is located in the Popup Admin below the content editor. Select the Enable Remote Content checkbox to expand and show all of the available features in the RC pane of the Popup Editor

Plugin Settings Overview

Type

Select from the type of remote content you wish to load from among 3 options.

  • Load From URL
  • iFrame
  • AJAX

Type option -- Load From URL

This option loads the remote URL and grabs the content inside an HTML element of your choosing via the CSS Selector Field. This feature is exclusive to the load method. 

CSS Selector

When using the Load From URL Feature, you can drill down and specify exactly what segment of the remote URL you want to load inside the popup. If you're not sure how to find CSS Selectors, check out our  doc on getting CSS Selectors.

Type option -- IFrame

This will cause any targeted link (source url) to open in an <iframe> inside the popup. This feature works the same way as the Load From URL type (calling a remote source by url), but through use of an <iframe>. The iFrame load method does not allow users to target a specific section within a remote content source. That approach requires use of the 'Load from URL' method.

Type option -- AJAX

This allows ultimate customization, but  requires programming knowledge.

Function Name

When using the AJAX type you can specify either a function name, or a Class::Method, that will be called when the popup is opened. For a more in-depth guide on the AJAX type, read the related article below, or click here.

Loading Icon

Choose from six different Loading Icons to compliment your Remote Content Popup:

  • Lines: Growing
  • Dots: Growing
  • Circles: Dots Chasing
  • Circles: Dots Fading
  • Circles: Dots Streaking
  • Circles: Racetrack

More Resources

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

Still need help? Contact Us Contact Us