Embed a video recorder

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

Basic Usage

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.

<div>
  <script>
    (function(c,a,p,s,u,l,e,h){c["_capsuleRecorderIdent"]=p;c[p]=c[p]||function(){
    (c[p].q=c[p].q||[]).push(arguments);e=a.querySelector("script[data-capsule='"+p+"']");
    l=a.currentScript?.parentElement||a.body;if(!e){if(typeof Hls=="undefined"){
    h=a.createElement("script");h.src="https://cdn.jsdelivr.net/npm/hls.js@latest";l.appendChild(h);}
    u=a.createElement("script");u.async=1;u.src=s;u.dataset["capsule"]=p;l.appendChild(u);}}})
    (window,document,"capsuleRecorder","https://embed.capsule.video/recorder.js");
    capsuleRecorder({
        slug: "your-capsule-slug",
        el: document.currentScript.parentElement
    })
</script>
</div>

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.

Additional Parameters

Parameters can be added to the Capsule Recorder embed code to control how it behaves. Here's an example with the optional parameters set:

<div>
  <script>
    (function(c,a,p,s,u,l,e,h){c["_capsuleRecorderIdent"]=p;c[p]=c[p]||function(){
    (c[p].q=c[p].q||[]).push(arguments);e=a.querySelector("script[data-capsule='"+p+"']");
    l=a.currentScript?.parentElement||a.body;if(!e){if(typeof Hls=="undefined"){
    h=a.createElement("script");h.src="https://cdn.jsdelivr.net/npm/hls.js@latest";l.appendChild(h);}
    u=a.createElement("script");u.async=1;u.src=s;u.dataset["capsule"]=p;l.appendChild(u);}}})
    (window,document,"capsuleRecorder","https://embed.capsule.video/recorder.js");
    capsuleRecorder({
        slug: "your-capsule-slug",
        el: document.currentScript.parentElement,
        buttonLabel: "Record your response",
        buttonColor: "blue",
        form: {"Name": "John", "Location": "NYC", "Email": "[e-mail]"},
        digestCheckbox: "hidden",
        doneHeader: "Thank You",
        doneMessage: "We appreciate you input",
        doneCtaLabel: "Learn More",
        doneCtaUrl: "htts://capsule.video",
        onRecorded: (e) => { console.log(e); },
        onCompleted: (e) => { console.log(e); }
    })
  </script>
</div>

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.

Javascript Callbacks

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.

{
    "email":"[e-mail]",
    "formData":["Jane","NYC"],
    "id":"1cyMUT743et2",
    "jobId":"6213eecc8fb44800c360ef97",
    "url":"https://url.to/video.mp4"
}

Property	Description
email	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

Advanced Button Styling

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:

<style>
    ::part(capsule-recorder-button) {
        color: black;
        border-radius: 0px;
    }

    ::part(capsule-recorder-button):before {
        display: none;
    }
</style>