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.
Navigate to your library, click the three-dot menu beside the library symbol and select Recorder tokens. Now create or copy a recorder token.
<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>
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.
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.
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)">
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):
You can define the language of the recorder widget by setting the corresponding property (and associated attribute):
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|
You can determine which UI will be used in which state by setting the
hidePopupWhile property or the
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.
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: