Branding, Theming & Localization

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 })

Field	Affects
`primaryColor`	Submit / View Report buttons
`accentColor`	Top bar + exercise section headers
`fontFamily` + `fontUrl`	Typography across the shell (`fontUrl` injects the `<link>`)
`showPoweredBy`	The “Powered by Edpire” watermark
`logoUrl`	Top-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…",
  },
})

`spinnerTheme`	Look
`default`	Rotating ring (default)
`dots`	Three bouncing dots
`pulse`	Expanding pulse rings
`bars`	Equalizer-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.

Layout — `ShellLayout`

Branding reaches colour and type. It does not reach geometry, which is what ShellLayout is for.

interface ShellLayout {
  /** Any CSS length, or "none" to fill the container. Default "48rem" (768px). */
  maxWidth?: string
}

The player fills the container you size, but inside it the questions sit in a centred column capped at 768px. That is a reading measure and it is right when the player owns the page. It is wrong when you embed the player inside your own chrome, where it becomes a column inside a column:

EdpireAssessment.mount({ token, container: "#root", layout: { maxWidth: "none" } })

Full rationale and the annex caveat: The column inside the box.

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

Locale	Language	Direction
`en`	English	LTR
`fr`	French	LTR
`ar`	Arabic	RTL (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.)

​Branding — TakeBranding

​Grading overlay

​Layout — ShellLayout

​Localization & RTL — ShellLocale

Branding — `TakeBranding`

Grading overlay

Layout — `ShellLayout`

Localization & RTL — `ShellLocale`