Developer docs

Recorder

The candidate-facing JavaScript library that captures a video moment, uploads it, and returns a UUID.

The recorder is loaded as a single JavaScript file from app.flipbase.com. It mounts into a div on your page, manages camera permission, renders a viewfinder, captures a take, and uploads the result to Flipbase storage.

Embed

html

<style="color:#f0a4c0">script src=style="color:#fbeef3">"https:style="color:#9a96a6">//app.flipbase.com/recorder/recorderv2/recorder.js"></style="color:#f0a4c0">script>

<style="color:#f0a4c0">div id=style="color:#fbeef3">"recorder"></style="color:#f0a4c0">div>

<style="color:#f0a4c0">script>
  FlipbaseV2.recorder({
    selector: style="color:#fbeef3">'recorder',
    recorderId: style="color:#fbeef3">'YOUR_RECORDER_ID',
  });
</style="color:#f0a4c0">script>

What candidates see

Final step · Record your answer

Tell us in sixty seconds, why this role?

Senior brand designer · Acme Studio· You'll preview before sending.

Camera ready

0:00 / 1:00

Common parameters

Parameter	Default	What it does
recorderId	(required)	UUID provided by Flipbase, scoped to your organization
selector	(required)	id of the div to mount the recorder into
duration	30	max recording length, in seconds
maxTakes	0	max number of takes the candidate can record. 0 = unlimited
allowUploadMethod	true	show 'upload a video' as a fallback to webcam recording
locale	nl-NL	candidate-facing UI language. See Browser support for the full list
primaryColor	(none)	hex; tints the record button and other primary elements
secondaryColor	(none)	hex; tints secondary buttons
backgroundColor	(none)	hex; widget background
textColor	(none)	hex; copy color inside the widget
maxWidth	(none)	px; constrains the widget. 16:9 aspect always maintained
callback	(none)	function(videoId, output) called when the candidate submits

Full parameter list (advanced options, output modes, white-label presets) is in the API reference on Postman.

Open the API reference →

Multiple recorders on one page

Each instance needs a unique selector. The same recorderId can drive multiple instances, useful for multi-question interview flows where each question gets its own recorder.

html

<style="color:#f0a4c0">div id=style="color:#fbeef3">"q1"></style="color:#f0a4c0">div>
<style="color:#f0a4c0">div id=style="color:#fbeef3">"q2"></style="color:#f0a4c0">div>

<style="color:#f0a4c0">script>
  FlipbaseV2.recorder({ selector: style="color:#fbeef3">'q1', recorderId: style="color:#fbeef3">'YOUR_RECORDER_ID' });
  FlipbaseV2.recorder({ selector: style="color:#fbeef3">'q2', recorderId: style="color:#fbeef3">'YOUR_RECORDER_ID' });
</style="color:#f0a4c0">script>

Constraints

Minimum width: 244px. Below this, webcam recording does not function reliably.
Aspect: always 16:9, regardless of container.
Inside a <table>: the table must have an explicit min-width, otherwise camera initialisation fails.

Ready to call the API?

The full reference is on Postman. To actually call it you need an api_key + api_secret + sandbox organization. Reply within one working day.

Open the API reference Request API credentials