Skip to main content

Import Widget

The Import Widget can used to import local video or audio file. Below is a simple implementation of the Import Widget.

import { initialize, ImportWidget } from "@hippovideo/video-sdk";
import "@hippovideo/video-sdk/app/hv_recorder.css"; // Importing the styling required

let initializeOptions = {

const onVideoSdkInitialize = (success, error) => {
* error will be undefined in case of successfull initialization
* success will be undefined in case there is any error
* */
if (success) {

let importWidgetConfig = {
show_video_title: true

ImportWidget.create(success.key, importWidgetConfig)
.then((importer) => {

importer.on("import_complete", (data) => {'Import Data : ', data);

importer.on("video_submitted", (data) => {'Import Submitted : ', data);
.catch((error) => {
//Error details if there is an error during widget creation

if (error) {
* Will contain the error details when there is an error in sdk initialization

initialize(initializeOptions, onVideoSdkInitialize);

  • ImportWidget can be opened with,
  • importer.importMedia(file): File object to upload (Optional). If file object is not passed, file picker dialog box opens to select video/audio file. Other ImportWidget methods are found in importer section.

Once the import is completed, asset_id, play_url, embed_url, token and other details are passed in import_complete event.

ImportWidget events are found in Events and Data section.


More details on Events, Errors and Configs can be found in Additional Data section