Customising the Interface
Reference for Relay Web appearance: which branding options exist, valid values, and how configuration is delivered to the widget. No appearance keys are set in the SDK; everything is managed server-side per partner.
Delivery model
Branding for your partner environment is stored and managed on Fruga’s side. When an end user opens the widget, the current configuration is sent to the client as part of the normal load path and applied at render time.
- You do not pass colours, theme defaults, or launcher options through
init()or other SDK methods for production branding. - You do integrate the SDK with your
partnerKey(and assertion flow) as described in Installation; appearance follows the active partner configuration automatically.
We do not publish a raw configuration schema to integrators: the contract you rely on is the behaviour and the options below. Internal field names may evolve; Fruga keeps published behaviour aligned with these docs.
Configurable options
Accent colour
| Purpose | Primary brand colour for emphasis: headers, selected filters, active bottom navigation, cashback and similar highlights, and primary interactive styling. |
| Format | CSS hex colour (for example #2648C9). |
| Scope | Applies across light and dark theme variants; surrounding surfaces and text colours adapt so the accent remains the single branded anchor. |
Text on accent (light and dark)
| Purpose | Colour for text and icons drawn on top of accent-coloured surfaces (header, launcher, and other accent fills). Separate values allow you to keep contrast correct when the same accent is used against light versus dark chrome. |
| Format | CSS hex colour for each theme context Fruga exposes in your admin (typically labelled for light and dark theme). |
| Scope | Does not replace body copy colour on neutral backgrounds; it targets on-accent content only. |
Theme
| Option | Description |
|---|---|
| Default theme | light or dark: which theme the widget uses on first open for a session. |
| User theme control | When enabled, the widget shows the theme toggle in the header so the end user can switch between light and dark. When disabled, the widget stays on the default theme (no toggle). |
Launcher
| Option | Description |
|---|---|
| Visibility | Whether the launcher control is shown for integrations that use it. |
| Label | Short copy on the launcher pill (for example a savings or rewards line). |
| Icon | Optional icon from the supported set, or none for label-only. |
Supported launcher icons: none, gift, sparkles, credit, arrow.
Launcher styling uses the same accent and text on accent rules as inside the widget so the entry point matches the in-app experience.
Relationship to the Web SDK
The SDK’s job is lifecycle and mounting (partnerKey, container, autoMount, callbacks, and so on). Appearance is not duplicated in client initialisation: if legacy examples elsewhere mentioned theme or colour in init(), ignore them for branding; your source of truth is partner configuration on Fruga’s side.
If you need a branding change, update settings with Fruga or through your provided admin tools, then verify in sandbox. No frontend release is required for colour or launcher-only updates.