Dolke Posted September 24, 2013 Share Posted September 24, 2013 (edited) Hi guys, I would like to position some image above the Vekia's hotinfo module and offerchat window in order to make chat more obvious. It would be image of some kind like this one for example:http://www.desk.com/resources/images/pages/features/integration/partner-livechat.jpgHere is the screenshot of where I need to place it:http://www.screencast.com/t/VIOQe5mOThank you in advance.Dean Edited September 24, 2013 by Dolke (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted September 24, 2013 Share Posted September 24, 2013 add somewhere in page source, for example to the header.tpl file right after <body> tag this code: <img src="http://www.desk.com/resources/images/pages/features/integration/partner-livechat.jpg" width="220" style="position: fixed; right: -20px; bottom: 35px;"> effect: 1 Link to comment Share on other sites More sharing options...
Dolke Posted September 24, 2013 Author Share Posted September 24, 2013 Tnx Vekia, I knew you will respond to "How to" questions Looking good! 1 Link to comment Share on other sites More sharing options...
Dolke Posted September 25, 2013 Author Share Posted September 25, 2013 Hi Vekia, I found about 2 issues with this and I hope you can help me out...First issue is showed here: http://www.screencast.com/t/pJNepXHgAs you can see image "Live Chat" is behind footer background and I need image to be "always on top".Second issue is that "Live Chat" image is visible even when I'm not logged on to OfferChat and live chat bar is not present on the website. I need image to follow actual chat dynamic and to be visible when chat is enabled and not hidden when chat is disabled.Thanks. Link to comment Share on other sites More sharing options...
vekia Posted September 25, 2013 Share Posted September 25, 2013 1) for first issue use: <img src="http://www.desk.com/resources/images/pages/features/integration/partner-livechat.jpg" width="220" style="position: fixed; right: -20px; bottom: 35px; z-index:2;"> but in this case you will have to use different image, it's because it has got white background and it will looks weird, like: 2) it is a bit complicated because i don't know how offerchat works, i don't know offerchats API etc. Has it got API etc. ? Link to comment Share on other sites More sharing options...
Dolke Posted September 25, 2013 Author Share Posted September 25, 2013 I will make this image transparent PNG so this first one is solved.I'm using small piece of code which I put inside header.tpl in order for chat to work. I know this second issue is a tricky one...This is the code: <!--start of Offerchat js code--><script type='text/javascript'>var ofc_key = '7108becdbbe5ec3dcc09473ec083cdca';(function(){ var oc = document.createElement('script'); oc.type = 'text/javascript'; oc.async = true; oc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'd1cpaygqxflr8n.cloudfront.net/p/js/widget.min.js?r=1'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oc, s);}());</script><!--end of Offerchat js code--> I hope this can help you to help me Thanks Link to comment Share on other sites More sharing options...
vekia Posted September 25, 2013 Share Posted September 25, 2013 it loads external widget from external website, i just wondering if this chat has got API similar to zopim chat API Link to comment Share on other sites More sharing options...
Dolke Posted September 25, 2013 Author Share Posted September 25, 2013 Vekia I think I meesed up something with my header.tpl file Please check if site is loading at your end?Also please check my header.tpl file:header.zip Link to comment Share on other sites More sharing options...
Dolke Posted September 25, 2013 Author Share Posted September 25, 2013 I think I managed to fix it. Please allow me few more moments to clean this mess up Vekia and to fix this first issue. Thanks Link to comment Share on other sites More sharing options...
Dolke Posted September 25, 2013 Author Share Posted September 25, 2013 Vekia I think i restored good header.tpl file and everything is working properly now. Can you paste me how do you see this LiveChat image on your monitor? Im using laptop now and it seems fine... Link to comment Share on other sites More sharing options...
vekia Posted September 26, 2013 Share Posted September 26, 2013 now is great! Link to comment Share on other sites More sharing options...
Dolke Posted September 26, 2013 Author Share Posted September 26, 2013 Superb.What about this second problem where OfferChat api is involved? Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 Vekia, I was thinking... can I trigger this image disappear when script is OfferChat script is not loaded, I don't know, some sort of CSS triggering? Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 with css only it isn't possible, you can only try with javascript + css right click please and i will try to create simple code Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 Hi Vekia, Right-click is enabled again. If you have time now you are welcome to try what you had in mind. Thank you.If you need BO access I think I have your account ready. Dean Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 can you try with: </script> $( document ).ready(function() { if ($("offerchat_frame").length==0){ $("#livechatgraphic").hide(); } } <script> and add to live chat image id="livechatgraphic" Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 Do I put this piece of code into a offerchat java script or? Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 somewhere in your page, the best place: footer.tpl im not sure that this will work, i sent an email to offerchat support, i asked about some kind of api if they have got it - it will be possible in other way 1 Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 Great, thanks Vekia, I will try this method and post the results. Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 ahh i forgot, about {literal} {/literal} tags! insert them also: </script> {literal} $( document ).ready(function() { if ($("offerchat_frame").length==0){ $("#livechatgraphic").hide(); } } {/literal} <script> Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 OK I did. What about this second part and add to live chat image id="livechatgraphic" I need to add what exactly? Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 i said before that you have to insert image: <img src="http://www.desk.com/resources/images/pages/features/integration/partner-livechat.jpg" width="220" style="position: fixed; right: -20px; bottom: 35px; z-index:2;"> just add there id="livechatgraphic" <img id="livechatgraphic" src="http://www.desk.com/resources/images/pages/features/integration/partner-livechat.jpg" width="220" style="position: fixed; right: -20px; bottom: 35px; z-index:2;"> 1 Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 Yes Yes, I figured it out what you said. Sometimes I just stand there watching the screen and feeling stupid xD Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 OK all done but I really don't know how to test it...hm... I deleted the cookies and the browser cash but even though I'm not logged on OfferChat it is still showing the image.I will go and log on to OfferChat dashboard and then sing out to see what happens... Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 i see, there is something wrong with js scripts code should looks like: <script> {literal} $( document ).ready(function() { if ($("offerchat_frame").length==0){ $("#livechatgraphic").hide(); } }); {/literal} </script> Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 OK fixed.; was missing I think. Now img is not shown anytime... Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 can you disable offerchat please? i've got another idea Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 $( document ).ready(function() { if ($("#offerchatFrameContainer").length==0){ $("#livechatgraphic").hide(); } }); another piece of code, instead what i suggested above Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 (edited) Unfortunately image is always shown now...It seems quite challenging Vekia Edited October 1, 2013 by Dolke (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 okay, can you turn on offerchat? sorry for bothering, I will not rest until the problem is solved: D Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 OK, If I can help please just post...OfferChat is turned off. Link to comment Share on other sites More sharing options...
vekia Posted October 1, 2013 Share Posted October 1, 2013 please turn it on Link to comment Share on other sites More sharing options...
Dolke Posted October 1, 2013 Author Share Posted October 1, 2013 Done. Link to comment Share on other sites More sharing options...
Dolke Posted October 8, 2013 Author Share Posted October 8, 2013 Hi again, I need to reopen this case for 2 reasons:First reason is seen here:http://www.screencast.com/t/581UjZKjQAnd other is what Vekia and I started regarding offerchat API in order to hide the image when chat is not active and make it visible once it is on. Any update Vekia? Link to comment Share on other sites More sharing options...
vekia Posted October 8, 2013 Share Posted October 8, 2013 i tried to contact with offerchat support about api - still no response without api it will not be possible Link to comment Share on other sites More sharing options...
Recommended Posts