Results 1 to 1 of 1
  1. #1
    ddm
    ddm is offline Public Member
    Join Date
    July 2006
    Posts
    1,072
    Thanks
    394
    Thanked 453 Times in 274 Posts

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

    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:

    Code:
    <!-- 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

    Code:
    
    <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
    Code:
    $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:
    Code:
    
    
    <!-- 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.

  2. The Following 4 Users Say Thank You to ddm For This Useful Post:

    MJM (10 August 2020), nwalker (10 August 2020), PromoteCasino (10 August 2020), universal4 (10 August 2020)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •