Advanced Features

Take your embedded editor integration to the next level with these advanced features and customization options.

Custom Metadata

Pass custom data through the embed that will be sent to your webhooks, enabling you to track user context and trigger specific workflows.

Encoding Metadata

Metadata must be base64-encoded JSON and passed as a URL parameter:

// Your custom metadata
const metadata = {
  userId: "user-123",
  projectId: "project-456",
  clientId: "client-789",
  workflowType: "marketing_campaign",
  campaignId: "campaign-001"
};

// Encode as base64
const encodedMetadata = btoa(JSON.stringify(metadata));

// Create embed URL with metadata
const embedUrl = `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;

// Update embed element
document.getElementById('editor-embed').src = embedUrl;

import json
import base64

# Your custom metadata
metadata = {
    "userId": "user-123",
    "projectId": "project-456",
    "clientId": "client-789",
    "workflowType": "marketing_campaign",
    "campaignId": "campaign-001"
}

# Encode as base64
encoded_metadata = base64.b64encode(
    json.dumps(metadata).encode('utf-8')
).decode('utf-8')

# Create embed URL
embed_url = f"https://app.templated.io/editor?embed={config_id}&metadata={encoded_metadata}"

<?php
// Your custom metadata
$metadata = [
    'userId' => 'user-123',
    'projectId' => 'project-456',
    'clientId' => 'client-789',
    'workflowType' => 'marketing_campaign',
    'campaignId' => 'campaign-001'
];

// Encode as base64
$encodedMetadata = base64_encode(json_encode($metadata));

// Create embed URL
$embedUrl = "https://app.templated.io/editor?embed={$configId}&metadata={$encodedMetadata}";
?>

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

function TemplateEmbed({ configId, user, project }) {
  const [embedUrl, setEmbedUrl] = useState('');

  useEffect(() => {
    // Your custom metadata
    const metadata = {
      userId: user.id,
      projectId: project.id,
      clientId: user.clientId,
      workflowType: "marketing_campaign",
      campaignId: project.campaignId,
      timestamp: new Date().toISOString()
    };

    // Encode as base64
    const encodedMetadata = btoa(JSON.stringify(metadata));

    // Create embed URL with metadata
    const url = `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;
    setEmbedUrl(url);
  }, [configId, user, project]);

  return (
    <iframe
      src={embedUrl}
      width="100%"
      height="600"
      frameBorder="0"
      title="Template Editor"
    />
  );
}

export default TemplateEmbed;

Dynamic Metadata Generation

Generate metadata dynamically based on user context:

function generateEmbedWithMetadata(user, project) {
  const metadata = {
    userId: user.id,
    userName: user.name,
    userEmail: user.email,
    projectId: project.id,
    projectName: project.name,
    timestamp: new Date().toISOString(),
    source: 'project_dashboard',
    permissions: user.permissions,
    subscription: user.subscription.plan
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));

  return `https://app.templated.io/editor?embed=${EMBED_CONFIG_ID}&metadata=${encodedMetadata}`;
}

// Usage
const embedUrl = generateEmbedWithMetadata(currentUser, currentProject);
document.getElementById('template-editor').src = embedUrl;

Pre-populate Template Data

Launch the editor with custom layer data to pre-populate templates with user-specific content.

Layer Data Structure

const layerData = {
  "text-layer-name": {
    text: "Custom text content",
    color: "#FF0000",
    font_size: "24px"
  },
  "image-layer-name": {
    image_url: "https://example.com/user-photo.jpg"
  },
  "shape-layer-name": {
    fill: "#0066CC",
    stroke: "#003366"
  }
};

// Encode layer data
const encodedLayers = btoa(JSON.stringify(layerData));

Template with Custom Data

<embed
  src="https://app.templated.io/editor/TEMPLATE_ID?embed=CONFIG_ID&layers=ENCODED_LAYER_DATA"
  width="100%"
  height="100%"
/>

Dynamic Layer Population Examples

