The <hubcap-recorder> component is a custom element with a default recorder UI and behavior as configured in the Hubcap Dashboard. Additional configuration is available through various attributes on the element itself.


Attribute Type Default Description
recorder-id string n/a Your required unique account ID. You can find your ID within the Embed Code in the Settings section of your Dashboard.
show-start-button boolean true Set to false (<hubcap-recorder show-start-button="false">) to hide the default start recording button. Only do so if you plan to use your own start button. The rest of the Hubcap UI will still be shown during a recording.
show-stop-button boolean true Set to false (<hubcap-recorder show-stop-button="false">) to hide the default stop button that appears during recording. Note that if you hide the default stop button, the only way to stop recording will be through the API.
show-submission-success boolean true Set to false (<hubcap-recorder show-submission-success="false">) to skip the success message after submitting a recording.


The <hubcap-recorder> DOM element includes a couple of straightforward methods to help you easily integrate the button with an existing platform.


Starts a recording, just as if a user had clicked on our standard record button and selected a given source option (screen or webcam).

Parameter Type Required Description
options StartOptions no Basic recording options. Starts a screen recording by default, but can be configured to start a webcam recording instead.


Promise<boolean> : Resolves to true when started successfully. Resolves to false when cancelled by the user.


const hubcap = document.querySelector("hubcap-recorder");
const started = await hubcap.start({ source: "webcam" });


Stops a recording in progress. If the show-stop-button attribute is set to false, this method must be used to end a recording.


Promise<void> : Resolves when recording has beens stopped. Rejects if recording not in progress.



Simple compatibility check. Helpful for utilizing a custom fallback for users on unsupported browsers.


boolean : True if Hubcap supports the user's web browser.


For full integration, the <hubcap-recorder> DOM element emits events containing useful metadata about recorded videos.


The submit event fires after a user creates and approves a recording.

Property Type Description
detail SubmitEventDetail Contains video metadata and points to the hosted video player.



The ready event fires once Hubcap is fully loaded and ready to start recording.