Popup - Remote Content

Hey team

Attempting to replace Popup Maker, they have this nice remote dynamic content function
where you can have the link open the page in a popup

What are our options in bricks to replicate?
I use this a fair bit for PDFs and items I don’t want the user to leave the website and with the existing logic it was just a matter of adding a class to the link for it to open it embedded.

A Page Link

4 methods

  • Load from URL
  • Post Type
  • iFrame
  • AJAX

with code element and Interactions
you can create any type of trigger mechanism to open a iframe, pdf or a link.

add your iframe on code element and give it a class to so you can select this dom later

and add display:none to code element custom CSS so initial state is hidden

and simple button interaction setup to show code iframe when button clicked.

easy.

endless possibilities with interactions.

there is so many triggers here practice them learn them
image

@sinanisler That isn’t quite the same. Author of Popup Maker here, and fellow Bricks uers.

Remote content doesn’t just load an iframe, it dynamically loads different content into the frame based on what you clicked.

Further iframe isn’t the only method available, it can do true AJAX based content loading directly or via the API.

Effectively Remote Content lets you make 1 popup, setup with infinite links, all opening different content in the same popup when clicked.

1 Like

Oh I see. Nice.
I think I used your plugin one of our clients old setup it was made before my time I just used this plug :slight_smile:
Thanks for the plugin :+1::fire:

Rest of the info for people who find this topic on google or something :slight_smile:

Complete dynamic popup possible with bricks as well.

Here on stinag I made this for example all content coming from post types.

https://www.stinag-ag.de/immobilienportfolio/

Here on efs this data comes from API I created the custom design in bricks builder it was fun to build and pop design showing or hiding the bricks design depending on request and API filling it dynamically.

There is little bit custom .JS here since it is API but quite easy to implement some js now days with AI :slight_smile:

When it comes the first question. There are tons of tons of options to make dynamic popups with Bricks it only depends how and where and which form the data comes and how you want to store and show.

@sinanisler Oh for sure, if your willing & capable of writing a custom solution you CAN do that.

We built this to facilitate speedy & fully customizable solutions, well before page builders.

So its really a question of how valuable is your time? In this case, its $35, likely less than your hourly rate, just works and includes support :wink:

Its really about justifying the cost of a custom solution for developers, but for non-developers its now $35 vs the cost of hiring a dev :crazy_face:.

1 Like

Should note that you can not use popupmaker and bricks native popups

They conflict on triggers, $35 is more expensive when you then have to start the troubleshooting process.

We use popupmaker where possible because of the trigger controls were significantly better for lead generation (alot more flexibility) but we have to make the decision on which sites to use and not use the plugin.

Secondly the remote content - started throwing errors with PDFs with different internet browsers and we started exploring our own JS with logic to handle PDF with PDFjs Viewer.

The other side of things the remote content didnt allow for dynamic/responsive heights, we couldn’t for instance go calc(80vh - var(–header-height)) on the popup and then have the remote iframe / asset content of the popup work with the variable heights - all had to be fixed.

If you can resolve this - happy to return to the fold

1 Like

Figured I’d share my current method

I have 2 wordpress instances both running on bricks,

I use url params to hide header/footer or buttons within the 2nd instance I iframe
My footers/headers content are sections, for which I then use then templates elements in my headers/footers template types to give me greater conditions flexibility.

Example of a link below
a href link (note the target=“ExternalContentFrame” and class “embedlink” )

<a data-type="" id="learn-more" href="https://domain.com?hide-header&hide-footer&hide-relate&hide-detail&embed" target="ExternalContentFrame" class="btn pull-right enquire embedlink learn-more">DETAILS</a>

Bricks popup template
I have the following code (note it initially loads with a 1x1 pixel)
Code module:
<iframe name="ExternalContentFrame" id="ExternalContentFrame" style="border:none;width:100%;height:99%;" src="https://domain.com/blank-1x1-00000000.png"></iframe>

wpcodebox2 - JavaScript
Monitors when class .embedlink is clicked, pulls the url and then updates the bricks builder popup template behind the scenes.
note the class .embedlink also triggers the bricks popup

// Open  if any element with .embedlink class is clicked
// note I have hardcoded the popup template 39 on this one

jQuery(document).on('click', '.embedlink', function(e) {
		var extFrame = document.getElementById("ExternalContentFrame");
		var me = this;
		var fn = function(){
		    jQuery(extFrame).attr("src", me.href);
		};
		//jQuery(extFrame).one("load", fn);
		//jQuery(extFrame).attr("src", "https://domain2.com.au/loader.html");
		jQuery(extFrame).attr("src", me.href);
		
		
	
		// 16591
		document.querySelectorAll('.brxe-popup-39').forEach( (elx) => {
               elx.classList.remove("hide");
		});
});

jQuery(document).on('click', ".brx-popup-content .ti-close", function(e) {
    var extFrame;
    if (extFrame = document.getElementById("ExternalContentFrame")) {
        extFrame.src = "";
    }
});

Where I have to show the PDF - I have similar logic but I then use the .pdf-embedlink and PDF.js Viewer – WordPress plugin | WordPress.org