Flipbase

Developer docs

Quick start

Embed a recorder, capture a video UUID, play it back. The full minimum integration in two script tags.

The minimum integration is two script tags and two divs. One pair captures a video, the other plays it back. Everything else is configuration on top of these.

Capture

Load the recorder library, mount it into a div on your page, and provide a recorderId.

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',
    duration: 60,
    callback: function (videoId) {
      style=style="color:#fbeef3">"color:#9a96a6">// Persist videoId against the candidate record in your system.
      style=style="color:#fbeef3">"color:#9a96a6">// You will use it later with the player.
    },
  });
</style="color:#f0a4c0">script>

When the candidate finishes recording and submits, the callback fires with the video UUID. Store the UUID. That is the only piece of data you need to carry forward.

Play back

Load the player library, mount it into a div, and provide both the player_id and the captured video_id.

html
<style="color:#f0a4c0">script src=style="color:#fbeef3">"https:style="color:#9a96a6">//cdn.flipbase.com/player/v2/player.min.js"></style="color:#f0a4c0">script>

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

<style="color:#f0a4c0">script>
  const player = new FlipbasePlayer({
    selector: style="color:#fbeef3">'player',
    player_id: style="color:#fbeef3">'YOUR_PLAYER_ID',
    video_id: style="color:#fbeef3">'THE_UUID_FROM_THE_RECORDER',
  });
  player.mount();
</style="color:#f0a4c0">script>

The player handles fetching the video record, streaming the file, rendering transport controls, and unmounting cleanly. Call player.unmount() when you remove it from the DOM (e.g. on route change in a single-page app).

Where the IDs come from

recorderId and player_id are issued to you by Flipbase as part of your account setup. They are stable, scoped to your organization, and you usually have one of each per use case (one for application-form moments, another for internal-only review videos, etc.).

video_id is a UUID returned by the recorder for each video that gets captured. You persist it against the candidate record in your own database.

To get a recorderId, player_id, and API credentials for your account, send a short request:

Request API credentials →

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 referenceRequest API credentials