User manual LOGMEIN INSTANT CHAT FEATURE GUIDE

[. . . ] Instant Chat Feature Guide PUBLISHED BY LogMeIn, Inc. 500 Unicorn Park Drive Woburn, MA 01801 Copyright © 2010 by LogMeIn, Inc. No part of the contents of this document may be reproduced or transmitted in any form or by any means without the written permission of the publisher. LogMeIn®, (LogMeIn® BackupTM, LogMeIn® Free®, LogMeIn® Pro2®, LogMeIn® IT ReachTM, LogMeIn® Rescue®, LogMeIn® Ignition, LogMeIn® HamachiTM), LogMeIn® Rescue+MobileTM, RemotelyAnywhereTM and Network ConsoleTM are either registered trademarks or trademarks of LogMeIn, Inc. [. . . ] Change the background-color of . ic_htmlbody and . ic_bodyarea in your CSS. Download https://secure. logmeinrescue. com/InstantChat/Standard/Images/ic_background. jpg and store it in your own public web folder. Replace the URL of ic_maincontentarea. background-image 7 8 with the URL of your new ic_background. jpg in Change the border color of Instant Chat GUI in ic_background. jpg. ©2003-2010 LogMeIn Inc. All rights reserved www. LogMeIn. com 23 How to Display a Custom Screen when No Technician is Available Option 1: Use notechavailable to display a custom screen when you are in working hours, but no technicians are logged in to Rescue. Working Hours are set at the Channel-level on the Settings tab. ICLoader. HostedErrorHandler = function(ErrorName) { if (ErrorName == "NOTECHAVAILABLE") window. open("http://YourSite/YourErrorPage. html"); } Option 2: Use notechworking to display a custom screen when you are outside of working hours. ICLoader. HostedErrorHandler = function(ErrorName) { if (ErrorName == "NOTECHWORKING") window. open("http://YourSite/YourErrorPage. html"); } Related: How to Display a Custom Screen while the Customer is Waiting. How to Display a Custom Screen while the Customer is Waiting 1 2 3 4 Use a graphics editor to create the screen you want customers to see while they are waiting for a technician. Save the screen as an image file in your public web folder. In your CSS, change the background-image url of . ic_statusicon_waiting to the Waiting screen image. Customize how the screen will be displayed (for example, change the left, top, width, and height options). During Chat (ic_statusicon_chat) During Remote Control or Desktop Viewing (ic_statusicon_rc) When Instant Chat disconnects (ic_statusicon_disconnect) When the customer is on Hold (ic_statusicon_hold) While the customer is waiting for a Transfer to be completed (ic_statusicon_transfer) While typing (ic_statusicon_typing) Tip!You can also display a custom screen in the following situations: · · · · · · ©2003-2010 LogMeIn Inc. All rights reserved www. LogMeIn. com 24 How to Display ChatLog Content Outside of the ChatLog Add the following options to any class belonging to an element found in the ChatLog to place it outside of the ChatLog area. position: absolute; left:. . . ; top:. . . ; z-index:. . . ; How to Display Custom Information in the Instant Chat Interface You can display custom information in front of the ICContainer. 1 2 Enter a new HTML element on the same page as ICContainer in your hosted code. Position the new element so that it will be placed in the appropriate position in front of the ICContainer. position: absolute; left:. . . ; top:. . . ; z-index:. . . ; Important: Check position settings in the CSS and in the new HTML element to ensure that all elements are coordinated and do not cover each other in any way. How to Hide User Interface Elements Do not use display: none to hide elements in Instant Chat. It is reserved by the Instant Chat Engine to hide or show elements. Instead, change the left and top coordinates of the elements to negative values, as shown in the following example: . ic_custom_logo /*<img>*/ { position: absolute; left: -100px; top: -100px; width: 78px; height: 32px; } How to Open Instant Chat in a `Custom' Browser Window To open Instant Chat in a custom browser window, customize the following code and insert it into your environment. <a onclick="window. open('YourHostedInstantChat. html', '', 'toolbar=no, status=no, menubar=no, titlebar=no, location=no, scrollbars=no, resizable=no, height=500, width=400');" href="#">View hosted Instant Chat</a> ©2003-2010 LogMeIn Inc. All rights reserved www. LogMeIn. com 25 How to Open the Instant Chat interface in a New Browser Window To open Instant Chat in a new browser window, customize the following code and insert it into your environment. sample1. html This is a form that opens the Instant Chat interface, as defined in sample2. html. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> <html xmlns="http://www. w3. org/1999/xhtml"> <head> <title></title> </head> <body> <table> <tr><td>Name: </td><td><input id="Name" type="text" maxlength="64" /></td></tr> <tr><td>Email: </td><td><input id="Email" type="text" maxlength="512" /></td></tr> </table> <input type="button" value="OpenChatInANewWindow" onclick="window. open('sample2. html?Name=' + document. getElementById('Name'). value + '&Email=' + document. getElementById('Name'). value, '', 'toolbar=no, status=no, menubar=no, titlebar=no, location=no, scrollbars=no, resizable=no, height=500, width=400');" /> </body> </html> sample2. html This is the Instant Chat interface. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> <html xmlns="http://www. w3. org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="https://secure. logmeinrescue. com/InstantChat/InstantChat. aspx"></script> <script type="text/javascript"> function getParameter(name) { name = name. replace(/[\[]/, "\\\["). replace(/[\]]/, "\\\]"); var regexS = "[\\?&]" + name + "=([^&#]*)"; var regex = new RegExp(regexS); var results = regex. exec(window. location. href); if (results == null) return ""; else return results[1]; } function loadInstantChat() { var ICLoader = new RescueInstantChatLoader(); ICLoader. ICContainer = "ICContainer"; ICLoader. HostedCSS = "http://[YourSite]/yourstylesheet. css"; ICLoader. HostedLanguagesForChatOnlyMode = "http://[YourSite]/LanguagesForChatOnlyMode. js"; ICLoader. HostedLanguagesForAppletMode = "http://[YourSite]/LanguagesForAppletMode. js"; ICLoader. EntryID = "123456789"; ICLoader. Name = getParameter("Name"); ICLoader. Comment1 = getParameter("Email"); ICLoader. Start(); } </script> </head> <body onload="loadInstantChat();"> <div id="ICContainer" style="position: absolute; left: 0px; top: 0px; width: 400px; height: 500px"></div> </body> </html> ©2003-2010 LogMeIn Inc. All rights reserved www. LogMeIn. com 26 How to Start More than One Session on the Same Page (invalidate websessionid) To be able to start more than one new session on the same page without needing to reload the page, add a new character to the websessionid before calling the Start() function. Note: This invalidates the old websessionid. if (window. location. hash. length == webSessionIdLength + 1) { window. location = window. location + "X"; } ICLoader. Start(); How to Display a Loading Screen To display a loading screen during download and initialization of the Instant Chat JavaScript Engine, put your image reference here: <div style=". . . background-image: url('loading. jpg');"> . . . <div id="ICContainer" style=". . . "></div> </div> . ic_htmlbody /*<body>*/ { . . . [. . . ] All rights reserved www. LogMeIn. com 54 How to Customize Self-Hosted Instant Chat Using JavaScript When self-hosting the Instant Chat language files, you can implement JavaScript tricks for Instant Chat. All custom JavaScript code must be integrated into one of the Instant Chat language files: · · https://secure. logmeinrescue. com/InstantChat/LanguagesForChatOnlyMode. js https://secure. logmeinrescue. com/InstantChat/LanguagesForAppletMode. js Hosting of language files is discussed above. See How to Customize Instant Chat Language Files. Sample JavaScript Tricks for Instant Chat Here are a few general examples to get you thinking about how to use JavaScript tricks to collect data from the Instant Chat engine, create new custom user interface elements, or animate the Instant Chat user interface (and more). Note: Callback functions cannot currently be executed by the Instant Chat engine. [. . . ]