# Embed Configuration

Configure your embedded editor settings to match your brand and control user permissions. Access these settings in your Templated dashboard under [Embed Setup](https://app.templated.io/embed).

## Basic Configuration

### Domain Settings

Control which domains are allowed to embed the editor.

<img src="/images/docs/embed-config-domain.png" alt="Domain Settings configuration" style="max-width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; margin: 1rem 0;" />

<div class="">
  <span class="font-mono font-bold">Domain</span> \
  The domain where your embed will be displayed. Must include protocol (https:// or http://).

  <span class="font-mono font-bold">Allow Development Environment</span> `boolean`\
  Enable this to test the embed on localhost or local development environments.
</div>

```html title="Example Domain Configuration"
https://yourdomain.com
```

:::tip[Development Mode]
Enable "Allow development environment" to test your embed on `localhost` during development. This setting doesn't affect your production domain.
:::

### Branding

Customize the look and feel of the editor with your branding.

<img src="/images/docs/embed-config-appearance.png" alt="Appearance and branding configuration" style="max-width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; margin: 1rem 0;" />

<div class="">
  <span class="font-mono font-bold">Logo URL</span>\
  Your company logo displayed in the top-left corner. Ideal size: 100x100px. Supports PNG, JPG, and GIF.

  <span class="font-mono font-bold">Logo Link</span>\
  Optional URL where users are redirected when clicking your logo. Must start with https:// or http://.

  <span class="font-mono font-bold">Accent Color</span>\
  Hex color code for buttons, links, and interface elements. Default: #1677ff.

  <span class="font-mono font-bold">Custom Loader</span>\
  Custom loading animation while the editor loads. Ideal size: 128x128px. Supports GIF animations. Default: Templated's default loader.

</div>

```html title="Example Branding Setup"
Logo URL: https://yourdomain.com/logo.png
Logo Link: https://yourdomain.com/dashboard
Accent Color: #FF6B35
```

## User Permissions

Control what actions users can perform in the embedded editor.

<img src="/images/docs/embed-config-permissions.png" alt="User permissions configuration" style="max-width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; margin: 1rem 0;" />

### Basic Actions

<div class="">
  <span class="font-mono font-bold">Allow Rename</span>\
  Let users change template names. Default: true.

  <span class="font-mono font-bold">Allow Save</span>\
  Enable the save button for users. Default: true.

  <span class="font-mono font-bold">Allow Resize</span>\
  Allow users to resize templates. Default: false.
</div>

### Download Options

<div class="">
  <span class="font-mono font-bold">Allow Download</span>\
  Enable download functionality. Default: true.

  <span class="font-mono font-bold">Download Formats</span>\
  Available formats when download is enabled. Options: JPG, PNG, PDF, MP4.
</div>

### Layer Permissions

<div class="">
  <span class="font-mono font-bold">Allow Layer Move</span>\
  Let users move layers around the canvas. Default: false.

  <span class="font-mono font-bold">Allow Layer Resize</span>\
  Enable resizing of individual layers. Default: false.

  <span class="font-mono font-bold">Allow Layer Select</span>\
  Allow selecting layers. Default: false.

  <span class="font-mono font-bold">Allow Layer Unlock</span>\
  Allow users to unlock locked layers. Default: false.

  <span class="font-mono font-bold">Allow Layer Rename</span>\
  Enable renaming of layers. Default: false.

  <span class="font-mono font-bold">Allow Text Edition</span>\
  Allow double-click text editing. Default: false.
</div>

### Template Management

<div class="">
  <span class="font-mono font-bold">Allow Create Template</span>\
  Enable creating new templates from the editor. Default: true.
</div>

## Launch Modes
[Launch Modes](/docs/embed/webhooks/)

## Testing Your Configuration
1. **Enable development mode** to test on localhost
  
  2. **Copy your embed code** from the dashboard

  3. **Test all permissions** you've configured

  4. **Verify webhook delivery** if configured

  5. **Check branding appearance** matches your design