Turn Your Product Detail Page Into a 3d design studio.

const embed = konfigraEmbed.init({
  tenant: 'your-tenant',
  container: '#studio-root',
  mode: 'simple', // 'simple' | 'full'
  productId: 5,
  on: {
    'konfigra:ready': () => console.log('Ready'),
    'konfigra:design-saved': ({ shareUrl }) => {
      document.querySelector('[name="design_url"]').value = shareUrl;
    }
  }
});

const embed = konfigraEmbed.init({
  tenant: 'your-tenant',
  mode: 'modal',
  productId: 5
});

document.querySelector('#customize-btn')
  .addEventListener('click', () => embed.open());

embed.on('konfigra:color-changed', (data) => {
  console.log(data.allColors);
});

embed.on('konfigra:design-saved', ({ designId, shareUrl }) => {
  // link designId to the order
});

// Kontrol metodları
embed.setColor('body', '#ff0000');
embed.setProduct(5, 12);
embed.getScreenshot().then(base64 => { /* ... */ });
embed.destroy();