| 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 ? ', ' + 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