You can play around with different settings by using the SDK Playground.

Badge Features

There are various features of the badge platform that you can provide access to using the Badge embed.

Permissions

Each feature you use will require different permissions. Ensure you select the correct permissions when creating an SDK Token . All SDK tokens are required to have the following permissions: workspace:read, user:read.

Method	Option	Required Permissions
`embedTemplatePage`		`template:read`
	`templateEditor`	`template:write`
	`passesList`	`template:read`
(COMING SOON)	`campaigns`	`campaign:write` `template:read`

Appearance

Colors

You can configure the primary and neutral colors in the Badge embed. This can be achieved by setting the color attributes on the appearance object.

badge.embedTemplatePage(sdk, element, {
  templateId,
  appearance: {
    primaryColor: "#7A5AF8",
    neutralColor: "#667085",
  },
});

Fonts

The font used within the embed can be changed to match your application. There are two steps to configuring the font. The first is providing details on how to load the font and the second is setting the font family.

There are two options for loading font files, providing a CSS file that has @font-face declarations or providing font files and how they should be treated.

Once font loading is complete, the fontFamily can be set in the appearance object:

badge.embedTemplatePage(sdk, element, {
  templateId,
  fonts: [
    {cssSrc: `https://fonts.googleapis.com/css2?family=Montserrat&display=swap`},
  ],
  appearance: {
    fontFamily: "Montserrat",
  },
});

CSS Font

If you have a CSS file that loads your fonts, such as Google Fonts, you can directly use it for font loading by providing an object with the cssSrc attribute to the font list. See above example for including a font using this mechanism.

Font Files

You can also load multiple font files by providing an object to the font list. This object supports the following format:

Name	CSS `@font-face` Descriptor
`family` (required)	`font-family`
`src` (required)	`src` the value provided will be wrapped in `url(...)`
`weight`	`font-weight`
`style`	`font-style`
`unicodeRange`	`unicode-range`

badge.embedTemplatePage(sdk, element, {
  templateId,
  fonts: [
    {
      family: "Indigo",
      src: "https://example.com/indigo-light.woff2",
      weight: "300"
    },
    {
      family: "Indigo",
      src: "https://example.com/indigo-normal.woff2",
      weight: "500"
    },
  ],
  appearance: {
    fontFamily: "Montserrat",
  },
});