Advanced Features

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

URL Parameters for Customization

The embedded editor supports numerous URL parameters to customize behavior and appearance. These parameters can be added to your embed URL to control the editor’s functionality.

Basic Configuration

embed string (required)
Your embed configuration ID from the dashboard.

preview boolean
Launch in preview mode (canvas-only). Default: false.

zoom number
Initial zoom level (10-100). 50 equals 100% scale. Auto-calculated if not set.

clone boolean
Create a clone instead of editing the original template. Default: false.

copy boolean
Alternative to clone parameter. Default: false.

Permission Controls

allow-rename boolean
Allow users to rename templates. Default: true.

allow-save boolean
Enable the save functionality. Default: true.

allow-download boolean
Enable template download. Default: true.

allow-resize boolean
Allow users to resize the template dimensions. Default: false.

allow-create-template boolean
Enable creating new templates from the editor. Default: true.

Layer Controls

allow-layer-move boolean
Allow moving layers around the canvas. Default: false.

allow-layer-resize boolean
Enable resizing of individual layers. Default: false.

allow-layer-select boolean
Allow selecting layers. Default: false.

allow-layer-unlock boolean
Allow users to unlock locked layers. Default: false.

allow-layer-rename boolean
Enable renaming of layers. Default: false.

allow-text-edition boolean
Allow double-click text editing. Default: false.

UI Customization

hide-sidebar boolean
Hide the left sidebar panel. Default: false.

hide-header boolean
Hide the top header bar. Default: false.

hide-layers-panel boolean
Hide the layers panel. Default: false.

hide-language-toggle boolean
Hide the language switcher. Default: false.

Data and Content

metadata string
Base64-encoded JSON with custom metadata for webhooks.

layers string
Base64-encoded JSON with initial layer data.

folder string
Limit template selection to a specific folder ID.

image-url string
URL of an image to load as background or layer.

w number
Custom template width in pixels.

h number
Custom template height in pixels.

Integration Options

webhook-url string
Override the default webhook URL for this session.

external-id string
Session identifier that tags all created content (templates, uploads, fonts, renders) and enables persistent sessions.

move-to-folder string
Automatically move saved templates to this folder ID.

load-uploads boolean
Load user uploads in the assets panel. Default: false.

launch-mode string
Control how the editor launches. Options: ‘account’, ‘gallery’, ‘blank’.

Example URL with Multiple Parameters

<embed
  src="https://app.templated.io/editor/TEMPLATE_ID?embed=CONFIG_ID
       &preview=true
       &zoom=75
       &allow-layer-move=true
       &allow-layer-resize=true
       &allow-text-edition=true
       &hide-sidebar=true
       &clone=true
       &metadata=ENCODED_METADATA
       &layers=ENCODED_LAYERS"
  width="100%"
  height="100%"
/>

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

  // Use external ID to maintain session continuity
  const externalId = `user-${user.id}-project-${project.id}`;

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

// 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