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:

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",
  },
});