Skip to content

Instantly share code, notes, and snippets.

@blikenoother

blikenoother/chat-wdgt.js

Created September 23, 2019 09:57
Show Gist options
  • Save blikenoother/382c054880428ea895333e01885d1f7a to your computer and use it in GitHub Desktop.
Save blikenoother/382c054880428ea895333e01885d1f7a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chat-wdgt.js
var onemgConsultationWidget = { // eslint-disable-line no-unused-vars
init: function (parameters) {
function isMobile() {
try {
if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
return true;
};
return false;
} catch(e) { return false; }
}
if(isMobile()) {
return false;
}
var params = parameters || {};
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
@-webkit-keyframes animateChatWidgetUp {
0% {
-webkit-transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
@-moz-keyframes animateChatWidgetUp {
0% {
-webkit-transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
@-webkit-keyframes animateChatWidgetDown {
0% {
-webkit-transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(100%);
opacity: 0;
}
}
@-moz-keyframes animateChatWidgetDown {
0% {
-webkit-transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(100%);
opacity: 0;
}
}
@-webkit-keyframes animateSpecialityDown {
0% {
-webkit-transform: translateY(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
@-moz-keyframes animateSpecialityDown {
0% {
-webkit-transform: translateY(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
.bringSpecialityIntoView{
animation: animateSpecialityDown 0.3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.showChatWidget{
animation: animateChatWidgetUp 0.3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
border-radius: 10px;
}
.hideChatWidget{
animation: animateChatWidgetDown 0.3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
border-radius: 10px;
}`;
document.getElementsByTagName('head')[0].appendChild(style);
function initWidget() {
var timer = null;
var specialityDiv = document.createElement('div');
specialityDiv.classList.toggle('bringSpecialityIntoView');
Object.assign(specialityDiv.style, {
display: 'inline-block',
});
setSpecialityAnimations(specialityDiv);
function getButtonImage() {
return '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19">\
<g fill="none" fill-rule="evenodd" stroke="#184A68" stroke-linecap="round" stroke-linejoin="round">\
<path d="M1 1l4.993 7.727H18zM1 18l4.993-7.727H18z"/>\
</g>\
</svg>'
}
function getCollapseButton() {
return '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8">\
<g fill="none" fill-rule="evenodd">\
<path d="M-3-6h20v20H-3z"/>\
<path fill="#FFF" d="M2.1 7.7L.7 6.3l6-6 6 6-1.4 1.4-4.6-4.6z"/>\
</g>\
</svg>';
}
function toggleWidget() {
var utm_source = 'na';
if (window.location.href.indexOf('/categories/')) {
utm_source = 'categorypage';
} else if (window.location.href.indexOf('/otc/')) {
utm_source = 'otcpage';
} else if (window.location.href.indexOf('/drugs/')) {
utm_source = 'drugpage';
}
var redirect_url = '/online-doctor-consultation/chat';
if(isMobile()) {
redirect_url = '/online-doctor-consultation/mobilechat/new';
}
redirect_url += '?utm_source=' + utm_source + '&utm_medium=startconsultcta&utm_campaign=doctorsgrowth';
window.location.href = redirect_url;
// iframeWrapper.classList.toggle('showChatWidget');
// iframeWrapper.classList.toggle('hideChatWidget');
// ctaDiv.classList.toggle('showChatWidget');
// ctaDiv.classList.toggle('hideChatWidget');
// if(iframeWrapper.hidden) {
// iframeWrapper.hidden = false;
// destroyTimer();
// } else {
// setSpecialityAnimations(specialityDiv);
// setTimeout(() => {
// iframeWrapper.hidden = true;
// }, 300);
// }
}
function setSpecialityAnimations(element) {
var current = 1;
var specialities = [
'Dermatologist',
'General Physician',
'Sexologist',
'Gynaecologist',
'Pathologist',
];
var length = specialities.length;
element.innerHTML = specialities[0];
if(timer) {
clearInterval(timer);
}
timer = setInterval(function () {
element.classList.add('hideChatWidget');
element.classList.remove('bringSpecialityIntoView');
current = current === (length - 1) ? 0 : current + 1;
setTimeout(() => {
element.innerHTML = specialities[current];
element.classList.remove('hideChatWidget');
element.classList.add('bringSpecialityIntoView');
}, 300);
}, 2500);
}
function destroyTimer() {
if(timer) {
clearInterval(timer);
}
}
var body = document.getElementsByTagName('body')[0];
var wrapperDiv = document.createElement('div');
var divStyle = params.divStyle || {
zIndex: '10',
bottom: '0',
right: '30px',
position: 'fixed',
zIndex: '10000',
};
Object.assign(wrapperDiv.style, divStyle);
var iframeWrapper = document.createElement('div');
iframeWrapper.hidden = true;
iframeWrapper.style.position = 'relative';
iframeWrapper.style.backgroundColor = '#ffffff';
iframeWrapper.classList.toggle('hideChatWidget');
var iframe = document.createElement('iframe');
var url = window.location.href;
var arr = url.split('/');
var host = arr[0] + '//' + arr[2]
iframe.src = host + '/chat-widget/online-doctor-consultation/myconsultationWidget';
iframe.sandbox = 'allow-popups allow-forms allow-pointer-lock allow-scripts allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-downloads-without-user-activation';
var iframeStyle = {
minHeight: '204px',
maxHeight: '700px',
height: 'calc(100vh - 200px)',
width: '360px',
boxShadow: '3px -2px 19px 0 rgba(81, 81, 81, 0.5)',
borderRadius: '10px',
border: 'none',
};
Object.assign(iframe.style, iframeStyle);
var ctaDiv = document.createElement('div');
Object.assign(ctaDiv.style, {
width: '360px',
borderRadius: '10px 10px 0 0',
boxShadow: '3px -2px 19px 0 rgba(81, 81, 81, 0.5)',
backgroundColor: '#eaeaea',
overflow: 'hidden',
position: 'absolute',
bottom: '0',
right: '0',
});
ctaDiv.classList.toggle('showChatWidget');
var topButtonDiv = document.createElement('div');
Object.assign(topButtonDiv.style, {
backgroundColor: '#194b67',
padding: '10px 12px',
color: 'white',
fontSize: '16px',
fontWeight: 'bold',
});
var loginName = params.loginName ? ',&nbsp;' + params.loginName : '';
var preSpecialityDiv = document.createElement('span');
preSpecialityDiv.innerHTML = 'Hey' + loginName + '<br /> Chat for <span style="color:#0bc5d8">FREE</span> with our ';
var mockInputBoxDiv = document.createElement('div');
Object.assign(mockInputBoxDiv.style, {
padding: '15px 18px',
display: 'flex',
justifyContent: 'space-between',
})
var mockInput = document.createElement('div');
Object.assign(mockInput.style, {
width: '270px',
height: '36px',
lineHeight: '36px',
borderRadius: '23.5px',
boxShadow: '0 0 2px 0 rgba(25, 75, 103, 0.49), 0 3px 4px 0 rgba(168, 168, 168, 0.69)',
backgroundColor: '#ffffff',
paddingLeft: '14px',
cursor: 'text',
color: '#bdbdbd',
});
mockInput.innerHTML = 'eg. I have a sore throat';
mockInput.onclick = toggleWidget;
var mockSendBtn = document.createElement('div');
Object.assign(mockSendBtn.style, {
borderRadius: '50%',
height: '37px',
width: '37px',
boxShadow: '0 0 2px 0 rgba(25, 75, 103, 0.51), 0 4px 4px 0 rgba(139, 139, 139, 0.57)',
backgroundColor: '#ffffff',
lineHeight: '43px',
textAlign: 'center',
});
mockSendBtn.innerHTML = getButtonImage();
mockSendBtn.onclick = toggleWidget;
var closeButton = document.createElement('button');
closeButton.innerHTML = getCollapseButton();
Object.assign(closeButton.style, {
position: 'absolute',
top: '10px',
right: '10px',
borderRadius: '50%',
height: '28px',
width: '28px',
textAlign: 'center',
outline: 'none',
lineHeight: '5px',
backgroundColor: 'rgb(25, 75, 103)',
border: 'none',
transform: 'rotate(180deg)',
});
closeButton.onclick = toggleWidget;
var ctaWrapperDiv = document.createElement('div');
Object.assign(ctaWrapperDiv.style, {
position: 'relative',
});
mockInputBoxDiv.appendChild(mockInput);
mockInputBoxDiv.appendChild(mockSendBtn);
topButtonDiv.appendChild(preSpecialityDiv);
topButtonDiv.appendChild(specialityDiv);
ctaDiv.appendChild(topButtonDiv);
ctaDiv.appendChild(mockInputBoxDiv);
iframeWrapper.appendChild(iframe);
iframeWrapper.appendChild(closeButton);
ctaWrapperDiv.appendChild(ctaDiv);
wrapperDiv.appendChild(iframeWrapper);
wrapperDiv.appendChild(ctaWrapperDiv);
body.appendChild(wrapperDiv);
};
initWidget();
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment