Sign in pop up

[cheathcote]

We would like to have the sign up window automatically pop up when someone visits our home page to try and increase sign ups and logins/interactions with the community. 

I was wondering if anyone else had done this or something similar? If so did it help to increase sign ups and/or engagement and how did you implement it?

TIA

[JasonHill]

---

cheathcote wrote:

@JasonHill I agree it would be a really useful addition to the platform. When we did the same on our blog, it increased our subscription rates/ conversions massively.

---

@cheathcote

I couldn't find any feature requests like this on the idea exchange so have just added one. Please add your vote and comments to the following request - /t5/Product-Ideas/Pop-up-to-encourage-users-to-register/idi-p/282608

Jason

[SheenaK]

We have just gone live with a pop up that appears after the average time spent on the page. It remains to be seen if there is a benefit but I'll come back and let you all know how it went in a week or so. This is only on our blogs and not on the forum pages, as there's no real call-to-action otherwise there.

If you want to see it in action you can here - http://forum.three.ie/t5/NewsFeed/Weekly-Tech-News-Mobile-World-Congress-USB-Type-C-and-more/ba-p/15...

[ClaudiusH]

Thanks for sharing @SheenaK - Really curious what you will learn from this trial.

I think a big challenge is working out how various popups and prompt complement each other without competing too much or create an experience of being blared at as a visitor. In your example you have the survey and registration prompt competing (and it's gonna be hard to win against z-index: 2000000000; ):

[SheenaK]

You're absolutely correct @ClaudiusH, plus the last thing I want to do is ruin the customers experience (or trust) by having too many popups distracting them from the actual content.

My guess is that we'll look at the results in a week or 2, and decide then which pop to keep. If either the click-thrus on the pop up are not high enough to justify it, or we lose a lot of people when it pops, we will be turning it off. If it performs better than I expect it to, we may turn off the survey's on these pages, or alternate between survey or pop up.

We actually just went live with the survey Friday evening so I hadn't yet noticed the z-index! I guess the survey dev team really didn't want people to miss it  👀 

[cheathcote]

@SheenaK This looks exactly like what we would like to trial. Would you mind sharing the code?

[SheenaK]

No problem @cheathcote, although I should point out that I'm self taught when it comes to coding, so there may be a better version of this available somewhere, or perhaps someone may be able to suggest a cleaner way to do this 😳

This is a custom component on the page:

<div id="boxesnews">
<#if user.anonymous>
  <div id="dialognews" class="window" >
         <h2 style="font-size:30px"><br>Hey there!</h2><br>
		<div class="content" style="text-align:center">
If you like what you’re reading,  why not subscribe by registering below? It only takes one minute… We've timed it!<br><br><br>

<div class="CTAbuttons" style="background-color: #000000; border: 1px solid #000000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #EFEFEF; font-size: 14px; line-height: 18px; font-family: HelveticaNeue-Roman; font-weight: normal; text-decoration: none; padding:10px; text-align: center; width: 25%; margin-left: 36%;">
<b> <@component id="users.action.login" /></b>
</div>
<br>
<div class="CTAbuttons" style="background-color: #000000; border: 1px solid #000000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #EFEFEF; font-size: 14px; line-height: 18px; font-family: HelveticaNeue-Roman; font-weight: normal; text-decoration: none; padding:10px; text-align: center; width: 25%; margin-left: 36%;">
<b><@component id="users.action.registration" /></b>
</div>
</div>
  </div>
  <div id="masknews"></div>
<#else>
</div>

</#if>

</div>

<!-- newsfeed pop up -->

<@liaAddScript>
;(function($) {	
$(document).ready(function() { 
var id = '#dialognews';
   
var maskHeight = $(document).height();
var maskWidth = $(document).width();
   
$('#masknews').css({'width':maskWidth,'height':maskHeight});
 
$('#masknews') .delay(100000) .fadeIn(300);
$('#masknews').fadeTo("slow",0.9); 
   
var winH = $(window).height();
var winW = $(window).width();
               
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
   
$(id) .delay(100000) .fadeIn(300);  
   
$('.window .close').click(function (e) {

e.preventDefault();
 
$('#masknews').hide();
$('.window').hide();
});
 
$('#masknews').click(function () {
$(this).hide();
$('.window').hide();
});
   
});
})(LITHIUM.jQuery);
</@liaAddScript>
<!-- end newsfeed pop up -->

And here's the CSS:

/* newsfeed popup */
#masknews {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}
 
#boxesnews .window {
  position: fixed;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}
 
#boxesnews #dialognews {
  width: 550px;
  height: 300px;
  padding: 10px;
  background-color: #ffffff;
  font-family: HelveticaNeue-Bold,HelveticaNeue-Roman;
  font-size: 15pt;
}
 
#popupfootnews {
  font-size: 16pt;
  position: absolute;
  bottom: 0px;
  width: 250px;
  left: 250px;
}

.CTAbuttons, .CTAbuttons a, CTAbuttons a:link {
color: white!important;
}

/* end newsfeed popup */

EDIT: updated code 

[stutaylor]

Thanks @SheenaK I work with Ceri and we will try this on our dev environment in the morning and let you know how we get on.

Thanks for the help

[SheenaK]

Happy to have helped @stutaylor 🙂 I'll post back with how our trial went in a week or so.

[PaoloT]

Hi @SheenaK 

may I suggest something? In your code you seem to be linking an external jQuery library 

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

However the code itself seem to be using the jQuery Lithium already packs in the platform. Unless you need it, I would suggest to remove the script tag as it means you only use one jQuery (the one we ship within Lithium) and not load another copy (which can make the pages slow).

Just my two cents!

[SheenaK]

---

PaoloT wrote:

Hi @3SheenaIrl 

may I suggest something? In your code you seem to be linking an external jQuery library 

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

However the code itself seem to be using the jQuery Lithium already packs in the platform. Unless you need it, I would suggest to remove the script tag as it means you only use one jQuery (the one we ship within Lithium) and not load another copy (which can make the pages slow).

Just my two cents!

---

Thanks @PaoloT, I tested that out in the stage environment and you're absolutely correct, that line isn't needed 🙂 Appreciate the tip!