Guide: Adding modal [geotargeted] once per visit popups to WP

[ddm]

decided I will share some wordpress-specific tips/tricks/hacks,code to help y'all out as I have my nose stuck in code all day, and I see many of you guys paying for plugins and tools ye don't need.

anyway lesson #1 -

What: Adding bootstrap popups + geo popups to your wordpress website

Why: popups demand attention, and convert very well - people have banner blindness too.. (eg in 1 test I did, newsletter subscribers , went from 0.05% signup rate [no popup cta] to 3.5% with popup/cta)

How:

As long as your wordpress theme is using bootstrap, you don't need to use plugins etc for managing popup display, closing, state labeling (aria) etc.

Docs on bootstrap modals:
https://getbootstrap.com/docs/4.0/components/modal/

So let's add one to our site, sitewide.
We can whack the code for the modal in our footer, just before the closing </body> tag. It will be hidden by default...

let's open our [child] theme, open footer.php, find the closing </body> tag and insert popup html before it.
here's mine:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

then we gotta trigger the thing. I like a 7 second timeout, and showing it ONCE per user session only.
so we need to run a little javascript code when the document ready event happens.

we add the following code to our footer.php file , above the popup

<script type="text/javascript">
  
( function($) {
    
    $(document).ready( function() 
    { 
      
        console.log('"DDM was here'); 
 
         //display promo dialog after 7 secs - one time per session
         if (typeof Storage != "undefined") 
         {


            if (!localStorage.getItem("done")) 
            {
              setTimeout(function() {
                $('#promo_modal').modal('show');
                localStorage.setItem("done", true);
              }, 7000);
            }
            
         }





} ) ( jQuery );

</script>

this code saves a variable 'done' in local storage in browser (see it under devtools=>application in chrome] [for reference to make sure we don't re-render the popup > 1 time per session]


for extra points, we can use a geolookup plugin to get the user's country, and serve them a custom popup (eg 1 for USA, 1 for rest of world)

your hack might look like this:

at top of header.php

$country_code = getUserCountryCode(); <--- Use a library to lookup, or grab it from cloudflare
$sPopUpBucket='us';


if($country_code!='us')
    $sPopUpBucket='rotw';


$aPopupData = [
    'us'=>[
        'title'=>'USA promotion title',
        'img'=>'someimageurl',
        'text'=>'some USA CTA',
        'buttonlabel'=>'Create Account',
        'buttonlink'=>'#'
    ],
    'rotw'=>[
            'title'=>'ROTW promotion title',
        'img'=>'someimageurl',
        'text'=>'some ROTW CTA',
        'buttonlabel'=>'Create Account',
        'buttonlink'=>'#'
    ]
];

and modify your popup html so the variables get swapped in as appropriate:
so modal block becomes:

<!-- Modal -->
<div class="modal fade" id="promo_modal" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_title" style="color:black;"><?php echo $aPopupData[$sPopUpBucket]['title'];?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <div class="row" style="color:black;">
     
          <div class="col-md-12">
              <img src="<?php echo $aPopupData[$sPopUpBucket]['img'];?>" alt="Promo"/>
              <p style="color:black;"><?php echo $aPopupData[$sPopUpBucket]['text'];?></p>
          </div>
      </div>
      </div>
      <div class="modal-footer">
        <a class="popuplink popup-<?php echo $sPopUpBucket;?>" href="<?php echo $aPopupData[$sPopUpBucket]['buttonlink'];?>"><button type="button" class="btn popupbtn  btn-primary"><?php echo $aPopupData[$sPopUpBucket]['buttonlabel'];?></button></a>
        <button type="button" class="btn popupbtn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

Now you're rocking a 1 time per session geo-targeted popup, which you have 100% granular control over.



[next up, add some GTM click tracking on it and optimize for $$$$ / take over the world]

hopefully useful for someone - was just doing this on a client site and thought i'd document it as it's not too tricky.