Floating Live Chat

Does anyone know? what module or script that exactly Gavick LIVE DEMO (on the left side) frontpage website use?

Really interested to use the module or script and associate it with my activehelper.

Any comment or response or help appreciated.

Thank you

Hi,
this is top secret, the most guarded information, hihi.
Of course, small module/element on the bottom don't do anything except being a link to component.

First you need image: https://static.gavick.com/templates/gk_ ... vechat.png
Then small code in HTML on the bottom of your template

Code: Select all

<a class="livechatlink" onclick="javascript: window.open('LINK',  'toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=0,resizable=1,width=600,height=690');" href="javascript: void(0);">Live Chat</a>

and CSS class

Code: Select all

.livechatlink {
    background: url("../images/livechat.png") no-repeat scroll 0 34px transparent;
    bottom: 0;
    display: block;
    height: 84px;
    position: fixed;
    right: 24px;
    text-indent: -9999em;
    transition: background 0.2s ease-out 0s, color 0.15s ease-out 0s;
    width: 180px;
}

About Chat check here: http://extensions.joomla.org/extensions ... ort-hosted
or here: http://extensions.joomla.org/extensions ... ve-support

About Support components: http://extensions.joomla.org/extensions ... /help-desk

Floating Live Chat

This is not floating because it have fixed position anyway but it have hover effect.

Floating Live Chat

This is not floating because it have fixed position anyway but it have hover effect.

So where should i place the code? im using simplicity template

Hi,
this is top secret, the most guarded information, hihi.
Of course, small module/element on the bottom don't do anything except being a link to component.

First you need image: https://static.gavick.com/templates/gk_ ... vechat.png
Then small code in HTML on the bottom of your template

Code: Select all

<a class="livechatlink" onclick="javascript: window.open('LINK',  'toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=0,resizable=1,width=600,height=690');" href="javascript: void(0);">Live Chat</a>

and CSS class

Code: Select all

.livechatlink {
    background: url("../images/livechat.png") no-repeat scroll 0 34px transparent;
    bottom: 0;
    display: block;
    height: 84px;
    position: fixed;
    right: 24px;
    text-indent: -9999em;
    transition: background 0.2s ease-out 0s, color 0.15s ease-out 0s;
    width: 180px;
}

About Chat check here: http://extensions.joomla.org/extensions ... ort-hosted
or here: http://extensions.joomla.org/extensions ... ve-support

About Support components: http://extensions.joomla.org/extensions ... /help-desk

Thank you so much for the reply and answer powel.

i already download the image and place it in images folrder, and copy ccs code into template.css. BUT i still blur...where i should put the code for the html.

1) In CUSTOM HTML module on debug position
2) Or in gk_template_name\layouts\default.php

Code: Select all

 ----HERE------
   <jdoc:include type="modules" name="debug" />
</body>
</html>

Floating Live Chat

This is not floating because it have fixed position anyway but it have hover effect.

I already manage to create it by creating module and paste the html code that you gave me. and its hovering now

BUT there are still two thin i need to know:

1.How to put the button exactly the same position as your LIVE DEMO button. I mean on right top middle position. is there any specific position for that?

1) In CUSTOM HTML module on debug position
2) Or in gk_template_name\layouts\default.php

Code: Select all

 ----HERE------
   <jdoc:include type="modules" name="debug" />
</body>
</html>

its not working ...... i already create a module in debug position.... and also add in css... but the position still botton right.

you may have alook on the prototype site www.primemedianet.com/straitscentral

Hi,
sorry but I don't understand you now,
You said/wrote:

How to put the button exactly the same position as your LIVE DEMO button.

And you've got it, as I see now

live-chat-bottom.png

Then in second sentence you said :

I mean on right top middle position. Is there any specific position for that?

So I'm confused. Where exactly you you want, here?

chat-position.png

If you want to have button on the top change css a little in .livechatlink { } but I will give you only one tip by now, because I don't know your finial idea:
from
bottom: 0;
to
top:0;

and new image, of course you have to edit in Photoshop.

If you want to have button on the top change css a little in .livechatlink { } but I will give you only one tip by now, because I don't know your finial idea:
from
bottom: 0;
to
top:0;

and new image, of course you have to edit in Photoshop.

Hello pawel,

you're such great helper....... the button i want to set is on the left side as attached picture.

thank you inadvanced.

BTW, how to change the height of the logo white background. when you try to scroll the page...the logo out of the border

ok, first question & answer ,
on the left side

Code: Select all

.livechatlink {
    background: url("../images/chat-left.png") no-repeat scroll -35px 0 transparent;
    bottom: 50%;
    display: block;
    height: 180px;
    left: 0;
    position: fixed;
    text-indent: -9999em;
    transition: background 0.2s ease-out 0s, color 0.15s ease-out 0s;
    width: 84px;
}

Image below

Second answer,
because your second (used) logo is too big, I mean, this template use two logo images, and the second one: templates/gk_simplicity/images/style1/logo_white_bg.png

please make it smaller (~60px height) or you have to increase height of white bar.

ok, first question & answer ,
on the left side

Code: Select all

.livechatlink {
    background: url("../images/chat-left.png") no-repeat scroll -35px 0 transparent;
    bottom: 50%;
    display: block;
    height: 180px;
    left: 0;
    position: fixed;
    text-indent: -9999em;
    transition: background 0.2s ease-out 0s, color 0.15s ease-out 0s;
    width: 84px;
}

Image below

Thank you again,

i already follow the step. but the image not appearing..... you may have a look on the site, my other prototype www.primemedianet.com/straitscentral1

already upload the image

your css code is wrong, very wrong check this out (to many " / etc.)

Code: Select all

.livechatlink {
    background: url("/\"../images/chat-left.png\"") no-repeat scroll -35px 0 transparent;
    bottom: 50%;


Please compare with my fixed code (screenshot)

good-code-left.png

probably our forum system broken my stylesheets
p.s.
don't rewrite "template.css wiersz ..."

Change only this two lines

Code: Select all

  background: url("../images/chat-left.png") no-repeat scroll -35px 0 transparent;
  bottom: 30%;

By the way, you forgot to delete " ----HERE------" text from default.php or custom module.

By the way, you forgot to delete " ----HERE------" text from default.php or custom module.

Thank you pawel...for your tips. already delete the HERE.... and now the button appear...but .... its weird hahahaha.....seem duplicate