Embed a video recorder
Last updated
Last updated
As demonstrated in the video above, a quick and easy way to get started with embed codes is in your Capsule Dashboard, by clicking the ··· menu on a Collection, and selecting Embed
The embed code will render a button on the page, and clicking on that button launches a modal with the Capsule Recorder component, using the configuration from your Capsule.
The slug is your subdomain (e.g. your-capsule-slug.capsule.video) or, in the case of a custom domain, the domain replacing "." with "-" (e.g. www-yourdomain-com). Feel free to use demo-pro for integration testing.
Parameters can be added to the Capsule Recorder embed code to control how it behaves. Here's an example with the optional parameters set:
Parameter
Description
Default
slug
Your subdomain (e.g. your-capsule-slug.capsule.video) or, in the case of a custom domain, the full domain replacing "." with "-" (e.g. www-yourdomain-com)
el
Optionally specify an #id or .class to append Capsule content within an existing html element rather than inline below this script tag
buttonEl
Optionally specify an #id or .class to make an existing element on the page act as the button to launch the recorder modal. The standard button will not appear.
buttonLabel
Overrides the default label on the button that launches the modal
Create a video
buttonColor
Overrides the default color of the button that launches the modal
#FF4F4F
form
Send form data by specifying field names and values (see example above). This will hides the fields from the flow and submits them with the video
digestCheckbox
By default, the user is given the option to opt-in to receive a daily digest when new content is added to the public gallery for the Capsule. Set this to 'hidden' to remove the checkbox from the recorder flow.
'visible'
doneHeader
Sets the header text on the last step in the flow, after the video has been submitted
Done!
doneMessage
Sets the message text on the last step in the flow, after the video has been submitted
Your video has been submitted.
doneCtaLabel
Sets the button label on the call to action button on the last step in the flow, after the video has been submitted
Close
doneCtaUrl
Sets the URL on the call to action button on the last step in the flow, after the video has been submitted. If not specified, the button will simply close the modal
N/A (closes modal)
onRecorded
Javascript callback invokes function at the end of recording. See below for more details.
onCompleted
Javascript callback invokes function once the video is processed (if the window is still open). See below for more details.
The Capsule Recorder embed supports deeper page integrations via javascript callbacks. For example, you could use the onRecorded
callback after a user submits a video to get the video ID to then render the video player directly on your page Callback functions can be specified as parameters in the embed code and will fire when specific events take place:
onRecorded
As soon as a user records of uploads a video, a javascript Object with a single property (video
) is passed to the callback function.
When a video is recorded using the embed, the video
property contains a Blob with the encoded video data. If, instead, a video was uploaded by the user, the video
property contains a File object. In both cases, these are the "unprocessed" video, just as the user recorded with, without being edited via a Capsule video template.
onCompleted
Below is an JSON representation of the object passed to the callback function at the end of the flow, once the video is processed. Note that if the browser window/tab is closed before the video is processed, the callback will not happen. The duration of video processing depends on the length of the video, but usually completes within handful of seconds of displaying the "Done" step. The callback will still happen even of the modal is closed.
Property
Description
Email address of the contributor
formData
An array of values entered into the form
id
ID of the video, can be used to render the Capsule Player, or to link up with API responses or webhook payloads.
jobId
Internal ID for the video render job. Can generally be ignored
url
URL to the rendered mp4
If you want to change the style of the standard button beyond the color and the label, this can be done with CSS using Shadow Parts. See example below.
Note that an alternate way to control the style of the button is to use the buttonEl
parameter described above. This will use any element on your page as the button, rather than having the embed code render a button for you.
In this example, we set the text color to black, remove the rounded corners, and hide the record icon that normally appears before the label: