const url = 'https://my.dittomark.is/X2xb6qOQiO8PWfTPAPkz'; const mainDiv = document.createElement('div'); Object.assign(mainDiv.style,{ userSelect: 'none', cursor: 'pointer', position: 'fixed', right: '16px', bottom: '16px', zIndex: '1000', backgroundColor: 'white', width: '56px', height: '56px', borderRadius: '100px', boxShadow: '0px 0px 3px 0px #b4b4b4' }); const chatBubbleIcon = document.createElement('img'); mainDiv.appendChild(chatBubbleIcon); chatBubbleIcon.src = 'https://storage.googleapis.com/flutterflow-io-6f20.appspot.com/projects/aiaiai-l1aca3/assets/9zvnbz5yfhf8/ditto-youtube.png'; Object.assign(chatBubbleIcon.style, { width: '100%', height: '100%', filter: 'grayscale(1)', position: 'absolute', transform: 'translate(-50%, -50%)', top: '50%', left: '50%' }); chatBubbleIcon.addEventListener('mouseenter', () => { Object.assign(chatBubbleIcon.style, { filter: 'grayscale(0)' }); }); chatBubbleIcon.addEventListener('mouseleave', () => { Object.assign(chatBubbleIcon.style, { filter: 'grayscale(1)' }); }); // mainDiv.innerText = 'Hello, World!!!!!'; document.body.appendChild(mainDiv); let iframe let open = false; const createIframe = () => { iframe = document.createElement('iframe'); iframe.style = 'position: fixed; bottom: 16px; right: 88px; width: 400px; height: 600px; border: none; box-shadow: 0px 0px 3px 0px #b4b4b4; border-radius: 16px; z-index: 1000;'; iframe.src = url; iframe.id = 'ditto-iframe'; mainDiv.appendChild(iframe); } const openIframe = () => { open = true; chatBubbleIcon.src = 'https://static.thenounproject.com/png/5027711-200.png'; if (!iframe) { createIframe(); } iframe.style.display = 'block'; chatBubbleIcon.style.width = '20px'; chatBubbleIcon.style.height = '20px'; }; const closeIframe = () => { open = false; chatBubbleIcon.src = 'https://storage.googleapis.com/flutterflow-io-6f20.appspot.com/projects/aiaiai-l1aca3/assets/9zvnbz5yfhf8/ditto-youtube.png'; iframe.style.display = 'none'; chatBubbleIcon.style.width = '100%'; chatBubbleIcon.style.height = '100%'; } mainDiv.onclick = () => { if (window.outerWidth < 500) { window.open(url, '_blank'); return; } if (!open) { openIframe(); return; } closeIframe(); };