Floating bubble
Copy this block into the page where the widget should appear. Replace the calculator URL only if your final hosting address changes.
<!-- SevenTask floating calculator -->
<div id="seventask-calculator-bubble"></div>
<script>
(() => {
const host = document.getElementById('seventask-calculator-bubble');
if (!host) return;
const frame = 'https://seventask-calculator.pages.dev/calculator?embed=1';
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>
* { box-sizing: border-box }
.button { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
width: 54px; height: 54px; border: 1px solid #111; border-radius: 50%;
background: #fff; color: #111; box-shadow: 0 8px 28px #0002; cursor: pointer;
font: 700 20px Arial; }
.panel { display: none; position: fixed; right: 20px; bottom: 86px; z-index: 2147483000;
width: min(420px, calc(100vw - 24px)); height: min(650px, calc(100dvh - 110px));
border: 1px solid #111; border-radius: 18px; overflow: hidden; background: #fff;
box-shadow: 0 18px 60px #0003; }
.panel.open { display: block }
iframe { width: 100%; height: 100%; border: 0; background: white }
@media (max-width: 520px) { .panel { right: 8px; bottom: 76px; width: calc(100vw - 16px); height: min(72dvh, 620px) } }
</style>
<button class="button" type="button" aria-label="Open SevenTask Calculator" aria-expanded="false">7</button>
<section class="panel" aria-label="SevenTask Calculator">
<iframe title="SevenTask Calculator" loading="lazy" allow="clipboard-read; clipboard-write"></iframe>
</section>`;
const button = shadow.querySelector('.button');
const panel = shadow.querySelector('.panel');
const iframe = shadow.querySelector('iframe');
button.addEventListener('click', () => {
const open = panel.classList.toggle('open');
button.setAttribute('aria-expanded', String(open));
if (open && !iframe.src) iframe.src = frame;
});
})();
</script>