From this article, you will learn how to create a pop-up, that appears when a button is clicked on the website. Before you start, make sure, that you have at least one contact form saved in SALESmanago.

.

1. Placing scripts in the header.php file.

Begin by downloading scripts from the author’s page >> which also contains a lot of additional guidelines on using the script.

Then, on WordPress Main Dashboard, go to Appearance → Editor, and edit the file header.php and add links to scripts before the end of the head section (that is: before</head>).

Place address scripts on your server and then update the last two links (in bold):

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://sm-shop.pl/zad/jquery.bpopup.js"></script>
<script src="http://sm-shop.pl/zad/jquery.bpopup.min.js"></script>

.

2. Placing functions and styling of the pop-up. 

Put the code of the function that displays the pop-up and manages styling in the head section, before its end. You can copy the code from the frame below.

<script>
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action from being triggered.
e.preventDefault();
// Triggering bPopup when a click event is recorded.
$('#element_to_pop_up').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.content',
loadUrl:'http://dinbror.dk/blog' //Uses jQuery.load()
});
});
});
})(jQuery);
</script>
<style>
#element_to_pop_up { display:none; }
</style>

.

3. Placing the button and the frame on the page.

Now, you can place the iframe code generated in the system on your page and display the button that opens the pop-up. See below for an example iframe code.

<!-- The button that triggers the popup -->

<button id="my-button">POP IT UP</button>

<!-- The element that will pop up -->

<div id="element_to_pop_up"><iframe id="salesmanagoIframe" style="margin: 0; padding:

0; width:450px; height:350px; overflow-y:hidden; overflow-x:hidden; border:none;

background:#ffffff;" src="https://www.salesmanago.pl/cf/88vk41bhnn4dcwl3/testnn.htm">

</iframe></div>

.

4. End result – an example pop-up