sebasnap.com
Embed on Your Website
Add Seba AI Studio as a floating chat widget on any webpage
1Step 1 — Copy the snippet below
2Step 2 — Paste it before </body> on sebasnap.com
3Step 3 — That's it! A floating SEBA button will appear
HTML Snippet
<!-- Seba AI Studio Widget -->
<script>
(function() {
var STUDIO_URL = 'https://sebasavi.com';
var LOGO_URL = 'https://d2xsxph8kpxj0f.cloudfront.net/310419663032477713/Qy5aVMpMMQDdDVxFitWC2M/SEBA_65afa776.png';
// Inject styles
var style = document.createElement('style');
style.textContent = [
'#seba-widget-btn{position:fixed;bottom:24px;right:24px;z-index:99999;width:60px;height:60px;border-radius:50%;background:#0a0e2a;border:2px solid #00bcd4;box-shadow:0 0 20px rgba(0,188,212,0.4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;}',
'#seba-widget-btn:hover{transform:scale(1.1);box-shadow:0 0 30px rgba(0,188,212,0.6);}',
'#seba-widget-btn img{width:38px;height:38px;object-fit:contain;filter:invert(1) brightness(2);}',
'#seba-widget-panel{position:fixed;bottom:96px;right:24px;z-index:99998;width:400px;height:600px;max-width:calc(100vw - 48px);max-height:calc(100vh - 120px);border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.6);border:1.5px solid rgba(0,188,212,0.5);transition:opacity .3s,transform .3s;opacity:0;transform:translateY(20px) scale(0.97);pointer-events:none;}',
'#seba-widget-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all;}',
'#seba-widget-panel iframe{width:100%;height:100%;border:none;}'
].join('');
document.head.appendChild(style);
// Button
var btn = document.createElement('div');
btn.id = 'seba-widget-btn';
btn.title = 'Seba AI Studio';
var img = document.createElement('img');
img.src = LOGO_URL;
img.alt = 'SEBA';
btn.appendChild(img);
// Panel
var panel = document.createElement('div');
panel.id = 'seba-widget-panel';
var iframe = document.createElement('iframe');
iframe.src = STUDIO_URL;
iframe.allow = 'clipboard-write';
panel.appendChild(iframe);
var open = false;
btn.addEventListener('click', function() {
open = !open;
panel.classList.toggle('open', open);
btn.style.borderColor = open ? '#FFD700' : '#00bcd4';
btn.style.boxShadow = open ? '0 0 20px rgba(255,215,0,0.4)' : '0 0 20px rgba(0,188,212,0.4)';
});
document.body.appendChild(btn);
document.body.appendChild(panel);
})();
</script>
<!-- End Seba AI Studio Widget -->Widget Preview
The widget appears as a floating button in the bottom-right corner. Clicking it opens a slide-in chat panel.
Open StudioCustomisation options: You can change the button position by editing the `bottom` and `right` values in the snippet.
ℹ️ Note: The widget loads Seba AI Studio in an iframe. No additional setup is required.
ℹ️ Note: The widget loads Seba AI Studio in an iframe. No additional setup is required.
