Skip to main content

Configure the Studio SDK

The Studio SDK can be adjusted to various levels of interactivity, from a basic video player to a full-featured video editing application.

Interactive​

Enable or disable interactivity in the SDK to allow users to manipulate video elements:

window.shotstack.refresh('studio', {
  interactive: false // default true
});

Timeline​

Control the visibility of the timeline:

window.shotstack.refresh('studio', {
  timeline: true // default false
});

Sidepanel​

Show the sidepanel with clip controls:

window.shotstack.refresh('studio', {
  sidepanel: true // default true
});

Settings​

Toggle the settings button in the sidepanel:

window.shotstack.refresh('studio', {
  settings: false // default false
});

Controls​

Show the player controls

window.shotstack.refresh('studio', {
  controls: true // default true
});

Styling options​

Customise the style of the Studio to match your brand using CSS, and replace the default Shotstack logo with your own:

window.shotstack.refresh('studio', {
  style: {
    stylesheet: 'https://shotstack-studio-sdk.s3.amazonaws.com/styles/sdk-custom.css',
    logo: {
      url: 'https://www.reshot.com/preview-assets/icons/XDCHJTKVNP/unicorn-XDCHJTKVNP.svg'
    }
  },
});