In order to use the Badge Embed you will need to have already done an initial setup with the Badge API, depending on your use-case please follow one of these guides:

• Getting Started with the Badge API
• SDK for Platforms

Backend Setup

Before you can embed Badge in your app's UI, you need to obtain an SDK token to authenticate your frontend.

Create an SDK Token

Use the Badge API to create an SDK Token :

POST https://api.trybadge.com/v0/sdkTokens HTTP/1.1
Accept: application/json
Authorization: Bearer API_KEY
Content-Type: application/json

{
  "permissions": ["workspace:read", "user:read", "template:write"]
}

For necessary permissions for each feature see Configuring the Embed

Optionally, a passTemplateId can be passed to limit access to a single pass template, otherwise the token can access all templates in the workspace. If you are managing all templates in a single workspace, we recommend passing this attribute.

HTTP/1.1 200 OK
Content-Type: application/json

{
  "token": "ey23dsqd/12e+1d1ww1d=="
}

The returned sdkToken should be shared to your frontend to be used with the Badge SDK.

Frontend Setup

🚧

Embed in Development

This library is not yet published to NPM. Please contact support to get early access!

Install the SDK: npm install @badge-sdk/web

Add the Embed

The Badge SDK provides an interface for your customers to edit templates and view passes that live in the Badge Platform. To see an example of how this can be integrated into a web app see these mocks.

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

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

const badgeSdk = badge.makeSdk({accountToken: user.badgeToken});

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

badge.embedTemplatePage(badgeSdk, element, {
  templateId: templateId,
  templateEditorEnabled: true,
});

For additional customizations see Configuring the Embed.