Widget popup for smaller screens and themes

swgorman · 2016-02-12 22:59:19

When optimized for mobile by controlling the size of the consumer's screen, we are using the widget on larger screens but have it present a popup for smaller screens, tablets, phones, etc. We have a theme for the popup created but can't get the theme to load correctly. It only displays the unformatted form. Do we need to go into the PHP somewhere and apply the theme manually? If so, how do we do that? If it's a setting to ensure it pops the theme, where do we set that?

Thanks!

PeopleInside · 2016-02-13 08:51:01

Hi swgorman,
thank you for posting your question / issue on the Forum.

This hear familiar to me, there are two different Topic on GitHub waiting for the fix:

https://github.com/LiveHelperChat/liveh … issues/813

https://github.com/LiveHelperChat/liveh … issues/807

We must wait a fix or if someone have a solution can share here smile

Last edited by PeopleInside (2016-02-13 08:51:43)

swgorman · 2016-02-13 20:15:03

Thanks Marco. Unfortunately, that's not the issue that I'm having. When chat is initiated from the widget on a small screen it displays an unformatted pop up box in a separate window that looks like this:

1455394119_screen_shot_2016-02-13_at_2.06.04_pm.png

I want the formatted version of that pop up, which should look formatted, with shading, box, etc.

The chat system sees my logos and if I create additional form questions for the chat box it shows those questions in both versions. It's just not pointing to the formatted box on small screens.

As well, for some reason, when I create the URL for my chat site, the login is located at /site_admin/user/login and when I remove that it points to the properly formatted page to initiate chat from (my second image).

The problem is that I can't get the system to automatically point to the formatted page instead of the unformatted one (my first image).

Last edited by swgorman (2016-02-13 20:31:42)

PeopleInside · 2016-02-13 20:17:26

Hi swgorman,
sorry again but I cannot assist with this.

You can consider commercial support if need or just try to see if someone can help you here.
Good luck and sorry smile

swgorman · 2016-02-13 20:19:19

Thanks Marco. Any help from other folks would be great! Live Helper community?!

In the meantime, Marco, can you direct me how to get commercial support?

PeopleInside · 2016-02-13 20:21:19

swgorman you can try to share your website link here where you have issue and you have Live Helper Chat Widget installed so I can try to give a more deep look.
for the commercial support you can refer this page:
https://livehelperchat.com/support-13c.html

At the bottom of the page you will find contact info.
Thank you smile

zet · 2016-03-11 12:57:45

The check whether to open a new window or not is made in design\defaulttheme\tpl\lhchatbox\getstatus.tpl.php.

- copy that file to the corresponding location in the customtheme branch (create subdirs first, if necessary)
- open the copy with a texteditor like Notepad++ and search for

if (window.innerWidth < 1024)

That means: currently, whenever your visitor's screen is smaller than 1024 pixels, a new page will be displayed instead of the widget.
Thus, if you want the widget to be displayed on smaller devices,too then simply reduce the 1024 to whatever value you like.
- Save your change, refresh cache and you're done.

Just to add a fast solution for Marco's #807 problem:
you may OR the condition with the device's height, too like:

if (window.innerWidth < 1024 || window.innerHeight < 500)

Since I don't know the concrete height of your widget Marco, you have to adjust my example 500 to your needs. Of course it would be much smarter if the widget's size would be calculated by livehelperchat instead of using hardcoded constants ... but I'll leave this on the todo list of Mr. Kiminas angel

Last edited by zet (2016-03-11 13:09:55)

PeopleInside · 2016-03-11 13:17:57

zet wrote:

