Skip to main content
The SDK player and AssessmentShell are white-labellable. By default the assessment’s org branding (configured in the Edpire dashboard) loads automatically — pass these options only to override it per-deployment.

​
Branding — TakeBranding

Supply via MountOptions.branding (Embedded Player) or the branding prop (AssessmentShell). 
interface TakeBranding {
  /** Org display name — used as the logo's alt text. */
  name: string
  /** Logo URL (any https URL). When null, the Edpire logo is shown. */
  logoUrl: string | null
  branding: {
    /** Color of primary action buttons (Submit, View Report). */
    primaryColor?: string
    /** Background color of the top bar and per-exercise headers. */
    accentColor?: string
    /** font-family applied to the shell. Pair with fontUrl for non-system fonts. */
    fontFamily?: string
    /** A font stylesheet URL (Google Fonts, Adobe Fonts, Bunny Fonts, or self-hosted); the shell injects a <link> at mount. */
    fontUrl?: string
    /** When false, hides the "Powered by Edpire" watermark. Default true. Available on paid plans. */
    showPoweredBy?: boolean
  } | null
}

const branding: TakeBranding = {
  name: "Acme Academy",
  logoUrl: "https://cdn.acme.edu/logo.svg",
  branding: {
    primaryColor: "#e11d48",
    accentColor: "#1e293b",
    fontFamily: "'Inter', sans-serif",
    fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap",
    showPoweredBy: false,
  },
}

EdpireAssessment.mount({ token, container: "#root", branding })
FieldAffects
primaryColorSubmit / View Report buttons
accentColorTop bar + exercise section headers
fontFamily + fontUrlTypography across the shell (fontUrl injects the <link>)
showPoweredByThe “Powered by Edpire” watermark
logoUrlTop-bar logo (falls back to the Edpire mark when null)
For custom fonts, set both fontFamily and fontUrl. fontUrl can be any stylesheet URL (Google Fonts, Adobe Fonts, a self-hosted @font-face sheet) — the shell injects the <link> tag for you at mount.

​
Grading overlay

The branded spinner shown while answers are graded — configured with OverlayConfig. Pass via MountOptions.overlayConfig or the overlayConfig prop. 
type SpinnerTheme = "default" | "dots" | "pulse" | "bars"

interface OverlayConfig {
  /** Backdrop color. Default "rgba(0,0,0,0.55)". */
  bgColor?: string
  /** Spinner/accent color. Default "#6366f1". */
  accentColor?: string
  /** Message under the spinner. Default "Evaluating your answers…". */
  text?: string
  /** Built-in spinner style. */
  spinnerTheme?: SpinnerTheme
  /** Custom animation image (GIF/SVG/PNG) URL — overrides spinnerTheme. */
  animationUrl?: string
}

EdpireAssessment.mount({
  token,
  container: "#root",
  overlayConfig: {
    spinnerTheme: "dots",
    accentColor: "#e11d48",
    text: "Grading your work…",
  },
})
spinnerThemeLook
defaultRotating ring (default)
dotsThree bouncing dots
pulseExpanding pulse rings
barsEqualizer-style bars
When the assessment contains AI-graded (open-response) nodes, the overlay automatically shows a secondary line — “Some answers are being reviewed by AI…” — so learners expect a longer wait.

​
Localization & RTL — ShellLocale

type ShellLocale = "en" | "fr" | "ar"
Set via MountOptions.locale or the locale prop (default "en"). All shell strings (Submit, confirmation dialog, score banners, timer, “Powered by”) are translated — there’s no i18n context to wire up. 
EdpireAssessment.mount({ token, container: "#root", locale: "fr" })
LocaleLanguageDirection
enEnglishLTR
frFrenchLTR
arArabicRTL (applied automatically)
Choosing "ar" automatically switches the whole player to a right-to-left layout — no extra dir configuration needed. (The underlying question runtime has no Arabic strings, so question-level runtime labels fall back to French while the shell chrome is fully Arabic.)