const styleSheet = document.createElement('style'); styleSheet.innerText = ` .sdk--container { position: fixed; bottom: 42px; right: 42px; width: 64px; height: 64px; z-index: 9999; color: white; border-radius: 50%; font-family: 'Noto Sans', Roboto, Arial, sans-serif; } .sdk--container.sdk--expanded { height: 90%; width: 50%; min-width: 500px; bottom: 5px; right: 5px; border-radius: 0; border-top-left-radius: 20px; background-color: #37474F; box-shadow: -1px -1px 2px 1px #000000; } .sdk--a-expand-collapse { background: url('https://sadik.ai/static/logo-64.png'); width: 64px; height: 64px; background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block; } .sdk--container.sdk--expanded .sdk--a-expand-collapse { background: #37474F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill='white' d='M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z'/%3E%3C/svg%3E") no-repeat; width: 30px; height: 24px; float: right; } .sdk--header { font-size: 16px; text-align: center; margin: 10px 5px; } .sdk--header span { display: inline-block; } .sdk--container.sdk--collapsed .sdk--main { display: none !important; } .sdk--main { width: 100%; margin: 0; display: flex; flex-direction: column-reverse; height: calc(100% - 73px); overflow-x: hidden; } .sdk--disclaimer { font-size: 10px; display: block; padding: 7px; } .sdk--disclaimer a { color: white; } `; document.head.appendChild(styleSheet); const sdkContainer = document.createElement('div'); sdkContainer.className = 'sdk--container sdk--collapsed'; const sdkHeader = document.createElement('h1'); sdkHeader.className = 'sdk--header'; const sdkExpandCollapse = document.createElement('a'); sdkExpandCollapse.href = '#'; const sdkHeaderSpan = document.createElement('span'); const sdkDisclaimer = document.createElement('small'); sdkDisclaimer.className = 'sdk--disclaimer'; sdkDisclaimer.innerHTML = 'This is an AI-bot created at sadik.ai and may provide inaccurate information, user discretion is required.'; let iframeBuilt = false; sdkExpandCollapse.addEventListener('click', e => { e.preventDefault(); if (!iframeBuilt) { const sdkMain = document.createElement('iframe'); sdkMain.title = 'Chat with our Experts'; sdkMain.src = 'https://sadik.ai/chat-embed-YykY7OMYDAIsxUiHvr0W'; sdkMain.allow = 'microphone'; sdkMain.frameBorder = 'none'; sdkMain.className = 'sdk--main'; sdkContainer.appendChild(sdkMain); sdkContainer.appendChild(sdkDisclaimer); iframeBuilt = true; } sdkHeaderSpan.textContent = sdkContainer.classList.contains('sdk--expanded') ? '' : 'Chat with our Experts'; sdkContainer.classList.toggle('sdk--expanded'); sdkContainer.classList.toggle('sdk--collapsed'); return false; }); sdkExpandCollapse.className = 'sdk--a-expand-collapse'; sdkHeader.appendChild(sdkHeaderSpan); sdkHeader.appendChild(sdkExpandCollapse); sdkContainer.appendChild(sdkHeader); document.body.appendChild(sdkContainer);