📦 Vibie Embed SDK (vibie.js)
The Vibie Embed SDK is an ultra-lightweight (< 16 KB), zero-dependency Web Component library designed to embed interactive video experiences into any web application or CMS (Webflow, WordPress, Shopify, Next.js, Nuxt, React, HTML).
TipThe SDK uses standard Web Components and native Shadow DOM. Your host page stylesheets (like Tailwind or Bootstrap) will never interfere with the video player styling.
⚡ Quick Installation
Add the Vibie script anywhere before your closing </body> tag:
html
<!-- Vibie Embed SDK CDN -->
<script src="https://vibie.app/sdk/v1/vibie.js" async></script>
🎨 Embedding Modes
1. Floating Video Bubble (Corner Widget)
Renders an animated circular video bubble that stays docked in the corner of the user’s screen. When clicked, it smoothly expands into an interactive vertical card.
html
<vibie-video
video-id="YOUR_VIDEO_ID"
mode="floating"
position="bottom-right">
</vibie-video>
Supported Positions:
bottom-right(Default)bottom-lefttop-righttop-left
2. Responsive Inline Player
Embeds the video directly inside the content flow of your website (ideal for blog posts, landing page heroes, and documentation):
html
<div style="max-width: 480px; margin: 0 auto;">
<vibie-video
video-id="YOUR_VIDEO_ID"
mode="inline">
</vibie-video>
</div>
⚙️ Attribute Configuration Options
| Attribute | Type | Default | Description |
|---|---|---|---|
video-id |
string |
(Required) | Vibie video ID or Cloudflare Stream UID |
mode |
'floating' | 'inline' | 'modal' |
'floating' |
Display mode of the player |
position |
'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' |
'bottom-right' |
Screen corner positioning for floating mode |
theme-color |
string (hex) |
'#6366F1' |
Primary color for CTA button, pulse ring, and borders |
cta-text |
string |
(from video) | Custom text for Call to Action button |
cta-url |
string |
(from video) | Destination URL for the CTA button |
heading |
string |
(from video) | Bubble pill label and card header title |
💻 Programmatic JavaScript API
For single-page applications (React, Vue, Svelte, Angular), you can mount and manage widgets programmatically using the global Vibie object:
javascript
// Initialize widget programmatically
const widget = Vibie.mount({
videoId: "7a47c23a-40a6-42a8-9ba4-d3e6ef1506fa",
mode: "floating",
position: "bottom-right",
themeColor: "#6366F1",
ctaText: "Book a Strategy Call",
ctaUrl: "https://vertexdc.com/contact"
});
🛡️ Key Architectural Advantages
[!NOTE]
- Shadow DOM Encapsulation: Zero CSS collisions.
- Self-Contained: No external CSS stylesheets or Google Fonts requests required.
- Adaptive Bitrate Streaming: Streams through Cloudflare’s global edge network in HLS (
.m3u8) with automatic fallback to MP4.