Show welcome message for customers first day!

[MehmetZalah]

Hello,

 

Show popup message for new clients.

 

I think this algorithm will help:

 

if “customer registration date” is exactly equal to today's date {

view popup message

}

 

That’s mean, The condition will be true only IF the customer login into the clientarea the same day for registration.

 

Hope one help!

 

Thanks in Advance.

[brian!]

you couldn't do it just by editing a template as the signup date isn't passed to it - so you'd need an action hook to pass it to the cart..

 

<?php

function client_signup_date_hook($vars) {

   $client = Menu::context('client');
   $signup = $client->dateCreated;

   return array("signup" => $signup);
}
add_hook("ClientAreaPage", 1, "client_signup_date_hook");
?>

and then in the template...

 

{if $smarty.now|date_format:"%Y-%m-%d" eq $signup|date_format:"%Y-%m-%d"}
welcome and thank you for signing up today! (popup message)
{/if}

the above is a basic way to do it, but if you wanted to do everything in the hook, including a bootstrap popup shown only once, you could do this...

 

<?php

//Show modal popup to clients a welcome message on their first day (only once!)
//provided by brian!

function client_custom_headoutput_hook($vars) {

   $head_return = '';
   $head_return = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
   <script>
   $(document).ready(function() {
     if ($.cookie("dismiss") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".dismiss").click(function() {
       $.cookie(\'dismiss\', \'true\', { expires: 2, path: \'/\' });
     });
   });
   </script>';

   return $head_return;
}
add_hook("ClientAreaHeadOutput",1,"client_custom_headoutput_hook");

function client_custom_headeroutput_hook($vars) {

   $client = Menu::context('client');
   $today = date("Y-m-d");
   $templatefile = $vars['templatefile'];

   if (empty($client->id)) { return; }

   if ($client->dateCreated == $today and $templatefile == "clientareahome") {

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><i class="fa fa-thumbs-up fa-lg"></i>  '.Lang::trans('hello').', '.$client->firstname.'</h4>
                   </div>
                   <div class="modal-body">
                       <p>Thank you for signing up with us today!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary dismiss" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';

       return $header_return;
   }
}
add_hook("ClientAreaHeaderOutput",1,"client_custom_headeroutput_hook");

 

ideally, if your site uses multiple languages, then you should use Language Overrides for all the text - i've done that on 2/3 of the above (top line and Close button).

 

* tested and working on a v7.2.1 dev using the default Six template... if using a custom template other than one based on Six, you may need to make changes!

[MehmetZalah]

Dear Mr. brian,

 

Thank you very much for your help. You are awesome!

 

This help me so much and well done

 

Best Regards,

[AffordableDomainsCanada]

What if a client signs up but doesnt login the same day, can this be implemented say if the client logs in 3 days from the signup date?

 

- - - Updated - - -

 

Doesnt seem to work on 7.2.2

[brian!]

What if a client signs up but doesn't login the same day, can this be implemented say if the client logs in 3 days from the signup date?

you could grab the login date using Carbon, calculate the difference between it and today and add it to the IF statement as another condition.

 

Doesn't seem to work on 7.2.2

i've just tested again on a v7.2.2 dev and it works fine - bear in mind what I said previously though... it's tested successfully on v7.2.2 using the six template.

 

once you get beyond Six and start using custom themes, e.g clouder, you run the risk of .js conflicts - e.g "Six" calls 1 .js file, your clouder theme calls at least 8 and it only needs one to clash with the hook for it to fail.

 

the only additional .js file the hook calls is the external cookie script - I bet if you try it on "six", the hook will work fine.

[brian!]

to add a date range to the hook, e.g the popup will occur once anytime within x days/weeks/months etc of signing up...

 

<?php

//Show modal popup to clients (with a welcome message) for a specific period after client account creation (shown only once!)
//provided by brian!

function client_custom_headoutput_hook($vars) {

   $head_return = '';
   $head_return = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
   <script>
   $(document).ready(function() {
     if ($.cookie("dismiss") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".dismiss").click(function() {
       $.cookie(\'dismiss\', \'true\', { expires: 2, path: \'/\' });
     });
   });
   </script>';

   return $head_return;
}
add_hook("ClientAreaHeadOutput",1,"client_custom_headoutput_hook");

use Carbon\Carbon;

function client_custom_headeroutput_hook($vars) {

   $client = Menu::context('client');
   $created = Carbon::parse($client->dateCreated);
   $enddate = Carbon::parse($client->dateCreated)->addDays(5);
   $today = Carbon::today();

   $templatefile = $vars['templatefile'];

   if (empty($client->id)) { return; }

   if ($today >= $created and $today <= $enddate and $templatefile == "clientareahome") {

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><i class="fa fa-thumbs-up fa-lg"></i>  '.Lang::trans('hello').', '.$client->firstname.'</h4>
                   </div>
                   <div class="modal-body">
                       <p>Thank you for signing up with us!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary dismiss" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';

       return $header_return;
   }
}
add_hook("ClientAreaHeaderOutput",1,"client_custom_headeroutput_hook");

in the above example, it's set to within 5 days of the account creation date - but you could change that to any range more suitable for your needs.

[AffordableDomainsCanada]

Is there a way to resize the popup window?

 

also, is there a way I can use this for guest?

Edited July 7, 2017 by AffordableDomainsCanada

[brian!]

Hi Jason,

 

Is there a way to resize the popup window?

in the above version, i've used Bootstrap modal windows (I have posted code previously that does the same thing using jQuery windows, but Bootstrap is more visually pleasing) - Bootstrap modals come in 3 default widths: Small (modal-sm, 300px), Medium (600px) and Large (modal-lg, 900px)... these widths are defined in the css files (in the WHMCS clientarea, that would be /templates/six (or custom)/css/all.min.css).

 

therefore, there is nothing to stop you using a custom.css file to either change these default width values, or define new width classes for use in the hook.

 

alternatively, for specific cases, you could always define a modal width (and/or height etc) inline in the hook code..

<div class="modal-dialog" style="width: 255px;">

 

also, is there a way I can use this for guest?

yes - from the previous code, you'd just need to modify the line below... which basically checks if the client is logged in, and if not (e.g a guest), does nothing.

    if (empty($client->id)) { return; }

so if you modified the hook code to do something for guests (as well as the new clients), you could do this...

 

<?php

//Show modal popup to clients a welcome message on their first day (only once!) or to guests.
//provided by brian!

function client_custom_headoutput_hook($vars) {

   $client = Menu::context('client');
   $head_return = '';
   $head_return = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>';
   if (!empty($client->id)) {
   $head_return .= '
   <script>
   $(document).ready(function() {
     if ($.cookie("dismiss") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".dismiss").click(function() {
       $.cookie(\'dismiss\', \'true\', { expires: 5, path: \'/\' });
     });
   });
   </script>'; }
   else {
   $head_return .= '
   <script>
   $(document).ready(function() {
     if ($.cookie("guest") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".guest").click(function() {
       $.cookie(\'guest\', \'true\', { expires: 365, path: \'/\' });
     });
   });
   </script>'; }        

   return $head_return;
}
add_hook("ClientAreaHeadOutput",1,"client_custom_headoutput_hook");

use Carbon\Carbon;

function client_custom_headeroutput_hook($vars) {

   $client = Menu::context('client');
   $created = Carbon::parse($client->dateCreated);
   $enddate = Carbon::parse($client->dateCreated)->addDays(5);
   $today = Carbon::today();

   $templatefile = $vars['templatefile'];

   if (empty($client->id) and $templatefile == "homepage") { 

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close guest" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><img src="http://icons.veryicon.com/32/Flag/Not%20a%20Patriot/Canada%20Flag.png">  '.Lang::trans('hello').', Guest</h4>
                   </div>
                   <div class="modal-body">
                       <p>Welcome to AffordableDomains!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary guest" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';
       return $header_return;    
   }
   elseif ($today >= $created and $today <= $enddate and $templatefile == "clientareahome") {

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close dismiss" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><i class="fa fa-thumbs-up fa-lg"></i>  '.Lang::trans('hello').', '.$client->firstname.'</h4>
                   </div>
                   <div class="modal-body">
                       <p>Thank you for signing up with us today!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary dismiss" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';
       return $header_return;
   }
}
add_hook("ClientAreaHeaderOutput",1,"client_custom_headeroutput_hook");

it's slightly longer, but that's because I don't know your intentions for this and so i've tried to cover both client and guest scenarios... if it's purely for guests, then you can cut the size down by dropping the else from the first half and the elseif from the second half... alternatively, just split it into two hook files, one for guests, another for clients and use them separately when required.

 

it now contains two cookies that are independent of each other (one for guests lasting a year, and one for clients lasting 5 days)... that avoids the issue of them using the same cookie, and if/when guests later become clients, the client popup not showing... in the above example, the client cookie only has to last until after the IF conditions are no longer satisfied... for guests, you could change the value to thousands to effectively dismiss it for decades!

 

 

btw - cookie dismissal occurs when they press the Close or X buttons... if they press outside the modal window, it will return!

 

i've just spotted you're using a modal window for the dropdown menus - now I see why you may have asked about sizes... the following tweak make it more compact...

<div class="modal-dialog" style="width:400px;">

 

[AffordableDomainsCanada]

I am actually using this on a clients site.

 

After looking into bootstrap models a little further I actually made the change here:

 

<div class="modal-dialog modal-sm">

 

Changed to:

<div class="modal-dialog modal-md">

 

Here is how I used this popup! Very useful!

[brian!]

I am actually using this on a clients site.

After looking into bootstrap models a little further I actually made the change here:

Changed to:

Here is how I used this popup! Very useful!

thanks for the images - I always enjoy discovering that code i've posted is actually being used in the real world.

 

on a small technical note, I think these modal windows are medium by default, so you don't need to specify modal-md - unless that's a custom css that you've setup for this site.

[AffordableDomainsCanada]

I love these small modifications that add that little bit more to my site(s).

 

The modal-sm code is in the hook you provided, I changed the sm to lg at first and it was waay to big, so i changed it to md and perfect!

[brian!]

The modal-sm code is in the hook you provided, I changed the sm to lg at first and it was waay to big, so i changed it to md and perfect!

yeah, I get that but what I mean is that md isn't defined in the css by default... so for medium, you just call modal-dialog...

 

small = <div class="modal-dialog modal-sm">

medium = <div class="modal-dialog">

large = <div class="modal-dialog modal-lg">

 

it's a trivial point as it will work the way you've done it, but it's just trying to call a css class that doesn't exist, so it's falling back on the default width (600px or auto) of modal-dialog.

[AffordableDomainsCanada]

yeah, I get that but what I mean is that md isn't defined in the css by default... so for medium, you just call modal-dialog...

 

it's a trivial point as it will work the way you've done it, but it's just trying to call a css class that doesn't exist, so it's falling back on the default width (600px or auto) of modal-dialog.

Ahhh, I see what you mean here! Its good to know, I like learning these little ins and outs of coding.

[AffordableDomainsCanada]

yeah, I get that but what I mean is that md isn't defined in the css by default... so for medium, you just call modal-dialog...

 

So I removed the md

<div class="modal-dialog">

 

This would not load any model on the site! so md has to be added to the class

[brian!]

how weird - when I do it on the dev, I get the medium modal window without any issues... i'm wondering if there are other modal windows at play on your client's site, e.g chat window etc ??

 

 

 

I bet it would work on your site if you used modal-jason too... but if it needs modal-md to work, don't fight against it - give in!

[AffordableDomainsCanada]

Im sure I have something else that is conflicting with it! All I know is without the md it didnt want to show, and when I added it back it reappeared like it was supposed to Love this popup window idea!

[brian!]

Love this popup window idea!

i've created a monster!

[AffordableDomainsCanada]

This popup works amazing on the homepage, can it be implemented so it will show on ALL pages until a user clicks on the dismiss button? or in my example the 'I Agree' button?

 

Right now it will show everytime the homepage is visited but once navigated away from the homepage the popup goes away, I want the user to agree before being able to visit the site or be shown the popup everypage..

[brian!]

This popup works amazing on the homepage, can it be implemented so it will show on ALL pages until a user clicks on the dismiss button? or in my example the 'I Agree' button?

you should just need to remove the $templatefile part of the IF statement and it will appear on every client area page - including the cart.

 

if (empty($client->id)) {

 

Right now it will show everytime the homepage is visited but once navigated away from the homepage the popup goes away, I want the user to agree before being able to visit the site or be shown the popup everypage..

it will be the if statement causing that... e.g it's specifically coded to only work on the homepage (or clientarehome in the case of logged in clients) - as that was the original question... remove that condition, and it will appear everywhere until dismissed.

 

one thought... if you wanted it to show everywhere, apart from the login page...

 

if (empty($client->id) and $templatefile != "login") { 

[wendell costa]

how do I appear to everyone as many times as I want?

[brian!]

On 25/05/2020 at 15:04, wendell costa said:

how do I appear to everyone as many times as I want?

you would need to add a counter to the cookie and then dismiss the alert when the desired number had been reached.

[sol2010]

Hi ! @brian!

How can I modify this to check against users last login?  E.g check against, existing users who have not logged in for say 4 weeks -

I'm guessing I would need to change:   $created = Carbon::parse($client->dateCreated);  >  something else.....

Would something this work?   

$client = Menu::context('client');
   $lastlogin= Carbon::parse($client->lastLogin);
   $enddate = Carbon::parse($client->lastLogin)->addDays(30); // one month
   $today = Carbon::today();

   $templatefile = $vars['templatefile'];

   if ($today >= $lastlogin and $today <= $enddate and $templatefile == "clientareahome") {

Two issues I have:

1) where does one get the Carbon info from - I assume it's a direct copy from the DB table - but in mine, it shows "datecreated" not dateCreated, so I'm not sure if I am looking in the right place 

2) How can I test this in the browser to check it's working.... is there a way to show e.g. console log or similar?

 

Thanks!

 

 

[brian!]

9 hours ago, sol2010 said:

How can I modify this to check against users last login?  E.g check against, existing users who have not logged in for say 4 weeks -

I think your biggest problem might be the storing of the last login date... e.g let's say I (as a user) haven't logged in since the start of the year, so the last login date will be 2021-01-91 00:00:01 - so far, so good... but if I login today, then as soon as I do, the last login date gets updated to now... so that date of 1st Jan has been lost.... so as per your hook code, under those circumstances today would never be later than the last login date.. I guess unless you logged in a split second before midnight.

if you wanted to go down this road, you might need to create a log of when users/clients (whatever!) login and then referencing that in your hook query above.

9 hours ago, sol2010 said:

1) where does one get the Carbon info from - I assume it's a direct copy from the DB table - but in mine, it shows "datecreated" not dateCreated, so I'm not sure if I am looking in the right place 

I was using the Class docs when I wrote that, and specifically the options for the Client... here is the link to the v7.10 relevant class docs page - AFAIK, v8 still use these, but they're not listed in the v8 docs... using the user login details would be an option too (though there is a slight difference between a user and a client in terms of logging in).

9 hours ago, sol2010 said:

2) How can I test this in the browser to check it's working.... is there a way to show e.g. console log or similar?

ideally, have multiple devs where you have lots of clients in various states to test such things... failing that, returning the values back to the template would allow you to see the dates WHMCS is working with.

[sol2010]

Thanks @brian! - I can see it would be an issue with no valid "lastlogin" time 🤣

 

Quote

if you wanted to go down this road, you might need to create a log of when users/clients (whatever!) login and then referencing that in your hook query above.

I have no idea how I would do that.  I assume it would need a new DB table or column ?