> ## Documentation Index
> Fetch the complete documentation index at: https://docs.edpire.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding, Theming & Localization

> Customise the player's logo, colors, fonts, grading overlay, and language.

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](/developer/sdk/embedded-player)) or the `branding` prop ([`AssessmentShell`](/developer/sdk/react-components#assessmentshell)).

```typescript theme={null}
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
}
```

```typescript theme={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`)     |

<Tip>
  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.
</Tip>

## Grading overlay

The branded spinner shown while answers are graded — configured with `OverlayConfig`. Pass via `MountOptions.overlayConfig` or the `overlayConfig` prop.

```typescript theme={null}
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
}
```

```typescript theme={null}
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    |

<Note>
  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.
</Note>

## Localization & RTL — `ShellLocale`

```typescript theme={null}
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.

```typescript theme={null}
EdpireAssessment.mount({ token, container: "#root", locale: "fr" })
```

| Locale | Language | Direction                       |
| ------ | -------- | ------------------------------- |
| `en`   | English  | LTR                             |
| `fr`   | French   | LTR                             |
| `ar`   | Arabic   | **RTL (applied automatically)** |

<Info>
  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.)
</Info>