Solved

Need Help - Showing Form or Click-to-Chat button based on business hours

  • 22 September 2019
  • 14 replies
  • 28 views
A

I am struggling to get custom JS to work in Unbounce. If anyone has a moment, I’d love some help.
Thank you!!!

I’ve spent the last week attempting to learn JS to build this feature without success. My current JS code has the chat availability hours in UTC Hours as Unbounce help confirmed rather than user’s time.

We would like the Chat button (placeholder for now) to show when Chat is online (specific hours: M-F 730a-530p MST, Sat 9a-1p, Sun closed) and hide when Chat is offline and show the headline+form during Chat offline hours.

THIS IS A LIVE PAGE FOR TESTING ONLY - PLEASE DO NOT FILL OUT AND SUBMIT FORM

PROBLEM:
It appears the Click to Chat button shows at all times and the form shows during off hours but the hours don’t always seem to be correct either.

Code below references:
Click-to-Chat - #lp-code-285
Form Headline - #lp-pom-text-187
Form - #lp-pom-form-127

JS Code (remember I am new to Javascript):

<script type="text/javascript">
//gets the current time.
var d = new Date();
var CurrentDay = d.getUTCDay();

if(CurrentDay == 1 && d.getUTCHours() >= 1330 && d.getUTCHours() <= 2330 ){
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}

else if(CurrentDay == 2 && d.getUTCHours() >= 1330 && d.getUTCHours() <= 2330 ){
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}
  
else if(CurrentDay == 3 && d.getUTCHours() >= 1330 && d.getUTCHours() <= 2330 ){
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}
  
else if(CurrentDay == 4 && d.getUTCHours() >= 1330 && d.getUTCHours() <= 2330 ){
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}
  
else if(CurrentDay == 5 && d.getUTCHours() >= 1330 && d.getUTCHours() <= 2330 ){
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}
else if(CurrentDay == 6 && d.getUTCHours() >= 15 && d.getUTCHours() <= 17 ){
    $("#lp-code-285").show();
    $("#lp-pom-text-187").hide();
    $("#lp-pom-form-127").hide();
}
  
else { 
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}
</script>
icon

Best answer by Josh_berry-jenkins 25 September 2019, 12:19

View original

14 replies

vneri

Hi, I don’t know if it solves the problem, but try to have all conditions in own brackets ( )

Like that you prevent any bug coming from operator bindings.

Other thing: take the code, put some console.log in it and run it in the webconsole (F12). Like that you can debug it step by step.

Josh_berry-jenkins

I think you are mis-using the getUTCHHours() it returns just the current hour, not minutes. So 13:30 would actually return as 13. As such the statement (>= 1330) wouldn’t ever be returned as true.

I would also tend to steer away from so many else if’s and instead use a switch/case statement but perhaps this isn’t the best solution for your setup.

Might be a bit neater to split this down into three cases, something like the below:

if(CurrentDay != 0 && CurrentDay < 6 &&  d.getUTCHours() >= 13 && d.getUTCHours() <= 23){
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
} else if (CurrentDay == 6 && d.getUTCHours() >= 15 && d.getUTCHours() <= 17){
    $("#lp-code-285").show();
    $("#lp-pom-text-187").hide();
    $("#lp-pom-form-127").hide();
} else {
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}
A

Thanks, appreciate all your help.

A

Thanks … will attempt! I really appreciate your help. JS is so new to me.

Josh_berry-jenkins

No worries, I hope that gets you on the right track! It can often be helpful to place a console.log() statement at the start of each if/else statement to check whether you’re getting the result you expected if you still find you’re having issues.

A

I finally had the opportunity to get back to debugging this issue and your code worked like a freaking charm! I can’t thank you enough!!!

A

I spoke too soon… doesn’t seem like it’s working in the off hours… still shows live chat button instead of form. Back to trouble shooting.

Josh_berry-jenkins

Hey in which case statement are you having the issue? You will want to create a time variable if you are dealing with hours and minutes still in the same way.

So the time variable will display the UTC time in the format of 1330, I’ve also added console logs to show the case, day and time for you to sense check what’s not working as you want:

var d = new Date();
var CurrentDay = d.getUTCDay();
var minutes = d.getUTCMinutes();
var time = d.getUTCHours()+("0" + minutes).slice(-2);

if(CurrentDay != 0 && CurrentDay < 6 &&  time >= 1330 && time <= 2300){
console.log('Case A { Day: ' + CurrentDay + ', Time: ' + time + '}' )
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
} else if (CurrentDay == 6 && time >= 1500 && time <= 1700){
console.log('Case B { Day: ' + CurrentDay + ', Time: ' + time + '}' )
    $("#lp-code-285").show();
    $("#lp-pom-text-187").hide();
    $("#lp-pom-form-127").hide();
} else {
console.log('Case C { Day: ' + CurrentDay + ', Time: ' + time + '}' )
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
}

Otherwise I’ll need a bit more information as to what isn’t working as you intend.

A

Here is my current code… I can move forward without the minutes. This is the first time I’ve written JS so I don’t understand the console.log snippets you’ve added or if it’s needed since I’m no longer using minutes. I appreciate your time.

Problem: Click to Chat or #lp-code-285" is showing at all hours of the day but now that I’m looking at it this very moment… is that because my else statement is actually incorrect! ARGH. I’m telling it to show what I want it to hide.

//gets the current time.
var d = new Date();
var CurrentDay = d.getUTCDay();

if(CurrentDay != 1 && CurrentDay < 6 &&  d.getUTCHours() >= 13 && d.getUTCHours() <= 24){
    $("#lp-code-285").show();
    $("#lp-pom-text-187").hide();
    $("#lp-pom-form-127").hide();
} else if (CurrentDay == 6 && d.getUTCHours() >= 15 && d.getUTCHours() <= 19){
    $("#lp-code-285").hide();
    $("#lp-pom-text-187").show();
    $("#lp-pom-form-127").show();
} else {
    $("#lp-code-285").show();
    $("#lp-pom-text-187").hide();
    $("#lp-pom-form-127").hide();
}
</script>
Josh_berry-jenkins

The console logs give an idea of what case statement has evaluated as true, additionally it logs the day and time variables so that you can see if something doesn’t match up to your statement.

For example running the if statements in the console right now I get:

Case A {Day: 5, Time: 1538}

Meaning the first if statement evaluated as expected during the current timeframe, meaning chat should be hidden and form & text should be showing.

A

Thanks for the explaination. I’ll test this out. I edited my post above. I think the issue might be me… I had the else statement incorrect. I was telling it to show the chat code during off hours rather than show form. I’ve corrected and will test out.

Josh_berry-jenkins

It happens unfortunately, more often than not it’s a silly little error 😦

A

:clap: sending you virtual high-five for helping me get this and being there til the end : )

Josh_berry-jenkins

:clap: No worries - best of luck in your javascript endeavours!

Reply


Terms & ConditionsCookie settings