product icon

Customizing the Channel Form with 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.

A channel form with Instant Chat looks exactly like the one without the chat option. The only difference is that after the customer starts a session with a technician, the Instant Chat window appears.

You can customize the same elements of the channel form whether you enable Instant Chat or not. The difference is that you must modify the elements at different locations in the HTML code. The following is a sample channel form that you can integrate into your website: 

<!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>
  <script type="text/javascript" src="https://secure.GoToRescue.com/InstantChat/
InstantChat.aspx"></script>
  <script type="text/javascript">
    function loadInstantChat(){
      var ICLoader = new RescueInstantChatLoader();
      ICLoader.ICContainer = "ICContainer";
      ICLoader.HostedCSS = "https://secure.GoToRescue.com/InstantChat/Standard/
InstantChat.css";
      ICLoader.HostedLanguagesForChatOnlyMode = "https://secure.GoToRescue.com/
InstantChat/LanguagesForChatOnlyMode.js";
      ICLoader.HostedLanguagesForAppletMode = "https://secure.GoToRescue.com/
InstantChat/LanguagesForAppletMode.js";
      ICLoader.EntryID = "1928520474";
      ICLoader.Name = document.getElementById("Name").value; /* optional */
      ICLoader.Comment1 = document.getElementById("Comment1").value; /* optional */
      ICLoader.Comment2 = document.getElementById("Comment2").value; /* optional */
      ICLoader.Comment3 = document.getElementById("Comment3").value; /* optional */
      ICLoader.Comment4 = document.getElementById("Comment4").value; /* optional */
      ICLoader.Comment5 = document.getElementById("Comment5").value; /* optional */
      ICLoader.Tracking0 = ""; /* optional */
      ICLoader.Language = ""; /* optional */
	  ICLoader.PostMessageTargetOrigin = null; //https://[YourSite].com<:443>
      ICLoader.HostedErrorHandler = function(ErrorName){} /* optional */
      ICLoader.Start();}
    function handleRebootOrRefresh(){
      if ((window.location + "").indexOf("Rescuewebsessionid") != -1)
{document.getElementById("ICContainer").style.display=""; loadInstantChat();} /* optional */
      if (window.location.hash.length == webSessionIdLength + 1)
{document.getElementById("ICContainer").style.display=""; loadInstantChat();} /* optional */
    }
  </script>
</head>
<body onload="handleRebootOrRefresh();">
  <table>
    <tr><td>Please enter your name: </td><td><input id="Name" type="text" maxlength="64"
 /></td></tr>
    <tr><td>Custom Field 1: </td><td><input id="Comment1" type="text" maxlength="512"
 /></td></tr>
    <tr><td>Custom Field 2: </td><td><input id="Comment2" type="text" maxlength="512"
 /></td></tr>
    <tr><td>Custom Field 3: </td><td><input id="Comment3" type="text" maxlength="256"
 /></td></tr>
    <tr><td>Custom Field 4: </td><td><input id="Comment4" type="text" maxlength="64"
 /></td></tr>
    <tr><td>Custom Field 5: </td><td><input id="Comment5" type="text" maxlength="64"
 /></td></tr>
  </table>
  <input type="button" value="Channel 01" onclick="document.getElementById('ICContainer')
.style.display=''; loadInstantChat();" />
  <div id="ICContainer" style="position: absolute; left: 0px; top: 0px; width: 400px;
 height: 500px; display: none"></div>
</body>
</html>
Related Articles
Article last updated: 27 September, 2022