---
updatedAt: 2026-02-03T18:04:12.000Z
agentTools:
  projectIndex: https://docs.trybadge.com/llms.txt
---

# Embed Template Editor Page

The embedded template editor integrates Badge's template editing interface directly into your application, giving you complete control over the surrounding UI and navigation.

This allows you to seamlessly incorporate template editing into your existing pages and layouts, with granular control over which editing features are available to your users.

## Usage

```html
<div id="badge-template-editor" style="height:100%">Loading...</div>
```

```typescript Selectively Enable Features
import * as badge from '@badge-sdk/web';

const badgeSdk = badge.makeSdk({token: user.badgeSdkToken});

const element = window.document.getElementById("badge-template-editor");

badge.embedTemplateEditorPage(badgeSdk, element, {
  templateId: templateId,
  features: {
    expiry: true,
    ...badge.TEMPLATE_EDITOR_FEATURES_ENABLE_BARCODE,
  },
});
```
```typescript Omit One Feature
import * as badge from '@badge-sdk/web';

const badgeSdk = badge.makeSdk({token: user.badgeSdkToken});

const element = window.document.getElementById("badge-template-editor");

badge.embedTemplateEditorPage(badgeSdk, element, {
  templateId: templateId,
  features: {
    ...badge.TEMPLATE_EDITOR_FEATURES_ALL,
    coverImage: false,
  },
});
```
```typescript Default Features
import * as badge from '@badge-sdk/web';

const badgeSdk = badge.makeSdk({token: user.badgeSdkToken});

const element = window.document.getElementById("badge-template-editor");

// default feature set will be enabled
badge.embedTemplateEditorPage(badgeSdk, element, {
  templateId: templateId,
});
```

<Callout icon="📘" theme="info">
  You can test and experiment with different settings using the [SDK Playground](https://sdk-playground.trybadge.com/).
</Callout>

## Permissions

Ensure you select the correct permissions when creating an SDK Token.

`template:write`, `workspace:read`, and `user:read` are required to use template editor functionality.

## Features

Control which sections of the template editor are available to your users. The `features` parameter gives you granular control over the editing experience.

### Default Behavior

When `features` is omitted, a curated set of [default features](https://docs.trybadge.com/docs/embed-template-editor#available-features) will be used, giving users access to the most commonly used template editing capabilities.

When `features` is provided with at least one property set, all other features will be disabled unless explicitly enabled.

### Available Features

| Feature            | Default |
| :----------------- | :------ |
| `logo`             | ✅       |
| `icon`             | ✅       |
| `heading`          | ✅       |
| `colors`           | ✅       |
| `coverImage`       | ✅       |
| `headerField`      | ✅       |
| `secondaryFields`  | ✅       |
| `barcodeType`      | ❌       |
| `barcodeData`      | ❌       |
| `barcodeText`      | ❌       |
| `description`      | ❌       |
| `backFields`       | ✅       |
| `locationMessages` | ✅       |
| `appLinks`         | ✅       |
| `expiry`           | ❌       |

### Helper Constants

For convenience, the SDK provides pre-configured feature objects:

| name                                      | description                                           |
| :---------------------------------------- | :---------------------------------------------------- |
| `TEMPLATE_EDITOR_FEATURES_DEFAULT`        | Default feature set                                   |
| `TEMPLATE_EDITOR_FEATURES_ALL`            | Enable all available features                         |
| `TEMPLATE_EDITOR_FEATURES_NONE`           | Disable all features                                  |
| `TEMPLATE_EDITOR_FEATURES_ENABLE_BARCODE` | Partial helper to enable all barcode-related features |

<br />

## Appearance

Customize the editor's appearance to match your application's design system. Refer to [Styling the Embed](https://docs.trybadge.com/docs/styling-the-embed) for details on custom fonts and brand colors.

<br />

## Examples

### Custom Navigation

The embedded template editor gives you complete control over the surrounding UI. You can add your own navigation elements like breadcrumbs, headers, or action buttons to provide context and integrate the editor seamlessly into your application's existing layout and workflows.

<Image align="center" border={false} caption="Custom breadcrumbs navigation" src="https://files.readme.io/badaadfa978faf822d75466e2421a4e725e886ed7e352d70d7524e3de00324f9-image.png" width="-2px" />