Shoppable Video Widget Builder - Floating Multi Style Popup

OFFICIAL v2.0 MAJOR COMMERCIAL UPDATE IS LIVE!

The ultimate all-in-one interactive video solution for Shopify, WooCommerce, WordPress & Custom Websites. Turn passive traffic into high-value sales, email leads, and repeat buyers!

Looking to skyrocket your store’s conversion rate and engage shoppers like TikTok and Instagram? Shoppable Video Widget v2.0 is an advanced, ultra-lightweight (pure Vanilla JS) marketing powerhouse that lets you embed interactive video popups, shoppable drawers, flash sale deals, and lead capture gates—with zero coding required!

What’s New in Version 2.0 (Game-Changing Features):

• Universal YouTube & Shorts Support: Not just MP4/WebM! Now you can simply paste any YouTube video, Shorts, or watch URL. The widget automatically extracts the ID, fetches high-res cover thumbnails, and renders an ultra-fast responsive player.


• ️ 4 High-Conversion Display Layouts:
  • Standard Split Card: Classic 2-column landscape layout (Video on left, product details on right).
  • TikTok Style Card: Trendy 9:16 vertical card with top video and centered deal elements below.
  • Immersive Vertical (Bottom Drawer): Full-screen mobile story video with a smooth slide-up bottom sheet for checkout.
  • Cinema Landscape (Side Drawer): 16:9 widescreen cinema layout with an expandable right-hand side deal drawer.


• Shoppable Flash Deals & 1-Click Coupon: Display discounted sale prices, strike-through original prices with auto-calculated % OFF badges, and a 1-click clipboard coupon box that gives instant Copied! ✅ feedback.


• ⏳ Urgency Countdown Timer: Add customizable ticking countdown timers (e.g., Ends: 14:59) to create intense FOMO and push hesitant buyers to checkout immediately.


• Lead Capture Gate & CSV Export: Lock exclusive discount codes behind an email submission barrier. Capture customer emails on autopilot and export all collected leads to a formatted CSV spreadsheet with 1-click!


• Interactive Choice Branching: Overlay clickable choice buttons on your video (e.g. “For Men “ vs. “For Women “) allowing visitors to pick their own personalized product pathway in real-time.


• Speech Bubble Teaser & WhatsApp Chat CTA: Add a floating speech bubble next to the video bubble that pops up with a delay to boost click-through rates (+300%). Also includes a secondary 1-click WhatsApp chat button!


• Smart PiP (Picture-in-Picture) Mini-Player: When minimized, the player shrinks into an elegant mini card that docks precisely over the floating bubble position, keeping only a clean ⤢ Expand button visible.


• Deep Linking & Multi-Layout Triggering: Launch specific videos or layouts from anywhere on your site using direct URL hash links (#open-video, #video-2) or plain HTML buttons (e.g., data-avw-layout="cinema").


• Smart Device Visibility Filter: Choose whether the widget should appear for All Devices, Desktop Only, or Mobile Only.

✨ Core Technical Highlights:

• Pure Vanilla JavaScript: 100% lightweight (<15KB), zero dependencies, no jQuery, no framework overhead. Super-fast loading that won’t hurt Google Core Web Vitals.


• Smart Behavioral Triggers: Exit-Intent detection, Auto-Open with customizable delay timers, and Run-Once protection via localStorage.


• Interactive Visual Builder Tool: Includes a full visual live configurator to preview settings, tweak styles, and generate clean copy-paste embed code in seconds.


• Comprehensive Typography Controls: Independently customize font sizes for Title, Description, and CTA Buttons.


• Analytics & Pixel Ready: Auto-tracks video opens, button clicks, coupon copies, and captured leads to Google Analytics 4 (GA4) and Meta Pixel (Facebook).


• Secure Dismissal: Clicks outside the video popup will not accidentally close it; only intentional clicks on the close button will dismiss it.

Universal Compatibility:

Works out-of-the-box on any platform, CMS, or framework:

• Shopify  |  • WooCommerce  |  • WordPress  |  • Webflow  |  • Wix / Squarespace  |  • Magento  |  • Pure HTML / PHP / React / Vue

⚙️ How It Works (Quick 3-Step Setup):

1. Design & Configure: Open the included Visual Builder, paste your MP4 or YouTube URL, add your discount details, and pick your preferred layout.


2. Live Test: Click “Launch Live Preview” to test responsiveness, triggers, and deals directly in real-time.


3. Embed: Click “Generate Embed”, copy the clean 3-line code snippet, and paste it before the </body> tag of your website. You’re ready to sell!

What’s Included in the Download Package:

• Core Widget Engine (widget.js)
• Pro Addon & eCommerce Engine (widget-pro-addon.js)
• Clean Responsive Stylesheet (widget-theme.css)
• Interactive Live Builder / Configurator Tool (index.html)
• Interactive Preview Landing Page (preview.html)
• Comprehensive Step-by-Step Documentation (documentation.html)

Official Change Log

Version 2.0 – November 2026 (Major Commercial Release)

• NEW: Universal YouTube & Shorts Support with auto-extracted high-res bubble thumbnails and responsive player.
• NEW: 4 High-Performance Layouts including Cinema 16:9 side-drawer and Immersive full-screen bottom-drawer.
• NEW: Shoppable Deals Engine with automated % OFF calculation, Sale vs. Regular pricing, and 1-click copy coupon cards.
• NEW: Urgency Countdown Timer with customizable real-time ticking clock.
• NEW: Lead Capture Gate (Email Lock) with secure localStorage recording and instant CSV lead export.
• NEW: Interactive Choice Branching – overlay clickable choice buttons on videos to branch into different product paths.
• NEW: Smart PiP (Picture-in-Picture) Mini-Player docking directly onto the floating bubble position with Expand button.
• NEW: Multi-Layout per Page Triggering – trigger different video layouts from different buttons across the same page via HTML data attributes.
• NEW: Direct Deep-Linking via URL hash (#open-video, #video-2) and query parameters.
• NEW: Device Visibility Filter (All, Desktop Only, or Mobile Only).
• NEW: Speech Bubble Teaser with timed CTR-booster delay.
• NEW: Secondary WhatsApp Action for instant click-to-chat conversions.
• NEW: Typography Controls – customize font sizes for Title, Description, and CTA Button independently.
• IMPROVEMENT: Modal outside click dismissal disabled to prevent accidental closings.
• IMPROVEMENT: Modernized vector minimize/close control bar with zero duplicate buttons.
• IMPROVEMENT: Full integration with Google Analytics 4 (GA4) and Meta Pixel event tracking.

Version 1.0 – March 2026 (Initial Release)

• Initial Release on CodeCanyon.