🛍️ Shoppable Video Demo

Experience TikTok Shop-style product tagging in videos

🎯

Timed Product Tags

Products appear at specific timestamps with animated tags that grab attention.

📍

Positioned Overlays

Tags are positioned exactly where products appear in the video frame.

🛒

One-Click Purchase

Viewers can add products to cart directly from the video without interruption.

✨

Smooth Integration

Seamlessly integrates with existing video players with minimal setup.

            📝 How to Use
            <!-- Include the shoppable video player script -->
<script src="/public/js/shoppable-video-player.js"></script>

<!-- Add data-video-id attribute to your video element -->
<video data-video-id="123" controls>
    <source src="your-video.mp4" type="video/mp4">
</video>

<!-- That's it! Product tags will auto-load and display -->
        

            🎨 Manual Initialization
            const videoElement = document.getElementById('my-video');
const shoppablePlayer = new ShoppableVideoPlayer(videoElement, videoId);

        

            🏷️ Product Tag Format
            {
    "video_id": 1,
    "product_id": 123,
    "timestamp": 5.5,        // Show at 5.5 seconds
    "position_x": 50,        // X position (%)
    "position_y": 30,        // Y position (%)
    "duration": 5,           // Show for 5 seconds
    "product_name": "Cool Product",
    "product_price": 29.99,
    "product_image": "/path/to/image.jpg"
}
        

Browse Store →