🎯 Wishlist Widget - Embed Demo

Note: This is a demo page showing how the widget can be embedded. The widget appears as a floating button in the bottom right corner.

How to Embed

Add the widget to your website by including the following code:

<!-- Light Theme -->
<wishlist-dock data-theme="light"></wishlist-dock>

<!-- Dark Theme -->
<wishlist-dock data-theme="dark"></wishlist-dock>
            

Make sure to include the widget CSS and script before the closing </body> tag:

<!-- Include the CSS file -->
<link rel="stylesheet" href="path/to/style.css">

<!-- Include the widget script -->
<script type="module" src="path/to/wishlist-widget.js"></script>
            

Theme Toggle

Click the buttons above to change the widget theme.

Features

✅ Create and manage stacks (collections)
✅ Add cards with cover images, names, and descriptions
✅ Swipe through cards in Tinder-like interface
✅ Optimistic UI updates with background sync
✅ Responsive design for mobile and desktop
✅ Theme support (light/dark)
✅ Web Component for easy embedding

Try It Out

Click the floating bookmark button in the bottom right corner to open the widget!

Create a new stack
Add some cards to your stack
Click on a stack to view cards in swipe mode
Swipe left/right or use the navigation buttons