Remote Content -- Set Up A Remote Content Popup

Setting Up Click Triggers for Remote Content

Your Remote Content Popups will always need to be used with popups that use the Extra CSS Selectors field to target clickable items using the Click Trigger. If you need help getting CSS Selectors, check out our doc on getting CSS Selectors. You could theoretically circumvent this with significant custom programming in a case where you may want to have remote content loaded inside a popup using a different type of trigger.

Using Load From URL or iFrame

If you want the content of a link a user clicks to appear inside a popup instead of actually opening the page, then we can do that using the Load From URL or iFrame feature.

1. First, make sure you have an URL(s) ready on the front end of your site that you want to target with the popup.
2. Next, set up a Click Trigger that targets the URL(s) (only using the Extra CSS Selector Field) so that when the user clicks the link, the popup will open.
3. From here, you can choose to load the entire page inside the popup (no CSS Selector - pictured above - leave blank), or specify exactly what part of the page appears in the popup using the CSS Selector field under the Remote Content Pane (pictured above). Important: this feature is only available using the Load From URL Feature.
4. Get your CSS Selector that contains the desired content to be displayed, and input it into the CSS Selector field. Anything inside that CSS Selector on the targeted page will now be displayed inside the popup when the user clicks the link. Important: only applicable when using the Load From URL Feature.
5. For instance, if your main content is in a div with the ID `main`, then you would enter #main which would cause the content of the main div to be loaded into the popup. Read more about getting CSS Selectors. Important: only applicable when using the Load From URL Feature.
   1. Important Note: When you are testing this functionality, keep in mind sites like Google will not work because of legal and technical reasons - we recommend just using a random internal link to use for testing purposes.
6. Publish your popup, test, and you're done!

More Resources

For more info on using the AJAX Type or Usage Examples, check out the related docs below.