> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.templated.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Embedded Editor Troubleshooting

Solutions to the most common problems with the Templated embedded editor (white-label editor in your website or app).

## "Access Denied: The embed version of the Templated Editor is not authorized for this domain"

This means the website that shows the editor is not in your list of allowed domains.

How to fix:

1. Go to the Embedded Editor page in the dashboard: https://app.templated.io/embed
2. Open **Domain Settings** and add the domain of the page where the editor appears, then save.
3. Reload your page.

Rules:

- Type only the domain, for example `myapp.com`. You can type it with or without `https://`. Do not add a path like `/editor`.
- A domain also covers its subdomains. Adding `myapp.com` allows `www.myapp.com` and `app.myapp.com`.
- You can add several domains (for example your production site and your staging site).
- The domain that counts is the domain of the page that contains the editor (the address in the browser bar), not the domain of your API or backend.

### Lovable, Replit, Bubble, Webflow and other builders

Builders often show your app on a different domain in preview than when it is published. Add every domain where your users (or you, while testing) open the page:

- Add the exact domain shown in the browser bar, for example `my-app.lovable.app` or `my-app.replit.app`.
- The preview inside the builder usually runs on another domain (for example a `lovable.dev`, `lovableproject.com` or `replit.dev` address). Add that domain too if you test inside the builder.
- If it still fails, open the preview in a new tab, copy the domain from the browser bar and add it.

### Localhost and local files

To test on `localhost`, `127.0.0.1` or a local HTML file, turn on **Allow Development Environment** in Domain Settings. You do not need to add localhost as a domain.

### The domain is correct but I still see Access Denied

- Make sure you saved the embed settings after adding the domain.
- Check that you use the right embed ID in the URL (`?embed=...`) if you have more than one embed configuration.
- The editor checks the domain using the page address your browser sends (the "referrer"). If your site sets a strict `Referrer-Policy: no-referrer` header, the editor cannot see your domain. Use the default policy or `strict-origin-when-cross-origin`.
- If none of this helps, send us in the chat your account email, the embed ID and the full address of the page where the editor appears.

## "Embed access required" or a red bar "This is an integration preview"

The embedded editor for production use requires the **Scale** or **Enterprise** plan. On the Free trial and on the Starter plan, the editor works for testing but shows a red bar at the top ("This is an integration preview of our Embedded Editor...") and, after a few seconds, a full-screen "Embed access required" message.

To remove it, upgrade to Scale or Enterprise: https://app.templated.io/upgrade. The message disappears right after the upgrade (reload the page).

## The editor does not work well on phones

The full embedded editor is designed for desktop and tablet screens. It is not optimized for small phone screens yet.

Options for mobile users:

- **Form Mode**: a canvas plus a simple form where users fill in texts, images and colors. On screens narrower than 1024 px the form moves below the canvas. URL: `https://app.templated.io/editor/form/TEMPLATE_ID?embed=EMBED_ID`. Docs: https://templated.io/docs/embed/form-mode/
- **Preview Mode**: only the canvas, no editor interface. You control it from your own app with messages. Docs: https://templated.io/docs/embed/preview-mode/ (demo: https://templated.io/test-preview.html)
- For downloads inside mobile apps and webviews, add `&preview-on-download=true` so users can press and hold the image to save it.

The editor runs inside an iframe, so you cannot restyle its interface with your own CSS. Use the branding options (logo, colors, loader) on the Embedded Editor page and the URL parameters to show or hide parts of the interface.

## The video does not play in the embedded editor

- Add `&allow-video=true` to the embed URL. Without it, the embedded editor does not show the video timeline and play controls.
- Preview Mode shows only the canvas and does not play videos.
- To get the final video, the user downloads as MP4 (the format must be allowed in your embed configuration).

## Fonts look different from my design

- Custom fonts must be uploaded to your Templated account (select a text layer, click the font name in the toolbar and use the upload option in the fonts panel). Fonts that are only installed on your computer are not used by the editor or the renderer.
- If you use `external-id`, fonts uploaded by a user in the embedded editor are linked to that external ID and are available in their next sessions.
- If a text uses characters the font does not have (for example Arabic, Hindi or Chinese), use a font that supports that script.

## Multi-page templates download as a ZIP file

This is expected. When a template has more than one page:

- **JPG or PNG**: each page becomes an image and all images are delivered in one ZIP file.
- **PDF**: all pages are merged into one PDF file.

To download a single image, open the page selector in the Download panel and choose **Current page** (or select only the pages you need).

Each page counts as one render and uses one credit.

## How do I download a PNG with a transparent background?

1. Click **Download** and select **PNG**.
2. Tick **Transparent Background**.
3. Download.

The checkbox only appears for PNG. JPG does not support transparency. If you do not see PNG in the list, enable it in **Allowed download formats** on the Embedded Editor page of the dashboard.

## The Download button is missing or download is stuck

- If there is no Download button, turn on **Allow Download** on the Embedded Editor page of the dashboard and choose the allowed formats.
- If the download keeps showing "Downloading" or fails, check your credits. Downloads in the embedded editor use the credits of your Templated account. When credits run out, downloads stop until the next reset or an upgrade.

## Save or create events do not arrive

- Webhook: make sure your webhook URL is public (not localhost) and answers with HTTP 200 quickly.
- Frontend events: the `create`, `save` and `download` messages arrive as a JSON string. Use `JSON.parse(event.data)` when `event.data` is a string. See "Embedded Editor Events".
- Test in an incognito window. If you are logged in to Templated in the same browser, the editor may behave like your own dashboard editor and skip the embed save events.

## My URL parameters are ignored

- The first parameter starts with `?` and all others with `&`.
- Make sure the final URL uses `&` and not `&amp;`.
- Remove braces and placeholder words: `editor/{TEMPLATE_ID}` must become `editor/8f2c1a7e-...`.
- Some options, like Allow Download, Allow Save, Allow Rename and Allow Resize, are controlled on the Embedded Editor page of the dashboard. See "Embedded Editor URL Recipes".

## FAQ

Q: Why does my embedded editor say Access Denied?
A: The page's domain is not in Allowed Domains. Add it on the Embedded Editor page (https://app.templated.io/embed) and save.

Q: How do I test on localhost?
A: Turn on Allow Development Environment in Domain Settings.

Q: My app is on Lovable (or Replit). What domain do I add?
A: Add the domain shown in the browser bar where the editor appears, for example `my-app.lovable.app`. Add the preview domain too if you test inside the builder.

Q: Which plan do I need for the embedded editor?
A: Scale or Enterprise. Free and Starter can test it with a preview message.

Q: How do I remove the "Embed access required" message?
A: Upgrade to Scale or Enterprise at https://app.templated.io/upgrade.

Q: Does the embedded editor work on mobile?
A: The full editor is not optimized for phones yet. Use Form Mode or Preview Mode for mobile users.

Q: Why did I get a ZIP instead of an image?
A: The template has several pages. Choose Current page in the Download panel to get one image, or download as PDF to get one file.

Q: How do I get a transparent PNG?
A: Choose PNG in the Download panel and tick Transparent Background.

Q: Can I change the editor's look with my own CSS?
A: No. Use the logo, colors and loader settings on the Embedded Editor page, and URL parameters to hide parts of the interface.