Front-end integration

The component is displayed in an iframe served by Wave Up. Your page never sees what is entered: it only receives events, without any health data.

Display the component

<div id="assessment"></div>
<script src="https://embed.waveup-health.fr/v1/sdk.js"></script>
<script>
  const ev = WaveUp.mount('#assessment', {
    clientToken: '…',   // received from your server
    locale: 'en-GB',    // optional: an allowed locale, otherwise the session's
    theme: 'auto',      // 'light', 'dark' or 'auto'
    height: 'auto',     // or a fixed CSS height
    minHeight: 640,     // in auto mode, in px (640 recommended for drawing)
  })
</script>

The SDK is also available as a module: npm install @waveup/sdk, then import { mount } from '@waveup/sdk'.

Token: it never appears in the iframe address. The SDK passes it by message, to the Wave Up domain only.
Environment: the SDK infers it from the token (sandbox or production).

Events

Event	Data	When
`ready`	—	The session is loaded and the component displayed
`step`	`{ step }`	Step change: `cartography`, `questionnaires`, `review`, `done`
`lock`	—	The patient takes the device: hide your navigation
`unlock`	—	The practitioner takes back control
`completed`	`{ sessionId }`	The assessment was sent: retrieve the result server-side
`cancelled`	—	The component page was left while data was being entered
`error`	`{ code, message }`	`session_expired`, `invalid_token`, `already_submitted`, `network`, `unsupported_browser`, `internal`

ev.on('lock', () => document.body.classList.add('patient-mode'))
ev.on('unlock', () => document.body.classList.remove('patient-mode'))
ev.on('error', ({ code }) => code === 'session_expired' && createNewSession())
const stop = ev.on('step', ({ step }) => console.log(step))
stop() // unsubscribe
ev.destroy() // remove the component

Size and full screen

Height: with height: 'auto', the iframe follows its content. Allow at least 640 px so the avatar stays large enough to draw on.
Width: the component adapts to the space you give it. It is designed for a tablet (iPad) or a computer, and remains usable on a phone.
Full screen: the component requests it when the patient starts the questionnaires. Where it does not exist (iPhone), the SDK scrolls the page to the component.
Locking: the component cannot lock your page. During the questionnaires (lock → unlock), do not overlay interactive elements and hide your navigation.

Allowed domains

The iframe only displays on the domains declared for your account (frame-ancestors header). Send us all your domains, including staging ones.

Mobile apps (WebView)

The component works in an iOS (WKWebView) or Android WebView: load a page from your domain that uses the SDK. For sliders and drawing, disable page zoom (<meta name="viewport" content="width=device-width, initial-scale=1">).

Supported browsers

Recent versions of Safari (iPadOS, macOS), Chrome, Edge and Firefox. The component reports an outdated browser through the error event (unsupported_browser).