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 src = "https://app.templated.io/editor/TEMPLATE_ID?embed=CONFIG_ID
&metadata=ENCODED_METADATA
Pass custom data through the embed that will be sent to your webhooks, enabling you to track user context and trigger specific workflows.
Metadata must be base64-encoded JSON and passed as a URL parameter:
projectId: "project-456" ,
workflowType: "marketing_campaign" ,
campaignId: "campaign-001"
const encodedMetadata = btoa ( JSON . stringify (metadata));
// Create embed URL with metadata
const embedUrl = `https://app.templated.io/editor?embed=${ configId }&metadata=${ encodedMetadata }` ;
document. getElementById ( 'editor-embed' ).src = embedUrl;
"projectId" : "project-456" ,
"clientId" : "client-789" ,
"workflowType" : "marketing_campaign" ,
"campaignId" : "campaign-001"
encoded_metadata = base64.b64encode(
json.dumps(metadata).encode( 'utf-8' )
embed_url = f "https://app.templated.io/editor?embed= { config_id } &metadata= { encoded_metadata } "
'projectId' => 'project-456' ,
'clientId' => 'client-789' ,
'workflowType' => 'marketing_campaign' ,
'campaignId' => 'campaign-001'
$encodedMetadata = base64_encode ( json_encode ($metadata));
$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 ( '' );
workflowType: "marketing_campaign" ,
campaignId: project.campaignId,
timestamp: new Date (). toISOString ()
const encodedMetadata = btoa ( JSON . stringify (metadata));
// Create embed URL with metadata
const url = `https://app.templated.io/editor?embed=${ configId }&metadata=${ encodedMetadata }` ;
}, [configId, user, project]);
export default TemplateEmbed;
Generate metadata dynamically based on user context:
function generateEmbedWithMetadata ( user , project ) {
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 }` ;
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 text: "Custom text content" ,
image_url: "https://example.com/user-photo.jpg"
const encodedLayers = btoa ( JSON . stringify (layerData));
Template with Custom Data src = "https://app.templated.io/editor/TEMPLATE_ID?embed=CONFIG_ID&layers=ENCODED_LAYER_DATA"
Dynamic Layer Population Examples function createUserProfileTemplate ( user ) {
image_url: user.profilePicture
image_url: user.company.logo
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 ) {
color: campaign.theme.primaryColor
"campaign-description" : {
text: campaign.description,
image_url: campaign.heroImage
background: campaign.theme.buttonColor
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 ({
const [ embedUrl , setEmbedUrl ] = useState ( '' );
// Generate layers based on template type
const layerData = useMemo (() => {
image_url: userData.profilePicture
image_url: userData.company?.logo
fill: userData.company?.brandColor || "#f0f0f0"
case 'marketing-campaign' :
text: campaignData.title,
color: campaignData.theme?.primaryColor || "#000000"
"campaign-description" : {
text: campaignData.description,
image_url: campaignData.heroImage
text: campaignData.ctaText,
background: campaignData.theme?.buttonColor || "#007bff"
image_url: campaignData.brand?.logo
}, [templateType, userData, campaignData]);
if (Object. keys (layerData). length > 0 ) {
const encodedLayers = btoa ( JSON . stringify (layerData));
const url = `https://app.templated.io/editor/${ templateId }?embed=${ configId }&layers=${ encodedLayers }` ;
}, [templateId, configId, layerData]);
< div className = "template-editor-container" >
title = "Dynamic Template Editor"
< div >Loading template...</ div >
export default DynamicTemplateEditor;
Render Editing Allow users to edit existing renders, automatically creating template clones for safe editing.
Edit Existing Render src = "https://app.templated.io/editor?embed=CONFIG_ID&render=RENDER_ID"
Integration Example function editRender ( renderId , userId ) {
originalRenderId: renderId,
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);
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 ) => {
originalRenderId: renderId,
timestamp: new Date (). toISOString ()
const encodedMetadata = btoa ( JSON . stringify (metadata));
const url = `https://app.templated.io/editor?embed=${ embedConfigId }&render=${ renderId }&metadata=${ encodedMetadata }` ;
const closeModal = () => {
< div className = "modal-overlay" onClick = {closeModal}>
< div className = "modal-content" onClick = {( e ) => e. stopPropagation ()}>
< div className = "modal-header" >
< button onClick = {closeModal} className = "close-btn" >×</ button >
< div className = "modal-body" >
function RenderListItem ({ render , currentUser , embedConfigId }) {
const [ modal , setModal ] = useState ( null );
const handleEditClick = () => {
embedConfigId = {embedConfigId}
onClose = {() => setModal ( null )}
// Trigger the edit function
const editModal = React. createRef ();
editModal.current. editRender (render.id, currentUser.id);
< div className = "render-item" >
< img src = {render.thumbnail} alt = {render.name} />
onClick = {handleEditClick}
className = "edit-render-btn"
export { RenderEditModal, RenderListItem };
Template Filtering by Folder Limit template selection to specific folders:
<!-- Show only templates from specific folder -->
src = "https://app.templated.io/editor?embed=CONFIG_ID&folder=FOLDER_ID"
Editor Event Monitoring constructor ( embedElement ) {
this .embed = embedElement;
this . setupEventListeners ();
this .embed. addEventListener ( 'load' , () => {
console. log ( 'Editor loaded successfully' );
this . trackEvent ( 'editor_loaded' );
this .embed. addEventListener ( 'error' , ( e ) => {
console. error ( 'Editor failed to load:' , e);
this . trackEvent ( 'editor_error' , { error: e.message });
trackEvent ( eventName , data = {}) {
// Send to your analytics
analytics. track (eventName, {
timestamp: new Date (). toISOString (),
embedConfigId: this . getConfigId ()
// Show fallback UI when editor fails to load
const fallback = document. createElement ( 'div' );
fallback.className = 'editor-fallback' ;
<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>
this .embed.parentNode. replaceChild (fallback, this .embed);
const url = new URL ( this .embed.src);
return url.searchParams. get ( 'embed' );
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