Public
Advisor

Sign in pop up

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

24 Replies 24


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

Generic1.jpg

Trusted Contributor

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...

Check out our submission for the 2021 Customer Awards and give us a Kudos!
Khoros Alumni (Retired)

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; Smiley Wink):

Three_IE_Sign_up_prompt.png


Khoros Best Practice until August 2019. Onwards posting as Claudius.
Learn how to master Khoros. Learn Best Practice in the Community Documentation
If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.
Trusted Contributor

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  👀 


Check out our submission for the 2021 Customer Awards and give us a Kudos!

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

Trusted Contributor

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 


Check out our submission for the 2021 Customer Awards and give us a Kudos!

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

Trusted Contributor

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

Check out our submission for the 2021 Customer Awards and give us a Kudos!
Lithium Alumni (Retired)

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!


Paolo Tagliaferri
Principal Technical Consultant

Lithium
Trusted Contributor


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!


Check out our submission for the 2021 Customer Awards and give us a Kudos!

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.