<div id="chatContainer">
<div id="chatHeader" onclick="myfunction();">
<img src="https://img/chaticon.png" style="vertical-align:middle;"/> Chat with us
</div>
<div id="chatBody">
<div id="Openhours">
<iframe id="chatframe" src="https://www.chatmepage/Saleschat/">
</iframe>
</div>
<div id="Closedhours">
Sales hours are closed please <a target="_parent" href="https://www.xyz.com/contact"> Contact </a> our Agents
</div>
</div>
</div>
What I have tried:
onclick of the button I am appending the div, but I need to create the div onload of the page.
<!DOCTYPE html>
#chtping
{
vertical-align:middle;
}
#myForm
{
position: fixed;
background-color: #fff;
bottom: 0;
right:calc(50% - 200px);
color: #fff;
z-index: 10;
font-size: 18px;
overflow:hidden;
font-weight: bold;
background-color: #00a9e0;
border-radius: 5px;
border-radius: 5px 5px 0px 0px;
}
#chatbody
{
color: rgb(0, 0, 0);
font-weight: normal;
font-size: 13px;
height: 455px;
padding: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: rgb(204, 204, 204);
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
display:none;
background-color: white;
}
#myframe
{
width:100%;
height:100%;
Position:fixed;
margin-left:5px;
border:0;
}
Click the button to create a FORM and an INPUT element.
Try it
function myFunction() {
var x = document.createElement("div");
x.setAttribute("id", "myForm");
document.body.appendChild(x);
var y = document.createElement("div");
y.setAttribute("id", "chatheader");
y.innerHTML="<img id='chtping' src='https://img/chaticon.png'/>chat with us";
var chtbdy=document.createElement("div");
chtbdy.setAttribute("id","chatbody");
document.getElementById("myForm").appendChild(y,chtbdy);
var openhrs=document.createElement("div");
openhrs.setAttribute("id","Openhours");
openhrs.innerHTML("<iframe id='myframe' src='https://www.chatmepage/Saleschat/'></iframe>");
var closehrs=document.createElement("div");
closehrs.setAttribute("id","Closehours");
closehrs.innerHTML=("Sales hours are closed please <a target='_parent' href='https://www.xyz.com/contact'> Contact </a> our Agent");
document.getElementById("chatbody").appendChild(openhrs,closehrs);
}</pre>