Today every website provide live support or contact form link on home/landing page. I was created for you one drag-able and attractive animated contact form link as per user requirement thy can adjust position as per thy like on website screen.
Users attract for contact for request or other aim of business. Stored position in client cookie and every time same position whatever user set.
You can see demo on 9code.info site and download from clinking on below link:
Below style sheet:
<style type=”text/css”>
#chat_box{
position: fixed;
top: 0px;
}
#dragme{
display: none;
}
#chat,#dragme {
position:absolute;
display:block;
top:30%;
left:3%;
width:80px;
height:80px;
background:transparent;
z-index:90000;
}
#chat .inner_blob {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width:65px;
height:65px;
border:1px solid #9A202C;
border-radius:100%;
-webkit-animation-name: pulse_animation;
animation-name: pulse_animation;
-webkit-animation-duration:2000ms;
animation-duration:2000ms;
-webkit-transform-origin:70% 70%;
transform-origin:70% 70%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
transform-origin:center center;
animation-delay: 0s;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
/box-shadow:inset 0 0 15px rgba(191, 30, 46, .6);/
}
#chat.active .inner_blob {
border-color:#7cc576;
}
#chat:hover .inner_blob {
-webkit-animation-name: none;
animation-name: none;
}
#chat button,
#chat button:link,
#chat button:visited {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
padding:0px;
width:50px;
height:50px;
background:#9A202C;
border-radius:100%;
text-decoration:none;
text-align: center;
-webkit-transition:all .3s;
transition:all .3s;
box-sizing: border-box;
border:none;
cursor:pointer;
}
#chat button:hover,
#chat button:focus,
#chat button:active {
/* transform:scale(1.25); */
outline:none;
}
#chat.active button,
#chat.active button:link,
#chat.active button:visited {
background:#7cc576;
}
#chat:hover button {
width:80px;
height:80px;
}
#chat button .hover_text {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity:0;
padding-top:30px;
font-size:13px;
color:#fff;
font-weight:700;
text-align:center;
background:transparent;
}
#chat.active button .hover_text {
padding-top:20px;
}
#chat:hover button .hover_text {
-webkit-transition: opacity .3s .3s;
transition: opacity .3s .3s;
opacity: 1;
filter: alpha(opacity=100);
}
#chat button .hover_text {
}
#chat button:after {
content:”;
display: inline-block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width:18px;
height:17px;
background:transparent url(chat.png) 0px 0px no-repeat;
transition: opacity 0.3s ease 0.3s;
}
#chat:hover button:after {
transition: opacity 0.3s ease 0s;
opacity: 0;
filter: alpha(opacity=0);
}
@-webkit-keyframes pulse_animation {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1.); }
}
@keyframes pulse_animation {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1.); }
}
</style>
JavaScript code:
<script type=”text/javascript”>
var chat=document.getElementById(‘dragme’);
chat.style.display=”block”;
if(getCookie(“qby”)!=””)
{
chat.style.left=getCookie(“qbx”);
chat.style.top=getCookie(“qby”);
}
else
{
chat.style.left=window.innerWidth/2-40;
chat.style.top=window.innerHeight/2-40;
}
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData(“text/plain”,
(parseInt(style.getPropertyValue(“left”),10) – event.clientX) + ‘,’ + (parseInt(style.getPropertyValue(“top”),10) – event.clientY));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData(“text/plain”).split(‘,’);
var dm = chat;
var x=(event.clientX + parseInt(offset[0],10)) + ‘px’;
var y=(event.clientY + parseInt(offset[1],10)) + ‘px’;
setCookie(“qbx”,x,7);
setCookie(“qby”,y,7);
dm.style.left = x;
dm.style.top = y;
event.preventDefault();
return false;
}
var dm = document.getElementById(‘dragme’);
dm.addEventListener(‘dragstart’,drag_start,false);
document.body.addEventListener(‘dragover’,drag_over,false);
document.body.addEventListener(‘drop’,drop,false);
function getCookie(cname) {
var name = cname + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return “”;
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays2460601000));
var expires = “expires=”+d.toUTCString();
document.cookie = cname + “=” + cvalue + “; ” + expires;
}
</script>
Html code:
<div id=”chat_box”>
<aside draggable=”true” id=”dragme”>
<div id=”chat” class=”active”>
<div class=”inner_blob”></div>
<button onclick=”javascript:void window.open(‘https://9code.info//request-me’,’1410949501326′,’width=500,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=100,top=100′);return false;”><span class=”hover_text”>ASK TUTORIAL</span></button>
</div>
</aside>
</div>
Above code see or download from above link and set your in your website, If you any query or need to chnage request then contact me or write comment to I free help you.
Thanks 🙂
Leave a Reply