SumoMe Welcome Mat Free Alternative - DevSeries

CCarter

Final Boss ®
Moderator
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
4,357
Likes
8,864
Degree
8
You ever go to those websites and the second before you scroll down a big call to action takes up the whole screen? Yeah it pisses you off right? Thing is it gets results, so I was looking for that code cause it was some basic stuff, then learned it was called a "Welcome Mat" by SumoMe. Example:

K0iijKO.jpg


The thing is they charged a monthly fee for a couple of lines of javascript. Coming from the open source world, obviously this was unacceptable to me cause it was literally some lines of code. So I continued digging and found a version that's easy to customize. Here is an example page I put up for you folks to see it in action: SumoMe Welcome Mat Free Open Source Alternative

TK2lZvg.gif


And here is the css code you'll need to put in between the <head><head> html tags:

Code:
<!-- Style this nonsense - @MercenaryCarter -->
<style type="text/css">
body {
  margin: 0px;
}

@import url("https://fonts.googleapis.com/css?family=Raleway");
.introduction {
  font-family: 'Raleway';
  color: #fff;
  text-align: center;
}
.introduction h1 {
  font-size: 3.5em;
}
.introduction h2 {
  font-size: 2.8em;
}
.introduction .shade {
  background-color: rgba(0,0,0,0.5);
}
.introduction .shade .container .row {
  position: relative;
//position: absolute; //you might need to make this absolute to play nicely
  height: 100%;
}
.introduction .shade .container .row .header {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.introduction .shade .container .row button {
  font-size: 0.9em;
  padding: 8px 25px;
  background-color: #33c3f0;
  border-color: #33c3f0;
}
</style>
<!-- End of style this nonsense - @MercenaryCarter -->

--

Here is the HTML code you'll need to put after the first <body> tag:

Code:
<!-- This shit is require mated - @MercenaryCarter -->
<div class="introduction">
  <div class="shade">
  <div class="container">
  <div class="row">
  <div class="col-xs-12 text-center header">
  <h1><b>Welcome to Money Over Ethics</b></h1>
  <h2><i>(Slogan here)</i></h2><br/>
  <a href="http://www.moneyoverethics.com/"><img src="http://www.moneyoverethics.com/images/Newsletter-big.jpg"></a><br/><br/>
  <button href="http://www.moneyoverethics.com/" class="button btn btn-info btn-lg">LEARN MORE</button>
  <button href="#closeMofo" class="btn btn-default closeMofo">NO THANKS</button>
  </div>
  </div>
  </div>
  </div>
</div>
<!-- End of require mated - @MercenaryCarter -->

--

And here is the end javascript using jQuery you'll need to put at the end of your page before the last </body> tag:

Code:
<!-- Stuff that makes the javascript run - @MercenaryCarter -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

<script type="text/javascript">
// Utilises https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js

// Change this to include desired pictures
var pictureArray = ["http://dl.dropbox.com/u/515046/www/outside.jpg",
  "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg",
  "http://dl.dropbox.com/u/515046/www/cheers.jpg"
];

$(document).ready(function() {

  resizeEvent();
  $(".introduction").backstretch(pictureArray, {
  duration: 3000,
  fade: 750
  });

  $(window).bind("resize", function() {
  resizeEvent();
  });
});

function resizeEvent() {
  $(".introduction .shade .container .row").css("height", $(window).height());

  $(".introduction .shade").css("height", $(window).height());
}

$('.closeMofo').on('click', function(e){
  $(".introduction").slideUp(500);
  e.preventDefault();
  });
</script>
<!-- Stuff that makes the javascript run - @MercenaryCarter -->

--

That's it.

wEJyWkU.gif


Play around with it and the css to make sure it works on your site. Oh yeah by the way, you might want to add a cookie in the code so it doesn't re-appear after the user has already closed it and comes back to the site. If I'm not feeling lazy I might circle back to this and improve it. You can also view the source code of the page I provided to above.

If you want more stuff like this just send in a request to the mods and we'll see if we can dig up and re-create some of these un-necessarily complicating code for this new series I'm calling the DevSeries for this section.

Till Next time.

- CC

yKgXdEY.gif
 
Last edited:
This is awesome, thanks for taking the time to put this together. I'd love to see more of these in the future.

SumoMe and HelloBar also have that little bar that floats at the top of the page, kind of like a one-line version of the welcome mat, and HelloBar charges you for every visitor that clicks it (These are visitors that are already on your site.) IIRC it's something like .10 or .15 per click... for traffic that's already on your site.

Love the idea of BuSo being able to disrupt some of these plugins that are getting away with murder. Stuff like this makes everyone have to step their game up.
 
HelloBar charges you for every visitor that clicks it (These are visitors that are already on your site.)

Yeah that's pretty funny. I'll create a replica of that soon for BuSo.

It won't include the tracking and split testing some of these off-the-shelf ones include, but we all know how to that on our own, I hope.
 
I managed to get this to work on a busolightning localhost install, but i cant get it to work on the theme i'm using which is sahifa. The javascript doesn't work at all and the image and buttons aren't even clickable. I'm at my wit's end. I tried deactivating all plugins but the jquery still wouldn't run. What could be the issue?
 
You need to make sure the jquery is being called.

If buttons are not clickable that means there is some hidden layer ontop of them, so you should change the z-index of the button or the ".introduction" to something higher like 100 or 1000

Potential code to add to .introduction:
Code:
z-index: 1000:

If it is working fine with Buso Lightening then it's the other theme's css that's causing the conflict. Use chrome or Firefox to "inspect the element" by right clicking and viewing what is invisible element is blocking it, then adjust the css or use the z-index to move your element above that. Link: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
 
Spent a good 4 hours trying to figure this out, turns out the way the theme was coded meant that my div would get stuck somewhere in between other divs. Anyway, figured that out, now the code works fine.

So now the learn more button directs the users to the ecomm section via this code:
Code:
$('.css_class_here').on('click', function(e){
    window.location = "url_here";
        e.preventDefault();
    });

Except for the cookies. The thing now loads on every refresh. I'm very new to javascript so imma need some help here. I tried this code but it broke the whole thing and I'm back to where it's not clickable:

Code:
<!-- Start Welcome Mat js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">

// Change this to include desired pictures
var pictureArray = ["insert pic"];   

$(document).ready(function() {


if ($.cookie('test_status') != '2501') {
      resizeEvent();
      $(".introduction").backstretch(pictureArray, {
        duration: 3000,
        fade: 750
      });

  $(window).bind("resize", function() {
    resizeEvent();
      });
       
    $.cookie('test_status', '2501', { expires: 30 }); //30 days
}   
});

function resizeEvent() {
  $(".introduction .shade .container .row").css("height", $(window).height());

  $(".introduction .shade").css("height", $(window).height());
}

$('.closeMofo').on('click', function(e){
    $(".introduction").slideUp(500);
        e.preventDefault();
    });
$('.shop').on('click', function(e){
    window.location = "url_here/";
        e.preventDefault();
    });

</script>

What am I doing wrong?
 
in the HTML portion the button for Learn More has a simple URL link:

Code:
<button href="http://www.moneyoverethics.com/" class="button btn btn-info btn-lg">LEARN MORE</button>

^^ Why not just change that http://www.moneyoverethics.com/ to the URL you want to?

But if you REALLY don't want to do that, you need to have the ".shop" class in the class like so, and remove the href like:

<button href="#randomstuff" class="button btn btn-info btn-lg shop">LEARN MORE</button>

Your code looks okay to be honest, but you adding that .shop is not necessary, you can just use a direct link and switch out the very top url from my blog. The reason .closeMofo is there is because it closes the whole welcome mat. Basically adding a link in the jquery is just adding more un-necessary code.
 
thanks for that. Yeah I implemented that and it worked better. But what about cookies? What's wrong with the code there?
 
But what about cookies? What's wrong with the code there?

I don't know. It looks fine. The code looks for a cookie named "test_status". If it finds "test_status" it checks if the value is 2501. If the value is NOT 2501 that means this is a brand new user, so it shows the welcome mat. If you notice at the end of the function it then sets a new cookie called "test_status" to 2501. That way if the user comes back it will not show the welcome mat.

The question is, DOES your site set the cookie to 2501 after the first visit? You should be able to see if it does or does not. double check your cookies after you visit your site for the first time that it's setting correctly, maybe try to move the cookie setting to below the "if statement" like so:

Code:
if ($.cookie('test_status') != '2501') {
  $.cookie('test_status', '2501', { expires: 30 }); //30 days
...

OR move the jquery.cookie js files to ABOVE the jquery.backstretch file cause that backstretch could be causing the conflict.
 
Back