Implementation Examples

function openTemplateEditor(userId) {
  const metadata = {
    userId: userId,
    timestamp: new Date().toISOString()
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  const modal = document.createElement('div');
  modal.innerHTML = `
    <div class="modal">
      <embed src="${embedUrl}" width="100%" height="700px" />
      <button onclick="this.parentElement.remove()">Close</button>
    </div>
  `;

  document.body.appendChild(modal);
}

app.post('/webhook', (req, res) => {
  const { event, template, metadata } = req.body;

  if (event === 'save') {
    console.log(`Template ${template.id} saved by user ${metadata.userId}`);
  }

  res.status(200).json({ received: true });
});

function openEditorWithCustomData(templateId, userData) {
  const layerData = {
    "user-name": {
      text: userData.name,
      color: "#333333",
      font_size: "24px"
    },
    "user-company": {
      text: userData.company,
      color: "#666666",
      font_size: "18px"
    },
    "profile-image": {
      image_url: userData.profileImage
    },
    "background-shape": {
      fill: userData.brandColor || "#0066CC"
    }
  };

  const encodedLayers = btoa(JSON.stringify(layerData));
  const embedUrl = `https://app.templated.io/editor/${templateId}?embed=YOUR_CONFIG_ID&layers=${encodedLayers}`;

  window.open(embedUrl, '_blank');
}

// Usage example
const userData = {
  id: 'user123',
  name: 'John Smith',
  company: 'Acme Corp',
  profileImage: 'https://example.com/profile.jpg',
  brandColor: '#FF6B35'
};

openEditorWithCustomData('template_abc123', userData);

function editExistingRender(renderId, userId) {
  const metadata = {
    userId: userId,
    renderId: renderId,
    mode: 'edit_render'
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  // Open in modal
  const modal = document.createElement('div');
  modal.className = 'render-editor-modal';
  modal.innerHTML = `
    <div class="modal-backdrop">
      <div class="modal-content">
        <div class="modal-header">
          <h3>Edit Design</h3>
          <button class="close-btn" onclick="this.closest('.render-editor-modal').remove()">×</button>
        </div>
        <iframe src="${embedUrl}" width="100%" height="800px" frameborder="0"></iframe>
      </div>
    </div>
  `;

  document.body.appendChild(modal);
}

// Alternative: Edit render with custom callback
function editRenderWithCallback(renderId, onSave) {
  const metadata = {
    renderId: renderId,
    callback: 'custom',
    onSave: onSave.toString() // Pass callback function
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  return embedUrl;
}

function cloneTemplate(templateId, userId, customizations = {}) {
  const metadata = {
    userId: userId,
    mode: 'clone',
    templateId: templateId,
    customizations: customizations
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor/${templateId}?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  // Open in new tab
  const newWindow = window.open(embedUrl, '_blank');

  // Optional: Listen for completion
  const checkClosed = setInterval(() => {
    if (newWindow.closed) {
      clearInterval(checkClosed);
      console.log('Template clone editor closed');
      // Handle post-clone actions
    }
  }, 1000);
}

// Example with product customization
function customizeProduct(productId, templateId) {
  const customizations = {
    productId: productId,
    allowedElements: ['text', 'image'], // Restrict editing
    hiddenLayers: ['background', 'logo'], // Lock certain layers
    requiredFields: ['customer_name', 'order_number']
  };

  cloneTemplate(templateId, 'customer_123', customizations);
}

// React component example
function TemplateCloneButton({ templateId, onComplete }) {
  const handleClone = () => {
    const metadata = {
      mode: 'clone',
      templateId: templateId,
      returnUrl: window.location.href
    };

    const encodedMetadata = btoa(JSON.stringify(metadata));
    const embedUrl = `https://app.templated.io/editor/${templateId}?embed=${process.env.REACT_APP_EMBED_CONFIG}&metadata=${encodedMetadata}`;

    // Use popup window for better UX
    const popup = window.open(
      embedUrl,
      'template-clone',
      'width=1200,height=800,scrollbars=yes,resizable=yes'
    );

    // Listen for completion message
    const messageHandler = (event) => {
      if (event.origin === 'https://app.templated.io' && event.data.type === 'template_saved') {
        popup.close();
        onComplete(event.data.template);
        window.removeEventListener('message', messageHandler);
      }
    };

    window.addEventListener('message', messageHandler);
  };

  return (
    <button onClick={handleClone} className="clone-template-btn">
      Customize This Design
    </button>
  );
}