Embed Template Page

The embedded template details page delivers Badge's complete template management interface in a single embed. With built-in navigation and access to all template related features including passes, campaigns, and the template editor. This is ideal when you want a full-featured Badge experience without building custom navigation or managing multiple embeds.

Usage

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

import * as badge from '@badge-sdk/web';

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

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

badge.embedTemplatePage(badgeSdk, element, {
  templateId: templateId,
  features: {
    templateEditor: true,
    passList: true,
    campaigns: true,
    campaignEditor: true,
  }
});

📘
You can test and experiment with different settings using the SDK Playground.

Features

Permissions

Each feature you use will require different permissions. Ensure you select the correct permissions when creating an SDK Token .

Option	Additional Permissions
Base Permissions	`workspace:read`, `user:read`, `template:read`
`features.templateEditor`	`template:write`
`features.passList`	`pass:read`
`features.campaigns`	`campaign:read`
`features.campaignEditor`	`campaign:write`

🥇
For more granular control over template editor features, use the Embed Template Editor Page instead.

Appearance

Customize the editor's appearance to match your application's design system. Refer to Styling the Embed for details on custom fonts and brand colors.