Skip to main content

Embed the Studio SDK

To embed the Studio SDK into your web application, include the following script tag just before the </body> tag on each page where you want the Studio to appear:

<script src="https://js.shotstack.io/studio/0.5.6/shotstack.min.js"></script>

Directly below the script you added, insert the following code. Replace 'studio' with the ID of the HTML element where you want the Studio to be embedded:

<script>
  window.shotstack.create('studio', template, {
    owner: 'dfg53hkjl4',
    interactive: true,
    timeline: true,
    sidebar: true,
    settings: true,
    controls: true,
    style: {
      logo: {
        url: 'https://shotstack-assets.s3.amazonaws.com/icons/unicorn.svg'
      },
      stylesheet: 'https://shotstack-studio-sdk.s3.amazonaws.com/styles/sdk-custom.css'
    },
  });
</script>

This configuration will activate the Studio SDK inside your application with interactive features and a timeline, styled with an external stylesheet. Pass in a template to load an initial template.

Example implementations​

Our Github repo provides for a range of examples on how to embed the Studio SDK into your own application.