function createUserProfileTemplate(user) {
  const layers = {
    "user-name": {
      text: user.fullName,
      color: "#333333"
    },
    "user-title": {
      text: user.jobTitle,
      color: "#666666"
    },
    "profile-photo": {
      image_url: user.profilePicture
    },
    "company-logo": {
      image_url: user.company.logo
    },
    "background-color": {
      fill: user.company.brandColor
    }
  };

  const encodedLayers = btoa(JSON.stringify(layers));
  return `https://app.templated.io/editor/${USER_PROFILE_TEMPLATE_ID}?embed=${EMBED_CONFIG_ID}&layers=${encodedLayers}`;
}

function createCampaignTemplate(campaign) {
  const layers = {
    "campaign-title": {
      text: campaign.title,
      color: campaign.theme.primaryColor
    },
    "campaign-description": {
      text: campaign.description,
      font_size: "16px"
    },
    "hero-image": {
      image_url: campaign.heroImage
    },
    "cta-button": {
      text: campaign.ctaText,
      background: campaign.theme.buttonColor
    },
    "brand-logo": {
      image_url: campaign.brand.logo
    }
  };

  const encodedLayers = btoa(JSON.stringify(layers));
  return `https://app.templated.io/editor/${CAMPAIGN_TEMPLATE_ID}?embed=${EMBED_CONFIG_ID}&layers=${encodedLayers}`;
}

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

function DynamicTemplateEditor({
  templateId,
  configId,
  templateType,
  userData,
  campaignData
}) {
  const [embedUrl, setEmbedUrl] = useState('');

  // Generate layers based on template type
  const layerData = useMemo(() => {
    switch (templateType) {
      case 'user-profile':
        return {
          "user-name": {
            text: userData.fullName,
            color: "#333333"
          },
          "user-title": {
            text: userData.jobTitle,
            color: "#666666"
          },
          "profile-photo": {
            image_url: userData.profilePicture
          },
          "company-logo": {
            image_url: userData.company?.logo
          },
          "background-color": {
            fill: userData.company?.brandColor || "#f0f0f0"
          }
        };

      case 'marketing-campaign':
        return {
          "campaign-title": {
            text: campaignData.title,
            color: campaignData.theme?.primaryColor || "#000000"
          },
          "campaign-description": {
            text: campaignData.description,
            font_size: "16px"
          },
          "hero-image": {
            image_url: campaignData.heroImage
          },
          "cta-button": {
            text: campaignData.ctaText,
            background: campaignData.theme?.buttonColor || "#007bff"
          },
          "brand-logo": {
            image_url: campaignData.brand?.logo
          }
        };

      default:
        return {};
    }
  }, [templateType, userData, campaignData]);

  useEffect(() => {
    if (Object.keys(layerData).length > 0) {
      const encodedLayers = btoa(JSON.stringify(layerData));
      const url = `https://app.templated.io/editor/${templateId}?embed=${configId}&layers=${encodedLayers}`;
      setEmbedUrl(url);
    }
  }, [templateId, configId, layerData]);

  return (
    <div className="template-editor-container">
      {embedUrl ? (
        <iframe
          src={embedUrl}
          width="100%"
          height="600"
          frameBorder="0"
          title="Dynamic Template Editor"
        />
      ) : (
        <div>Loading template...</div>
      )}
    </div>
  );
}

export default DynamicTemplateEditor;

Render Editing

Allow users to edit existing renders, automatically creating template clones for safe editing.

Edit Existing Render

<embed
  src="https://app.templated.io/editor?embed=CONFIG_ID&render=RENDER_ID"
  width="100%"
  height="100%"
/>

function editRender(renderId, userId) {
  const metadata = {
    userId: userId,
    action: 'edit_render',
    originalRenderId: renderId,
    editMode: true
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));

  const embedUrl = `https://app.templated.io/editor?embed=${EMBED_CONFIG_ID}&render=${renderId}&metadata=${encodedMetadata}`;

  // Open in modal or new window
  openEditorModal(embedUrl);
}

