window.addEventListener("load", (event) => {
var openSvg = ''
var closeSvg = ''
var config = {
"parentClass": "",
"btnSize": 56,
"btnLeft": "",
"btnRight": 16,
"btnTop": "",
"btnBottom": 30,
"liveChatUrl": 'https://Hopeforfelons.a.gdms.cloud/liveChat?liveChatAccess=MF83OWIxYzYwMDlkODc0ZGUyOGFiMGI3Njk3ZWIzMTJhNl9lYzc0ZDdhNjRjNzQmOTE5YmVjMjc4OWExZmEyNTBhMGQzNGExMTJhZWUyMDE=',
"liveChatWidth": 400,
"liveChatHeight": 680,
"expandDire": ""
}
initLiveChat(config)
function initLiveChat (config) {
var bodyDom = document.body
if (config.parentClass) {
bodyDom = document.querySelector('.'+config.parentClass)
}
if (!bodyDom.style.position) {
bodyDom.style.position = 'relative'
}
var entryBtn = document.createElement('div')
entryBtn.className = 'live-chat-entry close'
btnInitStyle()
btnCloseStyle()
bodyDom.appendChild(entryBtn)
entryBtn.onclick = function () {
var liveChatIframe = document.getElementById('liveChatIframe')
if (this.classList.contains('close')) {
this.classList.remove('close')
this.classList.add('open')
btnOpenStyle()
if (liveChatIframe) {
iframeOpenStyle(liveChatIframe)
} else {
iframeInit()
}
} else {
this.classList.remove('open')
this.classList.add('close')
btnCloseStyle()
if (liveChatIframe) {
iframeCloseStyle(liveChatIframe)
}
}
}
entryBtn.addEventListener('mouseover', () => {
entryBtn.style.backgroundColor = '#4299FC';
});
entryBtn.addEventListener('mouseout', () => {
entryBtn.style.backgroundColor = '#3F8EF0';
});
function btnInitStyle () {
entryBtn.style.position = 'absolute'
entryBtn.style.top = typeof config.btnTop === 'number' && config.btnTop >= 0 ? config.btnTop +'px' : config.btnTop
entryBtn.style.left = typeof config.btnLeft === 'number' && config.btnLeft >= 0 ? config.btnLeft +'px' : config.btnLeft
entryBtn.style.bottom = typeof config.btnBottom === 'number' && config.btnBottom >= 0 ? config.btnBottom +'px' : config.btnBottom
entryBtn.style.right = typeof config.btnRight === 'number' && config.btnRight >= 0 ? config.btnRight +'px' : config.btnRight
entryBtn.style.width = config.btnSize >= 0 ? config.btnSize +'px' : '50px'
entryBtn.style.height = config.btnSize >= 0 ? config.btnSize +'px' : '50px'
entryBtn.style.borderRadius = config.btnSize >= 0 ? config.btnSize/2 +'px' : '25px'
entryBtn.style.backgroundColor = '#3F8EF0'
entryBtn.style.padding = '12px'
entryBtn.style.cursor = 'pointer'
entryBtn.style.userSelect = 'none'
entryBtn.style.boxSizing = 'border-box'
entryBtn.style.zIndex = 100000
entryBtn.innerHTML = openSvg + closeSvg
}
function btnCloseStyle () {
entryBtn.querySelectorAll('svg')[0].style.display = 'block'
entryBtn.querySelectorAll('svg')[1].style.display = 'none'
}
function btnOpenStyle () {
entryBtn.querySelectorAll('svg')[0].style.display = 'none'
entryBtn.querySelectorAll('svg')[1].style.display = 'block'
}
function iframeInit () {
var iframeBox = document.createElement('iframe')
var iframeWidth = typeof config.liveChatWidth === 'number' && config.liveChatWidth >= 0 ? config.liveChatWidth : ''
var iframeHeight = typeof config.liveChatHeight === 'number' && config.liveChatHeight >= 0 ? config.liveChatHeight : ''
var btnSize = config.btnSize > 0 ? config.btnSize : 50
iframeBox.id = 'liveChatIframe'
iframeBox.src = config.liveChatUrl;
iframeBox.width = iframeWidth ? iframeWidth + 'px' : config.liveChatWidth
iframeBox.height = iframeHeight ? iframeHeight + 'px' : config.liveChatHeight
iframeBox.sandbox= 'allow-same-origin allow-scripts allow-forms allow-popups allow-downloads'
iframeBox.allow= 'camera; microphone; autoplay; speaker; speaker-selection'
iframeBox.style.position = 'absolute'
iframeBox.style.width = iframeWidth ? iframeWidth + 'px' : config.liveChatWidth
iframeBox.style.minWidth = iframeWidth ? iframeWidth + 'px' : config.liveChatWidth
iframeBox.style.bottom = '-6px'
iframeBox.style.right = (btnSize + 20) + 'px'
iframeBox.style.backgroundColor = '#F5F7FA'
iframeBox.style.boxShadow = '0 2px 16px 0 #00000029'
iframeBox.style.borderRadius = '12px'
iframeBox.style.background = '#fff'
iframeBox.style.border = 'none'
entryBtn.appendChild(iframeBox);
}
function iframeCloseStyle (liveChatIframe) {
liveChatIframe.style.display = 'none'
}
function iframeOpenStyle (liveChatIframe) {
liveChatIframe.style.display = 'block'
var iframeHeight = typeof config.liveChatHeight === 'number' && config.liveChatHeight >= 0 ? config.liveChatHeight : ''
liveChatIframe.height = iframeHeight ? iframeHeight + 'px' : config.liveChatHeight
}
}
})
