Appearance (theming)

The embedded screens take your brand from four settings. Layout, spacing and screens never change: what users learn in one product works in every other.

Nexafon.init({
  publishableKey: 'pk_live_…',
  getUserToken,
  appearance: {
    primaryColor: '#16A34A',
    radius: 10,
    font: 'inter',
    colorMode: 'auto',
  },
})

Setting	Values	Default
primaryColor	A hex colour, #RGB or #RRGGBB	Nexafon blue
radius	Corner radius in px, 0 to 24 (rounded, clamped)	The kit’s radius
font	'ibm_plex_sans', 'inter' or 'system' (your visitors’ system font)	'ibm_plex_sans'
colorMode	'light', 'dark' or 'auto' (follows the device)	'auto'

One colour, readable everywhere

From primaryColor Nexafon derives the whole primary family (buttons, hover and pressed states, subtle backgrounds, focus rings, links) for light and dark mode, and the text colour on each, so text stays readable at WCAG AA contrast whatever colour you pass.

Changing it at runtime

// For example when your own app switches to dark mode.
Nexafon.setAppearance({ colorMode: 'dark' })

Settings you leave out keep their current value. Invalid values (a misspelled font, radius: 'big') are ignored rather than breaking the embed.

Partners

A partner’s default appearance, set by Nexafon for the partner, applies to all of its stores’ embeds. Settings passed to init or setAppearance win over it field by field.

Language and direction

locale: 'en' | 'so' | 'ar' sets the language of the embedded screens. Arabic renders right to left; phone numbers, codes and amounts stay left to right inside it.