product icon

Sample Code for Self-hosted Instant Chat

Articles related to customization are written for a technical audience who have experience in web development. Knowledge of HTML, CSS, and JavaScript are required.

The following is an example code for self-hosted Instant Chat.

<!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>YourCompany - Web Chat</title>
  <script type="text/javascript"
src="https://secure.GoToRescue.com/InstantChat/InstantChat.aspx"></script>
  <script type="text/javascript">
    function loadInstantChat(sessionType)
    {
      // Show Instant Chat
      document.getElementById("InstantChatDiv").style.display = "";
      // Hide Channel form
      document.getElementById("ChannelForm").style.display = "none";
      // Hide PIN Code form
      document.getElementById("PinForm").style.display = "none";
      // Hide Language dropdown
      document.getElementById("LanguageForm").style.display = "none";
      var ICLoader = new RescueInstantChatLoader();
      ICLoader.ICContainer = "InstantChatDiv";
      ICLoader.HostedCSS = "http://YourSite/yourstylesheet.css";
      ICLoader.HostedLanguagesForChatOnlyMode = "http://[YourSite]/LanguagesForChatOnlyMode.js";
      ICLoader.HostedLanguagesForAppletMode = "http://[YourSite]/LanguagesForAppletMode.js";
						// The URL or domain name of [YourSite] must be allowlisted in the Rescue Administration Center. 
						// Contact your Rescue Master Administrator!
						// sessionType == 0, we are after REBOOT
						// Channel session
      if (sessionType == 1)
          ICLoader.EntryID = "123456789";
      // Private Session
      if (sessionType == 2)
      {
        var pin = document.getElementById("inputPinCode").value;
        if ((pin.length != 6) || isNaN(pin))
        {
          handleError("Private code should be a 6-digit number!");
          return; 
        }
        else
          ICLoader.PrivateCode = document.getElementById("inputPinCode").value;
      }
      ICLoader.Name = document.getElementById("inputYourName").value;
      ICLoader.Comment1 = document.getElementById("inputEmailAddress").value;
      ICLoader.Comment2 = document.getElementById("inputPhoneNumber").value;
      ICLoader.Comment3 = document.getElementById("inputCompanyName").value;
      ICLoader.Comment4 = document.getElementById("inputLocation").value;
      ICLoader.Comment5 = document.getElementById("inputComment").value;
      ICLoader.Tracking0 = "TestForm01";
	  ICLoader.Language = document.getElementById("inputLanguageSelect").value;
	  ICLoader.PostMessageTargetOrigin = null; //https://[YourSite].com<:443>
      // Error + No Technician available notification handling
      ICLoader.HostedErrorHandler = function(ErrorName)
      {
        switch(ErrorName)
        {
          case "NOTECHAVAILABLE": handleError("Currently no technicians are available.
 Please check back later."); break;
          case "NOTECHWORKING": handleError("Sorry, we're closed. No technicians are
 available at this time. Please check back later during our hours of operation."); break;
          case "INVALID_PARAMETERS": handleError("Invalid parameters supplied.
 Please contact your support provider."); break;
          case "SESSIONALREADYSTARTED": handleError("A session using this PIN Code
 has already been started. Please ask your support provider for a new PIN Code."); break;
          case "UCONNECTIONERROR": handleError("Unknown connection error occurred."); break;
          case "ERRNOSUCHSSESSION": handleError("The support session cannot be started.");
 break;
          case "ERRNOSUCHENTRY": handleError("The online support session cannot be started.
 Please contact your support provider directly."); break;
          case "ERRCODEDOESNOTEXIST": handleError("PIN Code does not exist.
 Please contact your support provider."); break;
          case "ERRCODEEXPIRED": handleError("PIN Code has expired.
 Please contact your support provider."); break;
          case "ERRNOTEXPIRED": handleError("Technician or company does not exist.
 Please contact your support provider."); break;
          case "ERRMISSINGTECHLICENSE": handleError("The support session cannot be started.
 The technician is not configured to support this type of device."); break;
        }
      }
      ICLoader.Start();
    }
    // Start automatically Instant Chat after REBOOT
    function handleReboot()
    {
      if ((window.location + "").indexOf("Rescuewebsessionid") != -1)
           loadInstantChat(0);
      if (window.location.hash.length == webSessionIdLength + 1)
           loadInstantChat(0);
    }
    // Show error messages
    function handleError(ErrorDescription)
    {
      // Hide Instant Chat
      document.getElementById("InstantChatDiv").style.display = "none";
      // Show ErrorForm
      var ef = document.getElementById("ErrorForm");
      ef.style.display = "";
      ef.innerHTML = ErrorDescription;
    }
  </script>
</head>
<body onload="handleReboot();" style="background-color: #000000; font-family:tahoma,
arial, verdana; color: #FFFFFF">
  <noscript>
    <div style="position: absolute; left: 0px; top: 0px; width: 700px; height: 700px; zindex:
1; background-color: #000000">
      To use the Instant Chat feature, please ensure you have JavaScript enabled in your
web browser.<br />
      Once you have enabled JavaScript, please refresh this page.
    </div>
  </noscript> 
  <div id="ChannelForm" style="position: absolute; left: 100px; top: 100px; backgroundcolor:
#303030; padding: 20px 20px 20px 20px">
    Your Name<br />
    <input id="inputYourName" type="text" maxlength="64" style="width: 200px" /><br />
    Email Address<br />
    <input id="inputEmailAddress" type="text" maxlength="512" style="width: 200px" /><br
/>
    Phone Number<br />
    <input id="inputPhoneNumber" type="text" maxlength="512" style="width: 200px" /><br />
    Company Name<br />
    <input id="inputCompanyName" type="text" maxlength="256" style="width: 200px" /><br />
    Location<br />
    <input id="inputLocation" type="text" maxlength="64" style="width: 200px" /><br />
    Comment<br />
    <input id="inputComment" type="text" maxlength="64" style="width: 200px" /><br /><br
/>
    <input type="button" value="Start Chat Now" onclick="loadInstantChat(1);" />
  </div>
  <div id="PinForm" style="position: absolute; left: 400px; top: 100px; background-color:
#303030; padding: 20px 20px 20px 20px">
    Enter your 6 digit PIN code<br />
    <input id="inputPinCode" type="text" maxlength="64" style="width: 200px" /><br /><br
/>
    <input type="button" value="Connect to technician" onclick="loadInstantChat(2);" />
  </div>
  <div id="LanguageForm" style="position: absolute; left: 400px; top: 260px; backgroundcolor:
#303030; padding: 20px 20px 20px 20px">
    Select Chat<br />interface language<br />
    <select id="inputLanguageSelect" style="width: 200px">
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
      <option value="fr">Français</option>
      <option value="it">Italiano</option>
      <option value="nl">Nederlands</option>
      <option value="pt">Português</option>
      <option value="pt-br">Português (Br)</option>
      <option value="hu">Magyar</option>
      <option value="ru">Russian</option>
      <option value="ja">Japanese</option>
      <option value="ko">Korean</option>
      <option value="zh">Simplified Chinese</option>
      <option value="zh-tw">Traditional Chinese</option>
      <option value="ar">Arabic </option
      <option value="tr">Türk</option>
      <option value="pl">Polski</option>
      <option value="fi">Suomalainen</option>
      <option value="sv">Svensk</option>
      <option value="no">Norsk</option>
      <option value="he">Hebrew</option>
      <option value="da">Dansk</option>
      <option value="cs">Czech</option>
    </select>
  </div>
  <div id="ErrorForm" style="position: absolute; left: 100px; top: 100px; height: 200px;
width: 300px; background-color: #303030; padding: 20px 20px 20px 20px; display: none"></div>
  <div id="InstantChatDiv" style="position: absolute; left: 100px; top: 100px; width: 285px;
height: 259px; display: none"></div>
</body>
</html>
Note:
  • Instant Chat always uses XHTML 1.0 Transitional document type, though older HTML document types are also supported.
  • The following line should always point to InstantChat.aspx:
    <script type="text/javascript"
    src="https://secure.GoToRescue.com/InstantChat/InstantChat.aspx"></script>
  • ICContainer is a required parameter, the Instant Chat iframe will be loaded into the ICContainer element:
    ICLoader.ICContainer = "ICContainer";
  • For information on customizing the InstantChat.css, see How to Customize InstantChat.css.
  • You can define a PrivateCode parameter instead of the EntryID parameter to start Private sessions in
    ICLoader.EntryID = "1234567890";
  • You can define the code of the default language (“en” is default). See also How to Customize Instant Chat Language Files. The following languages are provided by GoTo:
    Abbreviation (value) Language Abbreviation (value) Language
    en English zh Simplified Chinese
    es Español zh-tw Traditional Chinese
    de Deutsch ar Arabic
    fr Français tr Türk
    it Italiano pl Polski
    nl Nederlands fi Suomalainen
    pt Português sv Svensk
    pt-br Português (Br) no Norsk
    hu Magyar he Hebrew
    ru Russian da Dansk
    ja Japanese cs Czech
    ko Korean el Greek
    th Thai ro Romanian
    bg Bulgarian sk Slovak
    hr Hrvatski
  • Hosted Error Handling works as follows:
    • Remove the handleReboot function if your ICContainer is always visible on your page:
      function handleReboot(){...}
    • Automatically display Instant Chat after reboot. Remove this line if your ICContainer is always visible on your page:
      if ((window.location +
      "").indexOf("Rescuewebsessionid") != -
      1){document.getElementById("ICContainer").style.display=""
      ; loadInstantChat();} /* optional */
Article last updated: 11 July, 2023