<!-- 1. Add the embed script (replace store_xxx with your Store ID) -->
<script src="https://app.selektable.com/widgets/embed.js" data-store-id="store_xxx" async></script>

<!-- 2. Add a button -->
<button onclick="openWidget()">View in your room</button>

<!-- 3. Open the widget with product data -->
<script>
function openWidget() {
  Selektable.open('widget_abc123', {
    productId: 123,
    productTitle: 'Product Name',
    productImage: 'https://example.com/product.jpg',
    productImages: [
      { id: 1, src: 'https://example.com/product.jpg', alt: 'Product' }
    ],
    productUrl: 'https://example.com/product',

    onAddToCart: async function(product, quantity, variation) {
      // Implement your cart logic
      const response = await yourCartApi.add(product.id, quantity);
      return {
        success: response.ok,
        error: response.ok ? undefined : 'Failed to add to cart'
      };
    },

    onViewCart: function() {
      window.location.href = '/cart';
    },

    onCheckout: function() {
      window.location.href = '/checkout';
    }
  });
}
</script>

POST https://app.selektable.com/api/webhooks/orders
Content-Type: application/json

{
  "orderId": "order-789",
  "storeId": "store_xxx",
  "customerEmail": "customer@example.com",
  "items": [
    {
      "productId": "prod-456",
      "quantity": 1,
      "price": 899.00
    }
  ],
  "total": 899.00,
  "currency": "EUR"
}

// Fetch product data from your API
const product = await fetch('/api/products/123').then(r => r.json());

// Open widget with fetched data
Selektable.open('widget_abc123', {
  productId: product.id,
  productTitle: product.name,
  productImage: product.images[0].url,
  productImages: product.images.map((img, i) => ({
    id: i,
    src: img.url,
    alt: img.alt || product.name
  })),
  productUrl: window.location.href
});