// Usage in your UI
document.querySelectorAll('.edit-render-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const renderId = e.target.dataset.renderId;
    editRender(renderId, currentUser.id);
  });
});

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

function RenderEditModal({ embedConfigId, onClose }) {
  const [embedUrl, setEmbedUrl] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const editRender = useCallback((renderId, userId) => {
    const metadata = {
      userId: userId,
      action: 'edit_render',
      originalRenderId: renderId,
      editMode: true,
      timestamp: new Date().toISOString()
    };

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

    setEmbedUrl(url);
    setIsModalOpen(true);
  }, [embedConfigId]);

  const closeModal = () => {
    setIsModalOpen(false);
    setEmbedUrl('');
    onClose?.();
  };

  return (
    <>
      {isModalOpen && (
        <div className="modal-overlay" onClick={closeModal}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h3>Edit Render</h3>
              <button onClick={closeModal} className="close-btn">×</button>
            </div>
            <div className="modal-body">
              <iframe
                src={embedUrl}
                width="100%"
                height="600"
                frameBorder="0"
                title="Render Editor"
              />
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function RenderListItem({ render, currentUser, embedConfigId }) {
  const [modal, setModal] = useState(null);

  const handleEditClick = () => {
    setModal(
      <RenderEditModal
        embedConfigId={embedConfigId}
        onClose={() => setModal(null)}
      />
    );

    // Trigger the edit function
    const editModal = React.createRef();
    if (editModal.current) {
      editModal.current.editRender(render.id, currentUser.id);
    }
  };

  return (
    <div className="render-item">
      <img src={render.thumbnail} alt={render.name} />
      <h4>{render.name}</h4>
      <button
        onClick={handleEditClick}
        className="edit-render-btn"
      >
        Edit Render
      </button>
      {modal}
    </div>
  );
}

export { RenderEditModal, RenderListItem };

Template Filtering by Folder

Limit template selection to specific folders:

<!-- Show only templates from specific folder -->
<embed
  src="https://app.templated.io/editor?embed=CONFIG_ID&folder=FOLDER_ID"
  width="100%"
  height="100%"
/>

Editor Event Monitoring

class EditorMonitor {
  constructor(embedElement) {
    this.embed = embedElement;
    this.setupEventListeners();
  }

  setupEventListeners() {
    // Monitor load events
    this.embed.addEventListener('load', () => {
      console.log('Editor loaded successfully');
      this.trackEvent('editor_loaded');
    });

    // Monitor errors
    this.embed.addEventListener('error', (e) => {
      console.error('Editor failed to load:', e);
      this.trackEvent('editor_error', { error: e.message });
      this.showFallback();
    });
  }

  trackEvent(eventName, data = {}) {
    // Send to your analytics
    analytics.track(eventName, {
      ...data,
      timestamp: new Date().toISOString(),
      embedConfigId: this.getConfigId()
    });
  }

  showFallback() {
    // Show fallback UI when editor fails to load
    const fallback = document.createElement('div');
    fallback.className = 'editor-fallback';
    fallback.innerHTML = `
      <div class="fallback-message">
        <h3>Editor temporarily unavailable</h3>
        <p>Please try refreshing the page or contact support.</p>
        <button onclick="location.reload()">Refresh Page</button>
      </div>
    `;

    this.embed.parentNode.replaceChild(fallback, this.embed);
  }

  getConfigId() {
    const url = new URL(this.embed.src);
    return url.searchParams.get('embed');
  }
}

// Usage
const editorEmbed = document.getElementById('template-editor');
const monitor = new EditorMonitor(editorEmbed);

Best Practices for Advanced Features

Security:

Always validate metadata on your server
Sanitize user inputs before encoding
Use HTTPS for all embed URLs

Performance:

Implement lazy loading for multiple editors
Preload resources when appropriate
Monitor and optimize embed load times

User Experience:

Provide loading states and error fallbacks
Implement responsive design
Test across different devices and browsers