Customization

Each option below works with the script embed as an HTML attribute and with the JS API as a property, unless noted otherwise. Each example shows both versions; use only the one that matches your integration.

The examples on this page use await; run them inside an async function or a <script type="module">.

Language

<script … app-language="de"></script>

const xundApp = await XUND.scic.init({ …, appLanguage: 'de' })

Accepted values: en, de, de-formal, hu, it, it-formal, nl, nl-formal, fr, fr-formal, pt, pt-formal. When a language is set, the language selector in the side menu is hidden. Content is fully finalized in en, de, and de-formal; other languages are accepted, but confirm coverage with XUND before relying on them.

Profile data

Prefill the patient's date of birth and gender, so the app does not ask for them:

<script … birth="2000-12-31" gender="female"></script>

const xundApp = await XUND.scic.init({
  …,
  customization: { birth: '2000-12-31', gender: 'female' },
})

Start with a check

Skip the choice between symptom check and illness check:

<script … direct-check="ILLNESS_CHECK"></script>

const xundApp = await XUND.scic.init({ …, customization: { directCheck: 'ILLNESS_CHECK' } })

Values: SYMPTOM_CHECK or ILLNESS_CHECK.

Start with a symptom

Start a symptom check directly with a given main symptom. The id is a symptom id (UUID) from the Content Library:

<script … direct-check-main-symptom-id="YOUR-SYMPTOM-ID"></script>

const xundApp = await XUND.scic.init({ …, customization: { directCheckMainSymptomId: 'YOUR-SYMPTOM-ID' } })

This also starts a symptom check, so direct-check is not needed.

Onboarding

Show an onboarding page before the check starts:

<script … onboarding="true"></script>

const xundApp = await XUND.scic.init({ …, customization: { onboarding: true } })

Compact mode

Hide the logo and the side-menu button in the app's header, for example when your page already has its own header:

<script … compact-mode="true"></script>

const xundApp = await XUND.scic.init({ …, customization: { compactMode: true } })

Colours

Colour scheme

<script … color-scheme="dark"></script>

const xundApp = await XUND.scic.init({ …, customization: { colorScheme: 'auto' } })
xundApp.setColorScheme('dark')

Values: light (default), dark, or auto (follows the device setting). With the JS API, setColorScheme() switches the scheme while the app runs — see Dark mode.

Your own colours

With the JS API, customization.colors overrides the app's colours, separately for the light and the dark scheme:

const xundApp = await XUND.scic.init({
  …,
  customization: {
    colors: {
      light: { primary: '#0b5fff', background: '#ffffff' },
      dark: { primary: '#7aa7ff', background: '#101418' },
    },
  },
})

Each key is a colour name, each value a CSS colour. Setting a colour also adjusts the colours derived from it. Unknown names and invalid colours are ignored, with a warning or error in the browser console. The script embed does not support colors. For the accepted values, the console messages and how the colours that XUND set up for your app work with these colours, see Colours. For what each key paints, see Colour keys.