product icon

How to Display New HTML Elements

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 display new html elements.

File to edit: LanguagesForChatOnlyMode.js 

var ic_hic_demo_timer = null;
ic_hic_demo_timer = setInterval(ic_hic_demo_timer_checkobject, 100);
function ic_hic_demo_timer_checkobject()
{
  if ((ICObject != null) && (ICObject.pBodyArea != null) && (ICObject.pMainContentArea != null))
  {
    clearInterval(ic_hic_demo_timer);
    ICObject.InsideOfUI = document.createElement("div");
    ICObject.InsideOfUI.className = "demoDiv1";
    ICObject.InsideOfUI.innerHTML = "InsideOfUI";
    ICObject.pMainContentArea.appendChild(ICObject.InsideOfUI);
    ICObject.OutsideOfUI = document.createElement("div");
    ICObject.OutsideOfUI.className = "demoDiv2";
    ICObject.OutsideOfUI.innerHTML = "OutsideOfUI";
    ICObject.pBodyArea.appendChild(ICObject.OutsideOfUI);
  }
}

File to edit: InstantChat.css 

.demoDiv1
{
  position: absolute; 
  left: 0px;
  top: 0px;
  background-color: green;
  z-index: 2000;
}
.demoDiv2
{
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: blue;
  z-index: 2000;
}
Article last updated: 27 September, 2022