The check whether to open a new window or not is made in design\defaulttheme\tpl\lhchatbox\getstatus.tpl.php.
- copy that file to the corresponding location in the customtheme branch (create subdirs first, if necessary)
- open the copy with a texteditor like Notepad++ and search for
if (window.innerWidth < 1024)
That means: currently, whenever your visitor's screen is smaller than 1024 pixels, a new page will be displayed instead of the widget.
Thus, if you want the widget to be displayed on smaller devices,too then simply reduce the 1024 to whatever value you like.
- Save your change, refresh cache and you're done.
Just to add a fast solution for Marco's #807 problem:
you may OR the condition with the device's height, too like:
if (window.innerWidth < 1024 || window.innerHeight < 500)
Since I don't know the concrete height of your widget Marco, you have to adjust my example 500 to your needs. Of course it would be much smarter if the widget's size would be calculated by livehelperchat instead of using hardcoded constants ... but I'll leave this on the todo list of Mr. Kiminas

Thank you smile I will try and see smile
Not sure works... it should works but from my test not solve the issue.
Widget is opened also in not hight window

Last edited by PeopleInside (2016-03-11 13:32:57)

PeopleInside · 2016-03-11 13:37:03

Seems not work smile tested. My widget is hight 450 so I replaced your value 500 with 400.
I created subdirectories and put the file design\customtheme\tpl\lhchatbox\getstatus.tpl.php with the edit

if (window.innerWidth < 1024 || window.innerHeight < 400)

tested but seems to not work smile

Maybe because lhchatbox is not the right folder the right folder is lhchat, will now test with this folder, same instructions.

MMM not is different here.. not work can't find the same.

Last edited by PeopleInside (2016-03-11 13:42:29)

zet · 2016-03-11 15:10:08

Ah I see! My code was meant for the chatbox widget - but YOU are using the livehelp widget. No problem, the procedure is very much the same ...

