Skip to content

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

Fully Customized Embed
<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:

Encoding Metadata
// 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;

Dynamic Metadata Generation

Generate metadata dynamically based on user context:

Dynamic Metadata with External ID Example
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

Layer Data Format
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

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

Dynamic Layer Population Examples

User Profile Template
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}`;
}

Render Editing

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

Edit Existing Render

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

Integration Example

Render Edit Integration
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);
});
});

Template Filtering by Folder

Limit template selection to specific folders:

Folder-filtered Templates
<!-- 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

Monitor Editor Events
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