Passing Data to the Embedded Editor

Pre-populate the embedded editor with dynamic content using URL parameters.

Passing Layer Data

Use the layers parameter with base64-encoded JSON:

Step 1: Create your layer data

const layerData = {
  "title": { "text": "Welcome, John!" },
  "subtitle": { "text": "Your personalized design" },
  "logo": { "image_url": "https://example.com/user-logo.png" }
};

Step 2: Encode as base64

const encodedLayers = btoa(JSON.stringify(layerData));

Step 3: Add to embed URL

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

Passing Metadata

Send custom data to your webhooks using metadata:

const metadata = {
  userId: "user-123",
  orderId: "order-456",
  source: "checkout-page"
};

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

<embed 
  src="https://app.templated.io/editor/TEMPLATE_ID?embed=CONFIG_ID&metadata={{encodedMetadata}}" 
  ...
/>

This metadata is included in webhook payloads when users save or download.

Python Example

import json
import base64

layer_data = {
    "title": {"text": "Hello"},
    "image": {"image_url": "https://example.com/photo.jpg"}
}

encoded = base64.b64encode(
    json.dumps(layer_data).encode('utf-8')
).decode('utf-8')

embed_url = f"https://app.templated.io/editor/TEMPLATE_ID?embed=CONFIG_ID&layers={encoded}"

Common Use Cases

• Personalization — Pre-fill user name, company logo
• Product customization — Load product images
• Order tracking — Pass order IDs in metadata
• A/B testing — Track which variant users see

See: https://templated.io/docs/embed/url-parameters/

Updated on: 11/01/2026