The check whether to open a new window or not is made in design\defaulttheme\tpl\lhchat\getstatus.tpl.php. (line #440 referring to 2.40v)

- copy that file to the corresponding location in the customtheme branch (create subdirs first, if necessary)
- open the copy with a texteditor like Notepad++ and search for

if (window.innerWidth < 768)

- Apply your changes, refresh cache and you're done.

Besides that: What I don't understand: if the height of your widget is in fact 450: why are you comparing to an even smaller value (400) ?
If it should fit onto screen completely, the value to compare with has to be at least equal or a little bigger than 450

PeopleInside · 2016-03-11 15:13:13

I will try now. Yes maybe is good to keep same, 450.

PeopleInside · 2016-03-11 15:20:52

IT works, thanks.

Maybe if remdex should implement this will be better replace

window.innerHeight < 400

400 with the variable for get the hight of the widget so this will work for all user, not only for my case... so If user widget is set to 500 will work for 500 if is set for 600 will work for 600.
I will keep now the number 450 who are ok for my case,
thank you.

You are good in understanding someone other project code smile

PeopleInside · 2016-03-11 15:27:54

IT works if chat is on-line, seems not work if chat is offline.
Widget will be not opened in new windows in this case when I have widget page for leave messages.

Last edited by PeopleInside (2016-03-11 15:28:17)

zet · 2016-03-11 17:15:07

He Marco,

I just have been at your site. For me everything works fine:

with height = 475 and operator offline I'm getting a new page,
with height = 495 I'm getting the widget.

I'm running latest Firefox on win 10. Maybe there are problems with different browsers,
since your site is stuffed with all kind of javascripts ... right-click-disabling ... whatever one can think of ...

PeopleInside · 2016-03-11 18:24:46

Thank you, I will try to replace 450 with 400 maybe this solve the issue as should be not opened as widget at 475.
Thanks big_smile

PeopleInside · 2016-03-11 22:02:10

Hi,
I have understand where is the issue, I set now the value

if (window.innerWidth < 768 || window.innerHeight < 500)

and tested. With online form work perfect, with offline form not work well and I know why.
window.innerHeight start to count the Height from the First input Field (Name) where in the screen below I have put the green arrow,
but in my case the offline widget has more long text (red arrow) and goes out of the screen.

I think is an issue in the code, the command window.innerHeight not consider where are red arrow but start from green to count the hight

OK set 500 to fit the offline widget form who is more long smile

Last edited by PeopleInside (2016-03-11 22:08:43)

zet · 2016-03-12 18:30:26

Hi Marco,
I'm afraid there are still some misunderstandings on your side ...
The method window.innerHeight does not calculate the height of your widget, it calculates the height of the usable browser window.
Calculating the size of the widget here would need a lot more code, because at this stage it is not rendered yet.
As a quick workaround you may find out the correct sizes yourself and put them in the programm code.

First: be aware that the following code will pop up an alert window. But the procedure will not take more than five 5 minutes, so you won't frighten too many visitors, I think. cool
Things will be easier if you work with 2 browsers, so
- log in to your backend with browser 1
- open your website in browser 2
- apply my code to design\customtheme\tpl\lhchat\getstatus.tpl.php

var widget_height = 0;						// height of your online widget
var difference = 0;						// height difference of offline widget
if (this.isOnline == false) { 					// if offline
	widget_height = widget_height + difference; 	 	// widen height of online widget
}
alert(window.innerHeight);		  
if (window.innerWidth < 768 || window.innerHeight < widget_height) {    // overwrite old line with this one

(note, that we start with both values set to zero in order to guarantee, that the widgets will be displayed)

- save code and clean cache in backend browser
- refresh your sitepage in browser 2 and make the chat widget appear
- resize browser 2 to make the widget fit right into the browser height
- close widget, and open again. this time copy/ write down the value shown in the alert window
- replace the value of widget_height in code with the value you just found.
- clean cache and switch your state to offline in backend browser
- back in the frontend the offline widget should appear now
- again make the browser fit to the new height and write down the new value from alert window
- then calculate: bigger value - smaller value = difference and replace the value in the code.
- finally add 2 slashes // in front of the alert command - which will make it disappear.
- save code, clean cache and that's it.

Last edited by zet (2016-03-12 18:34:35)

PeopleInside · 2016-03-12 22:08:20

yikes wink

PeopleInside · 2016-03-13 07:24:07

zet,
thank you for your help!

I will not do for now this complex edit. Is working with the previous one and 500 value.
Thank you so much!

Last edited by PeopleInside (2016-03-13 07:24:46)

Announcement

#1 2016-02-12 22:59:19

Widget popup for smaller screens and themes

#2 2016-02-13 08:51:01

Re: Widget popup for smaller screens and themes

#3 2016-02-13 20:15:03

Re: Widget popup for smaller screens and themes

#4 2016-02-13 20:17:26

Re: Widget popup for smaller screens and themes

#5 2016-02-13 20:19:19

Re: Widget popup for smaller screens and themes

#6 2016-02-13 20:21:19

Re: Widget popup for smaller screens and themes

#7 2016-03-11 12:57:45

Re: Widget popup for smaller screens and themes

#8 2016-03-11 13:17:57

Re: Widget popup for smaller screens and themes

#9 2016-03-11 13:37:03

Re: Widget popup for smaller screens and themes

#10 2016-03-11 15:10:08

Re: Widget popup for smaller screens and themes

#11 2016-03-11 15:13:13

Re: Widget popup for smaller screens and themes

#12 2016-03-11 15:20:52

Re: Widget popup for smaller screens and themes

#13 2016-03-11 15:27:54

Re: Widget popup for smaller screens and themes

#14 2016-03-11 17:15:07

Re: Widget popup for smaller screens and themes

#15 2016-03-11 18:24:46

Re: Widget popup for smaller screens and themes

#16 2016-03-11 22:02:10

Re: Widget popup for smaller screens and themes

#17 2016-03-12 18:30:26

Re: Widget popup for smaller screens and themes

#18 2016-03-12 22:08:20

Re: Widget popup for smaller screens and themes

#19 2016-03-13 07:24:07

Re: Widget popup for smaller screens and themes

Board footer