Knowledge Base Widget

Knowledge Base Widget

Adding script

<script>
        document.addEventListener('DOMContentLoaded', () => localStorage.removeItem('widgetUrl'))
        class Widget { }
        Widget.open = (url, { width = 570 }) => {
            const a = document.createElement('a')
            const iFrame = document.createElement('iframe')

            if (localStorage.getItem('widgetUrl')) {
                if (localStorage.getItem('widgetUrl') === url) return
                else {
                    localStorage.setItem('widgetUrl', url)
                    let iFrames = document.getElementsByClassName('web-showing-iframe')
                    let visitWeb = document.getElementsByClassName('visit-web-link')
                    for (let i of iFrames) i.src = url
                    for (let j of visitWeb) j.href = url
                }
            } else
                localStorage.setItem('widgetUrl', url)
            const popup = document.createElement("div")

            let popupStyle = `position: fixed; top: 0; right: -${width}px; width: ${width}px; height: 100%; background: #f1f1f1; z-index: 99; transition: right 0.5s ease; `
            let closeStyle = 'color: #888;float: right; margin: 0 8px; font-size: 30px; font-weight: bold; cursor: pointer;'
            let closeStyleHover = 'float: right; font-size: 30px; margin: 0 8px; font-weight: bold; color: black; text-decoration: none; cursor: pointer; '
            let popupContentStyle = 'background: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1)'
            let popupHeaderStyle = 'display: flex; justify-content: space-between'
            let iFrameStyle = `width: ${width}px; height: 96%; margin-bottom: 10rem`
            let closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`
            let redirectIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="1.4em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>`

            const popupContent = document.createElement('div')
            const span = document.createElement('span')
            const popupHeader = document.createElement('div')

            popup.className = 'widget-container'
            popup.style.cssText = popupStyle

            span.className = 'close'
            span.style.cssText = closeStyle
            span.id = 'closeBtn'
            span.innerText = 'X'
            span.innerHTML = closeIcon
            span.addEventListener("click", () => {
                localStorage.removeItem('widgetUrl')
                document.querySelectorAll('.widget-container').forEach(e => e.style.right = `-${width}px`)
                setTimeout(() => {
                    document.querySelectorAll('.widget-container').forEach(e => e.remove())
                }, 500)
            })
            span.addEventListener('mouseenter', () => span.style.cssText = closeStyleHover)

            a.href = url
            a.className = 'visit-web-link'
            a.target = '__blank'
            a.innerHTML = redirectIcon
            a.style.cssText = `align-self: center; text-decoration: none; font-size: 13px; margin: 0 10px`

            iFrame.src = url
            iFrame.className = 'web-showing-iframe'
            iFrame.style.cssText = iFrameStyle

            popupContent.style.cssText = 'height: 100%'
            popupHeader.style.cssText = popupHeaderStyle

            popupHeader.appendChild(span)
            popupHeader.appendChild(a)
            popupContent.appendChild(popupHeader)
            popupContent.appendChild(iFrame)
            popup.appendChild(popupContent)
            document.body.appendChild(popup)
            setTimeout(() => popup.style.right = "0", 20)
        }
    </script>

Open a widget

<button onclick="Widget.open('www.example.com')">OpenWeb</button>

Configure a widget

<button onclick="Widget.open('www.example.com',{ width: 500 })">OpenWeb</button>