Implementation Examples

Here you can find some examples of the most common use cases for integrating the Templated Editor in your application.

JavaScript
React

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);
}

import React, { useState } from 'react';

function TemplateEditorModal({ userId, configId, onClose }) {
  const [isOpen, setIsOpen] = useState(false);

  const embedUrl = React.useMemo(() => {
    if (!userId) return '';

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

    const encodedMetadata = btoa(JSON.stringify(metadata));
    return `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;
  }, [userId, configId]);

  const handleClose = () => {
    setIsOpen(false);
    onClose?.();
  };

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={handleClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <iframe
          src={embedUrl}
          width="100%"
          height="700px"
          frameBorder="0"
          title="Template Editor"
        />
        <button onClick={handleClose} className="close-button">
          Close
        </button>
      </div>
    </div>
  );
}

// Usage component
function EditorLauncher({ userId, configId }) {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShowModal(true)}>
        Open Template Editor
      </button>

      {showModal && (
        <TemplateEditorModal
          userId={userId}
          configId={configId}
          onClose={() => setShowModal(false)}
        />
      )}
    </>
  );
}

export { TemplateEditorModal, EditorLauncher };

Webhook Handler

JavaScript/Node.js
Next.js API Route

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 });
});

// pages/api/webhook.js or app/api/webhook/route.js

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { event, template, metadata } = req.body;

    switch (event) {
      case 'save':
        await handleTemplateSave(template, metadata);
        break;
      case 'render':
        await handleTemplateRender(template, metadata);
        break;
      case 'delete':
        await handleTemplateDelete(template, metadata);
        break;
      default:
        console.log(`Unknown event: ${event}`);
    }

    res.status(200).json({ received: true });
  } catch (error) {
    console.error('Webhook error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

async function handleTemplateSave(template, metadata) {
  console.log(`Template ${template.id} saved by user ${metadata.userId}`);

  // Example: Save to database
  // await db.templates.update({
  //   id: template.id,
  //   userId: metadata.userId,
  //   lastModified: new Date()
  // });

  // Example: Send notification
  // await sendNotification(metadata.userId, 'Template saved successfully');
}

async function handleTemplateRender(template, metadata) {
  console.log(`Template ${template.id} rendered by user ${metadata.userId}`);

  // Example: Track usage analytics
  // await analytics.track('template_rendered', {
  //   templateId: template.id,
  //   userId: metadata.userId,
  //   timestamp: new Date()
  // });
}

async function handleTemplateDelete(template, metadata) {
  console.log(`Template ${template.id} deleted by user ${metadata.userId}`);

  // Example: Clean up resources
  // await cleanupTemplateResources(template.id);
}

Launch Editor with Template and Custom Layer Data

Pre-populate template layers with custom data when the editor loads.

JavaScript
React

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);

import React, { useState, useCallback } from 'react';

function CustomTemplateEditor({ templateId, configId, userData }) {
  const [isEditorOpen, setIsEditorOpen] = useState(false);

  const generateEmbedUrl = useCallback(() => {
    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));
    return `https://app.templated.io/editor/${templateId}?embed=${configId}&layers=${encodedLayers}`;
  }, [templateId, configId, userData]);

  const openEditor = () => {
    const embedUrl = generateEmbedUrl();
    window.open(embedUrl, '_blank', 'width=1200,height=800');
  };

  const openInModal = () => {
    setIsEditorOpen(true);
  };

  return (
    <div className="template-editor-launcher">
      <div className="user-preview">
        <img src={userData.profileImage} alt={userData.name} />
        <div>
          <h3>{userData.name}</h3>
          <p>{userData.company}</p>
        </div>
      </div>

      <div className="action-buttons">
        <button onClick={openEditor} className="btn-primary">
          Open in New Tab
        </button>
        <button onClick={openInModal} className="btn-secondary">
          Open in Modal
        </button>
      </div>

      {/* Modal Implementation */}
      {isEditorOpen && (
        <div className="modal-overlay" onClick={() => setIsEditorOpen(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h3>Customize Template</h3>
              <button
                onClick={() => setIsEditorOpen(false)}
                className="close-btn"
              >
                ×
              </button>
            </div>
            <iframe
              src={generateEmbedUrl()}
              width="100%"
              height="700px"
              frameBorder="0"
              title="Template Editor"
            />
          </div>
        </div>
      )}
    </div>
  );
}

// Usage in your app
function UserDashboard({ user }) {
  const templateConfig = {
    templateId: 'template_abc123',
    configId: process.env.REACT_APP_EMBED_CONFIG_ID
  };

  return (
    <div className="dashboard">
      <h2>Welcome, {user.name}</h2>
      <CustomTemplateEditor
        {...templateConfig}
        userData={user}
      />
    </div>
  );
}

export { CustomTemplateEditor, UserDashboard };

Launch Editor with Render Data

Edit an existing render by loading it into the editor.

JavaScript
React

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;
}

import React, { useState, useCallback } from 'react';

function RenderEditor({ renderId, userId, configId, onSave, onClose }) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  const embedUrl = React.useMemo(() => {
    const metadata = {
      userId: userId,
      renderId: renderId,
      mode: 'edit_render',
      timestamp: new Date().toISOString()
    };

    const encodedMetadata = btoa(JSON.stringify(metadata));
    return `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;
  }, [renderId, userId, configId]);

  const handleIframeLoad = () => {
    setIsLoading(false);
  };

  const handleIframeError = () => {
    setIsLoading(false);
    setError('Failed to load editor');
  };

  return (
    <div className="render-editor-modal">
      <div className="modal-backdrop" onClick={onClose}>
        <div className="modal-content" onClick={(e) => e.stopPropagation()}>
          <div className="modal-header">
            <h3>Edit Design</h3>
            <button onClick={onClose} className="close-btn">
              ×
            </button>
          </div>

          <div className="modal-body">
            {isLoading && (
              <div className="loading-overlay">
                <div className="spinner"></div>
                <p>Loading editor...</p>
              </div>
            )}

            {error && (
              <div className="error-message">
                <p>{error}</p>
                <button onClick={() => window.location.reload()}>
                  Retry
                </button>
              </div>
            )}

            <iframe
              src={embedUrl}
              width="100%"
              height="800px"
              frameBorder="0"
              title="Render Editor"
              onLoad={handleIframeLoad}
              onError={handleIframeError}
              style={{ display: error ? 'none' : 'block' }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

// Render list component with edit functionality
function RenderGallery({ renders, userId, configId }) {
  const [editingRender, setEditingRender] = useState(null);

  const handleEditRender = (render) => {
    setEditingRender(render);
  };

  const handleSaveRender = (updatedRender) => {
    // Handle save logic
    console.log('Render saved:', updatedRender);
    setEditingRender(null);
  };

  const handleCloseEditor = () => {
    setEditingRender(null);
  };

  return (
    <div className="render-gallery">
      <div className="render-grid">
        {renders.map((render) => (
          <div key={render.id} className="render-item">
            <img src={render.thumbnail} alt={render.name} />
            <div className="render-actions">
              <h4>{render.name}</h4>
              <button
                onClick={() => handleEditRender(render)}
                className="edit-btn"
              >
                Edit Design
              </button>
            </div>
          </div>
        ))}
      </div>

      {editingRender && (
        <RenderEditor
          renderId={editingRender.id}
          userId={userId}
          configId={configId}
          onSave={handleSaveRender}
          onClose={handleCloseEditor}
        />
      )}
    </div>
  );
}

// Hook for render editing functionality
function useRenderEditor(configId) {
  const [isEditing, setIsEditing] = useState(false);
  const [currentRender, setCurrentRender] = useState(null);

  const editRender = useCallback((renderId, userId) => {
    setCurrentRender({ id: renderId, userId });
    setIsEditing(true);
  }, []);

  const closeEditor = useCallback(() => {
    setIsEditing(false);
    setCurrentRender(null);
  }, []);

  return {
    isEditing,
    currentRender,
    editRender,
    closeEditor,
    RenderEditorComponent: isEditing && currentRender ? (
      <RenderEditor
        renderId={currentRender.id}
        userId={currentRender.userId}
        configId={configId}
        onClose={closeEditor}
      />
    ) : null
  };
}

export { RenderEditor, RenderGallery, useRenderEditor };

Launch Editor with Template Clone

Create a clone of a template that doesn’t appear in your dashboard.

JavaScript
React

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);
}

// Usage examples
const templateId = 'template_xyz789';
const userId = 'user_456';

// Basic clone
cloneTemplate(templateId, userId);

// Clone with restrictions
cloneTemplate(templateId, userId, {
  allowedElements: ['text'],
  maxTemplates: 5
});

import React, { useState, useEffect, useRef } from 'react';

function TemplateCloneButton({ templateId, configId, userId, onComplete, customizations = {} }) {
  const [isLoading, setIsLoading] = useState(false);
  const popupRef = useRef(null);

  const handleClone = () => {
    setIsLoading(true);

    const metadata = {
      userId: userId,
      mode: 'clone',
      templateId: templateId,
      customizations: customizations,
      returnUrl: window.location.href,
      timestamp: new Date().toISOString()
    };

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

    // Use popup window for better UX
    popupRef.current = 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') {
        popupRef.current.close();
        setIsLoading(false);
        onComplete?.(event.data.template);
        window.removeEventListener('message', messageHandler);
      }
    };

    window.addEventListener('message', messageHandler);

    // Handle popup closed manually
    const checkClosed = setInterval(() => {
      if (popupRef.current?.closed) {
        clearInterval(checkClosed);
        setIsLoading(false);
        window.removeEventListener('message', messageHandler);
      }
    }, 1000);
  };

  return (
    <button
      onClick={handleClone}
      disabled={isLoading}
      className="clone-template-btn"
    >
      {isLoading ? 'Opening Editor...' : 'Customize This Design'}
    </button>
  );
}

// Advanced template clone component with modal support
function TemplateCloneModal({ templateId, configId, userId, isOpen, onClose, onComplete }) {
  const [embedUrl, setEmbedUrl] = useState('');

  useEffect(() => {
    if (isOpen && templateId) {
      const metadata = {
        userId: userId,
        mode: 'clone',
        templateId: templateId,
        modalMode: true,
        timestamp: new Date().toISOString()
      };

      const encodedMetadata = btoa(JSON.stringify(metadata));
      setEmbedUrl(`https://app.templated.io/editor/${templateId}?embed=${configId}&metadata=${encodedMetadata}`);
    }
  }, [isOpen, templateId, configId, userId]);

  if (!isOpen) return null;

  return (
    <div className="template-clone-modal">
      <div className="modal-overlay" onClick={onClose}>
        <div className="modal-content" onClick={(e) => e.stopPropagation()}>
          <div className="modal-header">
            <h3>Clone Template</h3>
            <button onClick={onClose} className="close-btn">×</button>
          </div>
          <div className="modal-body">
            <iframe
              src={embedUrl}
              width="100%"
              height="700px"
              frameBorder="0"
              title="Template Clone Editor"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

// Template gallery with clone functionality
function TemplateGallery({ templates, configId, userId }) {
  const [cloneModal, setCloneModal] = useState({ isOpen: false, templateId: null });

  const handleCloneTemplate = (templateId) => {
    setCloneModal({ isOpen: true, templateId });
  };

  const handleCloneComplete = (newTemplate) => {
    console.log('Template cloned:', newTemplate);
    setCloneModal({ isOpen: false, templateId: null });
    // Refresh template list or show success message
  };

  const handleCloseModal = () => {
    setCloneModal({ isOpen: false, templateId: null });
  };

  return (
    <div className="template-gallery">
      <div className="template-grid">
        {templates.map((template) => (
          <div key={template.id} className="template-card">
            <img src={template.thumbnail} alt={template.name} />
            <div className="template-info">
              <h4>{template.name}</h4>
              <p>{template.description}</p>
              <div className="template-actions">
                <TemplateCloneButton
                  templateId={template.id}
                  configId={configId}
                  userId={userId}
                  onComplete={handleCloneComplete}
                />
                <button
                  onClick={() => handleCloneTemplate(template.id)}
                  className="btn-secondary"
                >
                  Clone in Modal
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <TemplateCloneModal
        templateId={cloneModal.templateId}
        configId={configId}
        userId={userId}
        isOpen={cloneModal.isOpen}
        onClose={handleCloseModal}
        onComplete={handleCloneComplete}
      />
    </div>
  );
}

// Custom hook for template cloning
function useTemplateClone(configId) {
  const [isCloning, setIsCloning] = useState(false);
  const [clonedTemplates, setClonedTemplates] = useState([]);

  const cloneTemplate = (templateId, userId, customizations = {}) => {
    setIsCloning(true);

    return new Promise((resolve, reject) => {
      const metadata = {
        userId,
        mode: 'clone',
        templateId,
        customizations,
        timestamp: new Date().toISOString()
      };

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

      const popup = window.open(embedUrl, 'template-clone', 'width=1200,height=800');

      const messageHandler = (event) => {
        if (event.origin === 'https://app.templated.io' && event.data.type === 'template_saved') {
          popup.close();
          setIsCloning(false);
          setClonedTemplates(prev => [...prev, event.data.template]);
          resolve(event.data.template);
          window.removeEventListener('message', messageHandler);
        }
      };

      window.addEventListener('message', messageHandler);

      const checkClosed = setInterval(() => {
        if (popup.closed) {
          clearInterval(checkClosed);
          setIsCloning(false);
          window.removeEventListener('message', messageHandler);
          reject(new Error('Popup closed by user'));
        }
      }, 1000);
    });
  };

  return {
    isCloning,
    clonedTemplates,
    cloneTemplate
  };
}

export {
  TemplateCloneButton,
  TemplateCloneModal,
  TemplateGallery,
  useTemplateClone
};

Implementation Tips

Start Simple: Begin with a basic modal implementation and gradually add features.

Test Thoroughly: Always test your webhook endpoints and metadata encoding.

Security First: Validate all metadata on your server before processing.

User Experience: Provide clear feedback and loading states for users.

Implementation Examples

Basic Modal Integration

Webhook Handler

Launch Editor with Template and Custom Layer Data

Launch Editor with Render Data

Launch Editor with Template Clone