product icon

How to Animate the Instant Chat User Interface

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

You can learn from this article how to animate the instant chat user interface.

File to edit: LanguagesForChatOnlyMode.js 

var ic_hic_demo_timer = null;
var ic_hic_demo_firstrun = true;
ic_hic_demo_timer = setInterval(ic_hic_demo_timer_checkobject, 50);
function ic_hic_demo_timer_checkobject()
{
  if ((ICObject != null) && (ICObject.pCustomLogo != null))
  {
    if (ic_hic_demo_firstrun)
    {
      ic_hic_demo_firstrun = false;
      ICObject.pCustomLogo.style.left = "248px";
      ICObject.pCustomLogo.style.top = "50px";
      ICObject.pCustomLogo.style.zIndex = "2000";
      ICObject.pStatusIcon.style.left = "17px";
      ICObject.pStatusIcon.style.top = "85px";
      ICObject.pStatusIcon.style.zIndex = "2000";
      ICObject.pWindowTitle.style.left = "33px";
      ICObject.pWindowTitle.style.top = "11px";
      ICObject.pWindowTitle.style.zIndex = "2000";
      ICObject.pStatusText.style.left = "54px";
      ICObject.pStatusText.style.top = "88px";
      ICObject.pStatusText.style.zIndex = "2000";
      ICObject.pFileSendButton.style.left = "13px";
      ICObject.pFileSendButton.style.top = "32px";
      ICObject.pFileSendButton.style.zIndex = "2000";
      ICObject.pDisconnectButton.style.left = "54px";
      ICObject.pDisconnectButton.style.top = "32px";
      ICObject.pDisconnectButton.style.zIndex = "2000";
      ICObject.pSendButton.style.left = "297px";
      ICObject.pSendButton.style.top = "382px";
      ICObject.pSendButton.style.zIndex = "2000";
      ICObject.pCustomIcon.style.left = "13px";
      ICObject.pCustomIcon.style.top = "12px";
      ICObject.pCustomIcon.style.zIndex = "2000";
    }
    ICObject.pCustomLogo.style.left = parseInt(ICObject.pCustomLogo.style.left) - 1 + "px";
    ICObject.pCustomLogo.style.top = parseInt(ICObject.pCustomLogo.style.top) + 1 + "px";
    ICObject.pStatusIcon.style.left = parseInt(ICObject.pStatusIcon.style.left) + 1 + "px";
    ICObject.pStatusIcon.style.top = parseInt(ICObject.pStatusIcon.style.top) + 1 + "px";
    ICObject.pWindowTitle.style.left = parseInt(ICObject.pWindowTitle.style.left) + 1 + "px";
    ICObject.pWindowTitle.style.top = parseInt(ICObject.pWindowTitle.style.top) + 1 + "px";
    ICObject.pStatusText.style.left = parseInt(ICObject.pStatusText.style.left) + 1 + "px";
    ICObject.pStatusText.style.top = parseInt(ICObject.pStatusText.style.top) + 3 + "px";
    ICObject.pFileSendButton.style.left = parseInt(ICObject.pFileSendButton.style.left) + 1
 + "px";
    ICObject.pFileSendButton.style.top = parseInt(ICObject.pFileSendButton.style.top) + 1
 + "px";
    ICObject.pDisconnectButton.style.left = parseInt(ICObject.pDisconnectButton.style.left)
 + 1 + "px";
    ICObject.pDisconnectButton.style.top = parseInt(ICObject.pDisconnectButton.style.top)
 + 2 + "px";
    ICObject.pSendButton.style.left = parseInt(ICObject.pSendButton.style.left) - 1 + "px";
    ICObject.pSendButton.style.top = parseInt(ICObject.pSendButton.style.top) - 1 + "px";
    ICObject.pCustomIcon.style.left = parseInt(ICObject.pCustomIcon.style.left) + 1 + "px";
    ICObject.pCustomIcon.style.top = parseInt(ICObject.pCustomIcon.style.top) + 2 + "px";
  }
}
Article last updated: 14 July, 2023