# Embed a video recorder

{% embed url="<https://youtu.be/c9d5CuiwjTQ>" %}

{% hint style="info" %}
As demonstrated in the video above, a quick and easy way to get started with embed codes is in your [Capsule Dashboard](https://admin.capsule.video), by clicking the **···** menu on a Collection, and selecting Embed
{% endhint %}

## 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.

```markup
<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>
```

{% hint style="info" %}
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.
{% endhint %}

## 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:

```markup
<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": "john@example.com"},
        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](/displaying-videos/embed-a-single-video.md) 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](https://developer.mozilla.org/en-US/docs/Web/API/Blob) with the encoded video data. If, instead, a video was uploaded by the user, the `video` property contains a [File](https://developer.mozilla.org/en-US/docs/Web/API/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.

```json
{
    "email":"jane@test.com",
    "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](/accessing-videos/fetch-api.md) 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](https://www.w3.org/TR/css-shadow-parts-1/). See example below.

{% hint style="info" %}
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.
{% endhint %}

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:

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.capsule.video/capturing-videos/embed-a-video-recorder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.