konfigra Embed SDK

<!-- 1. Widget container -->
<div id="konfigra-widget"></div>

<!-- 2. SDK script -->
<script
  src="https://{your-store}.konfigra.com/embed/konfigra-embed.js"
  data-container="#konfigra-widget"
  data-product="5"
  data-mode="simple">
</script>

<div id="konfigra-widget"></div>

<script
  src="https://{your-store}.konfigra.com/embed/konfigra-embed.js"
  data-container="#konfigra-widget"
  data-product="5"
  data-template="12"
  data-mode="simple"
  data-height="600px"
  data-width="100%"
  data-lang="auto">
</script>

<script src="https://{your-store}.konfigra.com/embed/konfigra-embed.js"></script>

<div id="konfigra-widget"></div>

<script>
const embed = konfigraEmbed.init({
  container:  '#konfigra-widget',
  productId:  5,           // optional: open a specific product
  templateId: 12,          // optional: pre-select a template
  mode:       'simple',    // 'simple' | 'full'
  height:     '600px',
  lang:       'auto',      // optional: 'en' | 'tr' | 'de' | 'auto'
  on: {
    'konfigra:ready': () => {
      console.log('Studio is ready');
    },
    'konfigra:color-changed': ({ layerId, color, allColors }) => {
      console.log('Color changed:', layerId, '→', color);
    },
    'konfigra:design-saved': ({ designId, salt, shareUrl }) => {
      console.log('Design saved:', shareUrl);
    },
  }
});
</script>

<script src="https://{your-store}.konfigra.com/embed/konfigra-embed.js"></script>

<button id="customize-btn">Customize Product</button>

<script>
const embed = konfigraEmbed.init({
  mode:      'modal',   // no container needed — SDK builds the overlay
  productId: 5,
  on: {
    'konfigra:design-saved': ({ designId, salt, shareUrl }) => {
      document.querySelector('[name="konfigra_design_url"]').value = shareUrl;
      embed.close();
    }
  }
});

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

// Fixed language
konfigraEmbed.init({ container: '#konfigra-widget', productId: 5, lang: 'de' });

// Follow the host page: <html lang="tr-TR"> opens the studio in Turkish
konfigraEmbed.init({ container: '#konfigra-widget', productId: 5, lang: 'auto' });

const iframe = document.querySelector('iframe');

// Send a command
iframe.contentWindow.postMessage({
  type:    'konfigra:set-color',
  payload: { layerId: 'body', color: '#3b82f6' }
}, '*');

// Listen for events
window.addEventListener('message', (event) => {
  if (event.source !== iframe.contentWindow) return;
  const { type, payload } = event.data;

  if (type === 'konfigra:design-saved') {
    console.log('Design URL:', payload.shareUrl);
  }
});

<form id="cart-form" method="POST" action="/cart/add">
  <input type="hidden" name="product_id" value="5">

  <!-- konfigra writes the design URL here automatically -->
  <input type="hidden" name="konfigra_design_url" id="design-url">
  <input type="hidden" name="konfigra_design_id"  id="design-id">

  <button type="button" id="customize-btn">Customize Product</button>
  <button type="submit" id="cart-btn" disabled>Add to Cart</button>
</form>

<script src="https://{your-store}.konfigra.com/embed/konfigra-embed.js"></script>
<script>
const embed = konfigraEmbed.init({
  mode:      'modal',
  productId: 5,
  on: {
    'konfigra:ready': () => {
      document.querySelector('#customize-btn').disabled = false;
    },
    'konfigra:design-saved': ({ designId, salt, shareUrl }) => {
      document.querySelector('#design-url').value = shareUrl;
      document.querySelector('#design-id').value  = designId;

      embed.close();

      const btn = document.querySelector('#cart-btn');
      btn.disabled    = false;
      btn.textContent = 'Add to Cart ✓';
    }
  }
});

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>konfigra Embed Example</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: sans-serif; margin: 0; background: #f8fafc; }
    .container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
    h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; }
    .toolbar {
      display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
      background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
      padding: 0.75rem 1rem; margin-bottom: 1rem;
    }
    .toolbar label { font-size: 0.875rem; color: #64748b; display: flex; align-items: center; gap: 0.4rem; }
    input[type=color] { width: 32px; height: 32px; border: none; border-radius: 6px; cursor: pointer; }
    .btn {
      padding: 0.45rem 0.9rem; border: none; border-radius: 8px; cursor: pointer;
      font-size: 0.875rem; font-weight: 500; background: #6366f1; color: #fff;
    }
    .btn-outline { background: transparent; border: 1px solid #e2e8f0; color: #64748b; }
    #status { font-size: 0.8rem; color: #94a3b8; margin-left: auto; }
    #widget { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
    #preview { margin-top: 1rem; max-width: 300px; border-radius: 12px; display: none;
               box-shadow: 0 4px 20px rgba(0,0,0,.12); }
  </style>
</head>
<body>
<div class="container">
  <h1>Product Customizer</h1>

  <div class="toolbar">
    <label>
      Body
      <input type="color" id="c-body" value="#3b82f6"
             oninput="embed.setColor('body', this.value)">
    </label>
    <label>
      Sleeve
      <input type="color" id="c-sleeve" value="#1e293b"
             oninput="embed.setColor('sleeve', this.value)">
    </label>
    <button class="btn btn-outline" onclick="embed.resetColors()">Reset</button>
    <button class="btn" onclick="screenshot()">Screenshot</button>
    <span id="status">Loading…</span>
  </div>

  <div id="widget"></div>
  <img id="preview" alt="Design preview">
</div>

<script src="https://{your-store}.konfigra.com/embed/konfigra-embed.js"></script>
<script>
const embed = konfigraEmbed.init({
  container: '#widget',
  productId:  5,
  mode:       'simple',
  height:     '580px',
  on: {
    'konfigra:ready': () => {
      document.querySelector('#status').textContent = 'Ready ✓';
    },
    'konfigra:color-changed': ({ layerId, color }) => {
      const el = document.querySelector('#c-' + layerId);
      if (el) el.value = color;
    },
    'konfigra:design-saved': ({ shareUrl }) => {
      alert('Design saved!\n' + shareUrl);
    }
  }
});

function screenshot() {
  document.querySelector('#status').textContent = 'Capturing…';
  embed.getScreenshot().then(dataUri => {
    const img = document.querySelector('#preview');
    img.src = dataUri;
    img.style.display = 'block';
    document.querySelector('#status').textContent = 'Ready ✓';
  });
}
</script>
</body>
</html>