<script src="https://app.selektable.com/widgets/embed.js" async></script>

<button onclick="Selektable.open('widget_abc123', {
  productId: 'sofa-001',
  productTitle: 'Modern Blue Sofa',
  productImage: 'https://myshop.com/images/sofa.jpg'
})">
  View in your room
</button>

Selektable.open('widget_abc123', {
  productId: 'sofa-001',
  productTitle: 'Modern Blue Sofa',
  productImage: 'https://myshop.com/images/sofa-front.jpg',
  productImages: [
    { id: 1, src: 'https://myshop.com/images/sofa-front.jpg', alt: 'Front view' },
    { id: 2, src: 'https://myshop.com/images/sofa-side.jpg', alt: 'Side view' },
    { id: 3, src: 'https://myshop.com/images/sofa-top.jpg', alt: 'Top view' }
  ],
  productUrl: 'https://myshop.com/products/modern-blue-sofa'
});

<script src="https://app.selektable.com/widgets/embed.js" async></script>

<script>
  window.addEventListener('load', function () {
    Selektable.preload('widget_abc123');
  });
</script>

<button onclick="Selektable.open('widget_abc123', {
  productId: 'sofa-001',
  productTitle: 'Modern Blue Sofa',
  productImage: 'https://myshop.com/images/sofa.jpg'
})">
  View in your room
</button>

<script src="https://app.selektable.com/widgets/embed.js" async></script>

<div
  data-selektable-widget="widget_abc123"
  data-product-id="sofa-001"
  data-product-title="Modern Blue Sofa"
  data-product-images='[{"id":1,"src":"https://myshop.com/images/sofa.jpg","alt":"Sofa"}]'
>
  <button onclick="Selektable.open('widget_abc123')">
    View in your room
  </button>
</div>

<script src="https://app.selektable.com/widgets/embed.js" async></script>

<script>
  // After page load, identify the user if logged in
  window.addEventListener('load', function () {
    // Replace with your actual user data
    var user = getCurrentUser(); // your auth function
    if (user) {
      Selektable.identify(user.id, {
        name: user.name,
        email: user.email
      });
    }
  });
</script>

// When product changes in your SPA
function onProductChange(product) {
  // Just pass the new product data when opening
  document.getElementById('try-on-btn').onclick = function () {
    Selektable.open('widget_abc123', {
      productId: product.id,
      productTitle: product.name,
      productImage: product.image,
      productImages: product.images.map(function (img, i) {
        return { id: i, src: img.url, alt: img.alt };
      }),
      productUrl: window.location.href
    });
  };
}