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
- 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
- Load from URL
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
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
Select from the type of remote content you wish to load from among 3 options.
- Load From URL
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.
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.
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.
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
For a guide on how to setup your Remote Content Popup or Usage Examples, check the related docs below