SEBAAI STUDIO
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 Studio
Customisation 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.