Launch Modes

Launch modes determine how the embedded editor initializes when your users first access it. Choose the mode that best fits your use case and user workflow.

Launch with your account templates, giving users access to your professionally designed templates.
When using account templates, choose how users interact with your templates:

Creates a new template from the selected one. Changes are saved as a new template in your account.

Creates a clone that doesn’t appear in your dashboard. Perfect for temporary edits or user-specific variations.

Directly edit the selected template. Changes are saved to the original template. This is the default mode.

Launch with Templated’s public template gallery, giving users access to hundreds of professionally designed templates.

Launch with the user’s previously rendered designs, giving users access to their previously rendered designs.

Start with a completely blank canvas for custom designs.

Launch directly into editing a specific template or render, bypassing the selection modal entirely.

Launch directly into editing a specific template, bypassing the selection modal entirely.

// Pass the template ID as a parameter to the editor
<embed
  src="https://app.templated.io/editor/${TEMPLATE_ID}?embed=${YOUR_CONFIG_ID}"
  width="100%"
  height="100%"
/>

Create a clone of a specific template:

// Pass the template ID as a parameter to the editor and add the clone parameter as true
<embed
  src="https://app.templated.io/editor/${TEMPLATE_ID}?embed=${YOUR_CONFIG_ID}&clone=true"
  width="100%"
  height="100%"
/>

Allow users to edit an existing render, automatically creating a clone template:

// Pass the render ID as a parameter to the editor
<embed
  src="https://app.templated.io/editor?embed=${YOUR_CONFIG_ID}&render=${RENDER_ID}"
  width="100%"
  height="100%"
/>

Choose launch modes dynamically based on user context:

function generateEmbedUrl(embedId, templateId) {
  const baseUrl = `https://app.templated.io/editor?embed=${embedId}`;

  // Specific use cases
  if (templateId) {
    return `https://app.templated.io/editor/${templateId}?embed=${embedId}`;
  }

  return baseUrl;
}

// Update embed src dynamically
const embedElement = document.querySelector('#template-editor');
embedElement.src = generateEmbedUrl(currentEmbedId, currentTemplateId);

import React, { useMemo } from 'react';

function TemplateEditor({ embedId, templateId }) {
  const embedUrl = useMemo(() => {
    const baseUrl = `https://app.templated.io/editor?embed=${embedId}`;

    if (templateId) {
      return `https://app.templated.io/editor/${templateId}?embed=${embedId}`;
    }

    return baseUrl;
  }, [templateId, embedId]);

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