Exit pop up: a module for Drupal 8 to convert the exiting users of your site

Submitted by Nicola Rainiero on 2019-07-15

There are a lot of website full of call to action that instruct people to click a link, visit a page, buy something, register in a mailing list and so on, even when people exit from those sites. It's a nightmare, but might I ever omit this feature on my Drupal 8 site? Certainly not, so I show you how to add this pop up to your site, installing and configuring Exit Pop UP Module for Drupal 8. And how putting just a little Javascript, it is possible to adapt the advert to the user language.

I consider this type of promotion a little annoying but in this last mounths it helped me a lot to increase the likes on my Facebook page and I am going to make it more specific and articulate in the future, adapting the content to the last page user have visited on my site. But first I should create a landing page or something that brings me a profit!

Anyway, regarding this module the author describe it in this manner:

The Exit Pop UP Module help you to convert the leaving visitor for your traffic and help yo to grow your business and engaging visitors. Whenever user tries to leave your site a pop up will appear displaying offer, or anything that you would like to display.

In the repository of Drupal you can find Exit pop up module and how to configure it.

Exit pop up: a module for Drupal 8 to convert the exiting users of your site

My customization

Simply if you use an iframe, you have a lot of option to tailor your advert. You can do it in four easy going steps.

  1. install and activate it;
  2. go to its admin page https://www.your_site/admin/config/exitpopup;
  3. put in the HTML template tab a code like this:
    <iframe height="300" src="https://rainnic.altervista.org/path/index_new.html" width="600"></iframe>
  4. while the index_new.html can be whatever you want, in my case:
    <!doctype html>
    <html>
    <head>
    <style>
    .epu_container{padding: 15px; } .epu_img_container{height: 100px; width: 100%; display: block; text-align: center; } .epu_img{margin: auto; height: 100px; width: 79px; } .epu_content{text-align: center; } .epu_btn {outline: none; border:none; padding: 15px 20px; vertical-align: middle; cursor: pointer; font-size: 16px; font-variant: small-caps; text-transform: uppercase; background: #09f; color: #fff; -webkit-box-shadow: 0px 5px 10px  -2px #aaa; box-shadow: 0px 5px 10px  -2px #aaa; }
    </style>
    </head>
    <body>
    
    
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var language = navigator.language || navigator.userLanguage; 
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
    if (language == "it")
    {
      js.src = 'https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v3.0';
    }
    else
    {
      js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0';
    }
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <div class="epu_container">
    <div class="epu_img_container"><img alt="Exit Pop up rocket" class="epu_img" src="logo_firma.jpg" /></div>
    &nbsp;
    
    <div class="epu_content">
    <h2 id="title">Thanks for your visit!</h2>
    
    <p id="paragraph">Please don’t forget to Like my Page!</p>
    <!-- <button class="epu_btn">Do Some Action PROVA!!!!</button> -->
    
    <script>
    var language = navigator.language || navigator.userLanguage; 
    if (language == "it" || language == "it-IT" )
    {
        document.getElementById("title").textContent = "Grazie per essere stato qui!";
        document.getElementById("paragraph").textContent = "Se vuoi restare aggiornato, puoi mettere un like alla mia pagina.";
    }
    else
    {
        document.getElementById("title").textContent = "Thanks for your visit!";
        document.getElementById("paragraph").textContent = "Please don't forget to Like my Page!";
    }
    </script>
    
    <div class="fb-like" data-href="https://www.facebook.com/rainnicadmin" data-layout="standard" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
    
    </div>
    </div>
    
    
    </body>
    </html>
    

In this manner the personalization is more flexible and powerful and in the future I want to add  not only  a link to promote my Facebook page but also different landing pages according to some specific tags of the last seen article.



Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.