Topic: Persistent Chat Windows w/o Need to Click Button

[talkinggoat]

I am looking for something that functions like Olark or the other chat programs. The way the chat window currently shows up is correct, but they have to click a button somewhere in the page to activate it. When the users click the live chat button, it activates JS, that puts a small chat icon at the bottom, right. The user then has to click the chat icon to bring up the chat window. I would like the chat icon to already be loaded, when the page loads, without the user needing to click on another button. Is there something in the settings that does this?

[faf]

I'm not sure what are you talking about, but maybe you're looking for "Tracking and inviting" option.

[stryker1]

I  guess I understood it and it seems to be the same I want to achieve:
I do not want the old 90th button "chat online/offline". Instead I just want this nice chatbubble in the bottom right corner to -directly- open the chat window.
Is there a way to directly show this chatbubble button?

[faf]

I do not want the old 90th button "chat online/offline". Instead I just want this nice chatbubble in the bottom right corner to -directly- open the chat window.
Is there a way to directly show this chatbubble button?

What stops you from replacing a standard image for the button with your own one (be it bubble, or anything else that fits your web design) and disable the "Pre-chat survey" option? In that case a visitor will start the new chat immediately after interaction with that button / bubble / whatever.

And if you want to automatically invite a visitor to chat so he could start chatting without any actions at all, use the plugin: https://mibew.org/plugins#mibew-autoinvite

[stryker1]

Changing the default .gif image to look like the blue Mibew chat buttom, place this gif also in the bottom-right corner and set "visibility: hidden" of the class "mibew-chat-frame-toggle" could be an option.

BUT: If the visitor already started the chat and hides it, a new click on the gif does not open the chatwindow.

So I would also need to put a link/event to the gif image to open the chat window (like it is on the blue chat button).
What is the function I must open here, or is there another solution?

[faf]

Changing the default .gif image to look like the blue Mibew chat buttom, place this gif also in the bottom-right corner and set "visibility: hidden" of the class "mibew-chat-frame-toggle" could be an option.

Read this to find out how to theme the chat button in a right way: https://docs.mibew.org/theming.html#-a-name-chat-button-a-theming-chat-button

BUT: If the visitor already started the chat and hides it, a new click on the gif does not open the chatwindow.

If the visitor already started the chat and hides it there should not be the aforementioned gif on the page. It is impossible to have a chat button and a chat iframe (expanded or minimized) on the same page at the same time.

[stryker1]

Of cause I already read the documentation about theming the chat button. The styling of the button is not my problem here

If I understood you right, you wrote that the chat button (to be precise: I am talking about the button that can be "generated" in the admin area not the blue chat button that appears in the bottom-right when the user has started and minimised the chat window), is not on the page, when the chat is started. But this is the case here:

1. I have got the generated button on my page.
2. If the user clicks on it the chat window is shown (and the generated button stays where it was)
3. If the user closes the chat window, the generated button is shown as before and a new button (the blue button with the smiley bubble) is shown in the bottom-right
4. If the user clicks on the generated button, the chat window does not open anymore. He hast to click on the blue button to open it again.

So what I want to achieve:
a) The blue button is shown directly on page load and not the generated button
OR
b) the generated button opens the chat window again, also when the chat window was closed/minised before

What I did so far is styling the generated button to look like the blue button and placed it in the bottom-right.
I also hided the "original" blue button.
My problem with this solution is now only point 4) above.

[faf]

Well... Looks like I've understood what you're talking about...

The answer is pretty standard. The right way to do the job is to write a plugin. So, here it is:

• distro: https://mibew.org/plugins#mibew-advanced-button
• repo: https://github.com/Mibew/advanced-button-plugin

And if you will still want to do something on the low level, take a look at the js part of the code of that plugin.

[stryker1]

I was amazed that you easily made a plugin for this, thank you!

I already installed it and also activated the tracking of the visitors, but I see no difference in the behaviour of the gif button and/or the blue bubble button.

