Using embedded recorder

The actual recording component of Calipio can be embedded on your website. Possible use cases are:

"Report a problem"-functionality
Users asking for help (Ticket system)
Getting customer feedback for your application

Embedding the recorder is as simple as adding a script and a <calipio-recorder> HTML element. The <calipio-recorder> element is a button that can be used to start and/or control the recording. The behavior and visibility of the button and the actual recorder can be customized, and recording can also be controlled by scripts.

TL;DR#

1. Obtain a recorder token#

Navigate to your library, click the three-dot menu beside the library symbol and select Recorder tokens. Now create or copy a recorder token.

Obtain recorder token step 1 Obtain recorder token step 2

2. Add the following code to your website#

<script src="https://calipio.com/app/embeddable-recorder.js"></script><calipio-recorder token="your-recorder-token-string" onrecordingended="alert('Recording has ended. Playback URL: ' + event.detail.url)"></calipio-recorder>

Result (click!):

Recorder tokens#

Token description#

A recorder token enables dropping recordings in a specific location (root or folder) of a specific library.

It contains the following information:

An API token that is used for communication with the server
An encryption key that enables the token to save end-to-end encrypted videos in the library

For security reasons, the token is valid for a limited time. You can configure that time when creating the token.

A recorder token does not enable the user to view or play videos or other contents of the library.

Token string#

A token is used as a token string. After creating a recorder token, copy it's string value and set the token attribute to it.

Recording playback links#

Recordings are stored securely and end-to-end encrypted in our cloud. After a user has finished a recording, the recorder outputs a recording link. This link can be used to playback the recording done by the user.

To get the link, you want to subscribe to the recordingended event, and then do something with the link:

<calipio-recorder onrecordingended="postToTicket('User has attached a screen recording: ' + event.detail.url)">

Setting and constraining recording sources#

You can determine which recording sources (Screen, camera, microphone) a user is able to select, and you can also preselect the recording source. See the following properties (and associated attributes):

Setting language#

You can define the language of the recorder widget by setting the corresponding property (and associated attribute):

language attribute / language property

Embedded recorder UI#

The UI of the recorder consists of two elements:

A Button UI which appears exactly at the position where the <calipio-recorder> element is placed. It is used to start the recording
A Popup UI, which - when configured - appears as soon as the button is clicked, and prevents any other interaction until the recording has finished

Depending on the configuration, either the Button UI or the Popup UI is used to control the different states of recording:

State	Button UI	Popup UI
Idle		Invisible
Setup
Recording
Finished

You can determine which UI will be used in which state by setting the hidePopupWhile property or the hidepopupwhile attribute.

You may want to prefer the mini UI when users:

Should be encouraged to only record the screen (or some other, preconfigured source)
May want to record interaction the page where the recorder is embedded (e.g. a web application)

You want to prefer the regular UI when users:

Should be able to select devices easily
Want to see a preview during recording
Share their recording link in another way.

Logging and debugging#

During recording, you will see informational and warning messages in the browser console.

For debugging purposes, set the log attribute to to "0" to see even more logging:

<calipio-recorder log="0"></calipio-recorder>