What should this new plugin exactly do?
You wrote in the description of the plugin:
"A plugin for Mibew Messenger to automatically refresh the button (to represent an actual availability of operators) and set its visibility (depending on existence of an active chat)."
If I understand it right it should hide the gif button when the user clicks on it, so that the chat openes (or the contact form).
So it is not a solution for the point no. 4 which I described, or should it be a solution for this?

If the plugin would work the way I understand your description, I would only need to style the gif button to look like the blue bubble button and place it on the same position as the bubble button, so that the visitors thinks, that the two buttons are the same Right?

[faf]

I was amazed that you easily made a plugin for this, thank you!

You're welcome. Actually it's really easy to make a plugin once one understand the basic principles.

I already installed it and also activated the tracking of the visitors, but I see no difference in the behaviour of the gif button and/or the blue bubble button.

You should regenerate the button after enabling the aforementioned feature. The code of the button will become more complicated, and the button will start "talking" with the server every "n" seconds where "n" is defined in Settings -> Performance -> Tracking refresh time.

What should this new plugin exactly do?
You wrote in the description of the plugin:
"A plugin for Mibew Messenger to automatically refresh the button (to represent an actual availability of operators) and set its visibility (depending on existence of an active chat)."
If I understand it right it should hide the gif button when the user clicks on it, so that the chat openes (or the contact form).

Yes. The button will become invisible after the creation of the chat iframe. However there could be a short time lag, because button cloaking is not bound to the iframe creation, but related to interaction between the Widget and the Server: https://docs.mibew.org/development/core-architecture.html#widget-server-interaction

So it is not a solution for the point no. 4 which I described, or should it be a solution for this?

No, it shouldn't. It's a kind of solution for the whole task you've described.

If the plugin would work the way I understand your description, I would only need to style the gif button to look like the blue bubble button and place it on the same position as the bubble button, so that the visitors thinks, that the two buttons are the same Right?

Yes, that's correct.

However, if you'll find the time lag between iframe creation and button dissapearing is too long for you, you can try to somehow utilize the js code of the plugin. At least the code provides you an example of how to check whether the chat iframe is opened or not.

[stryker1]

You should regenerate the button after enabling the aforementioned feature.

Great, this was it! Now it works like expected! Thank you very much!

Maybe you should add this hint in the documentation of the plugin and also in the settings about the user tracking/inviting.

It was not clear to me that this functionality is triggered from a deviant button code - and I guess I am not the only one

[stryker1]

I just want to give you feedback, that this new plugin "AdvanvedButton"works like charm.

I only changed this following line in the refresh.js from

Code: [Select]

img.style.display = visible ? 'visible' : 'hidden';to

Code: [Select]

img.style.display = visible ? 'block' : 'none';
Because otherwise the gif button was not "really" away, so you saw the mouse pointer when moving over it.

[faf]

You should regenerate the button after enabling the aforementioned feature.

Great, this was it! Now it works like expected! Thank you very much!

Maybe you should add this hint in the documentation of the plugin and also in the settings about the user tracking/inviting.

It was not clear to me that this functionality is triggered from a deviant button code - and I guess I am not the only one

Well, I have some ideas about that. But at the moment I've added the appropriate sentence in README for the plugin.

I just want to give you feedback, that this new plugin "AdvanvedButton"works like charm.

Great to hear that. 

I only changed this following line in the refresh.js from

Code: [Select]

img.style.display = visible ? 'visible' : 'hidden';to

Code: [Select]

img.style.display = visible ? 'block' : 'none';
Because otherwise the gif button was not "really" away, so you saw the mouse pointer when moving over it.

Actually the original code was

Code: [Select]

img.style.visibility = visible ? 'visible' : 'hidden';
However, I've got it.

I've just released the new version of the plugin. Now one can configure it to behave the best way suited for a given design of a site. It is possible to cloak the button using either visibility, or display property (with ability to set the value of display to block, inline-block, or inline). Moreover, it's even possible to implement some custom cloaking effects, since now there is also classes mibew_visible and mibew_hidden that are automatically set for the button by the plugin.

[stryker1]

Great that you directly implemented my correction [thumbUp]