MARKETPLACE
PLUGINS
SHOTSTACK AI VIDEO EDITOR
Shotstack AI Video Editor logo

Shotstack AI Video Editor

Published January 2025
   •    Updated December 2025

Plugin details

Shotstack is a cloud-based video editing and rendering platform designed to simplify and automate the video creation process.
It allows users to create high-quality, professional-looking videos quickly and easily, without the need for advanced technical skills or expensive software.

Demo Link: https://shotstackdemo.bubbleapps.io/version-test

Editor Link: https://bubble.io/page?id=shotstackdemo&tab=tabs-1

💡 𝗦𝘂𝗯𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻𝘀 𝗮𝗿𝗲 𝗽𝗿𝗼𝗿𝗮𝘁𝗲𝗱. 𝗜𝗳 𝘆𝗼𝘂 𝗶𝗻𝘀𝘁𝗮𝗹𝗹 𝗮𝗻𝗱 𝘂𝗻𝘀𝘂𝗯𝘀𝗰𝗿𝗶𝗯𝗲 𝘁𝗵𝗶𝘀 𝗽𝗹𝘂𝗴𝗶𝗻 𝗶𝗻 𝗼𝗻𝗲 𝗱𝗮𝘆 𝘁𝗼 𝘁𝗲𝘀𝘁 𝗶𝘁 𝗼𝘂𝘁, 𝘆𝗼𝘂'𝗹𝗹 𝗼𝗻𝗹𝘆 𝗯𝗲 𝗰𝗵𝗮𝗿𝗴𝗲𝗱 𝟭/𝟯𝟬𝘁𝗵 𝗼𝗳 𝘁𝗵𝗲 𝗺𝗼𝗻𝘁𝗵𝗹𝘆 𝘀𝘂𝗯𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻 𝗳𝗲𝗲.

📖 𝗦𝘁𝗲𝗽-𝗯𝘆-𝗦𝘁𝗲𝗽 𝗶𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻𝘀 𝗮𝗿𝗲 𝘁𝗵𝗲 "𝗜𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻𝘀" 𝘀𝗲𝗰𝘁𝗶𝗼𝗻 𝗮𝗻𝗱 𝗗𝗲𝗺𝗼 𝗘𝗱𝗶𝘁𝗼𝗿 𝗶𝘀 𝗶𝗻 𝘁𝗵𝗲 "𝗟𝗶𝗻𝗸𝘀" 𝘀𝗲𝗰𝘁𝗶𝗼𝗻 𝗼𝗳 𝘁𝗵𝗲 𝗣𝗹𝘂𝗴𝗶𝗻 𝗣𝗮𝗴𝗲.

Contact us at [email protected] for any additional feature you would require or support question.

$49

One time  •  Or  $5/mo

1.5 stars   •   2 ratings
13 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

wise:able logo
wise:able
Joined 2020   •   122 Plugins
View contributor profile

Instructions

SHOTSTACK VIDEO EDITOR ===========================

SHOTSTACK VIDEO EDITOR - ELEMENT DESCRIPTION
-----------------------------------------------------------------------
 SHOTSTACK VIDEO EDITOR provides cloud-based video editing and rendering capabilities.

STEP-BY-STEP SETUP
--------------------------------
 0) Register on Shotstack.io and get your OWNER ID & API KEYS.

 1) In the Plugin Settings, enter your OWNER ID & API KEYS generated at the previous step.

 2) Add the SHOTSTACK VIDEO EDITOR ELEMENT to the page on which the editor must be displayed.

 3) Integrate the logic into your application using the following SHOTSTACK VIDEO EDITOR element's states and actions:

 FIELDS:
   EDITOR SETTINGS
   - INTERACTIVE: Enable or disable interactivity to allow users to manipulate video elements.
   - SHOW TIMELINE: Control the visibility of the timeline.
   - SHOW SIDEPANEL: Show the sidepanel with clip controls.
   - SHOW SETTINGS: Toggle the settings button in the sidepanel.
   - SHOW CONTROLS: Show the player controls.
   RENDERING SETTINGS
   - WEBHOOK URL : Specify a webhook URL for rendering notification.
   EDITOR STYLING
   - PRIMARY COLOR : The primary color of the editor.
   - SECONDARY COLOR : The secondary color of the editor.

 EVENTS:
 - EDIT SESSION CHANGED : Event triggered when a change to the edit session has been made. CURRENT EDIT DATA state is updated with the edit session data.
 - EDITOR READY : Event triggered when the editor is loaded and ready. Triggered one.

 EXPOSED STATES:
 Use any element able to show/process the data of interest (such as a Group with a Text field) stored within the result of the following states of the SHOTSTACK VIDEO EDITOR ELEMENT:
 - CURRENT EDIT SESSION DATA: Contains the current edit data in stringified JSON format. You may use this data to save an edit session. Updated when EDIT SESSION CHANGED is triggered.
 
 ELEMENT ACTIONS - TRIGGERED IN WORKFLOW:
   - ADD MEDIA ASSET: Add video, image or audio asset to the editor.
     Inputs Fields:
       - ASSET URL: URL of the asset such as https://domain.com/asset.mp4.
   - LOAD EDIT SESSION: Load an edit session using stringified JSON data.
     Inputs Fields:
       - EDIT SESSION DATA: Stringified Edit Session Data.

4)  Set up the "SHOTSTACK AI - RENDER ASSET" action in the workflow to render the asset based on your edit session.
   Inputs Fields :
     - EDIT SESSION DATA : The edit session data from CURRENT EDIT DATA state.
     - VERSION : Valid values: stage | v1
     - VERSION : Include watermark logo on the rendered asset. The file must be publicly available.
   Output Fields:
     - SUCCESS : Boolean value indicating whether the creation was successful or not.
     - MESSAGE : Status message of the render request.
     - DETAIL: Detailed message of the render request.
     - ID : ID of the asset.

5) Set-up the "SHOTSTACK - GET GENERATED ASSET" action in the workflow to retrieve the asset generated previously.
   Inputs Fields :
     - VERSION : Valid values: stage | v1
     - ASSET ID : The id of the asset file.
   Output Fields:
     - MESSAGE: Status message of the render.
     - ID: ID of the asset.

6) (Optional) Depending on your use-case, you may also generate assets using AI "GENERATE IMAGE ASSET FROM TEXT", "GENERATE AUDIO ASSET FROM TEXT", "GENERATE VIDEO ASSET FROM IMAGE" actions followed by "SHOTSTACK - GET GENERATED ASSET", which you may then use in your editor.

IMPLEMENTATION EXAMPLE
======================
Feel free to browse the app editor in the Service URL for an implementation example.

TROUBLESHOOTING
================
Any plugin-related error will be posted to the Logs tab, "Server logs" section of your App Editor.
 Make sure that "Plugin server side output" and "Plugin client side output" are selected in "Show Advanced".

> Server Logs Details: https://manual.bubble.io/core-resources/bubbles-interface/logs-tab#server-logs

PERFORMANCE CONSIDERATIONS
===========================
 N/A

QUESTIONS?
===========
Contact us at [email protected] for any additional features you would require or support questions.

Types

This plugin can be found under the following types:
Api   •   Action   •   Background Services   •   Element   •   Event

Categories

This plugin can be found under the following categories:
AI   •   Video   •   Media   •   Image   •   Social Network   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (1.5)

Does not work well with mobile responsive dimensions.
February 8th, 2025
if you would like this to work well with mobile, it may not be suitable. also there is a button that i cannot remove that leads to shotstack.io . not optimal for customer facing platforms. hopefully the editor of this plugin can apply improvements. Aside from this, it works as intended.
Thank you for your feedback which seems to be a duplicate of below. We would like to clarify that we cannot be held accountable for the component's performance, as its implementation is solely managed by shotstack.io. Therefore, for any issues related to the editor’s functionality, please reach out to shotstack.io directly. Regarding the button and the link to shotstack.io, this feature is called White Labelling and subject to specific shotstack.io pricing. Additionally, please note that this reviews section is intended for sharing public feedbacks about the plugin’s quality and support performance—which unfortunately we did not have a chance to address through our dedicated support channel [email protected] prior to your review. (plugin author)
February 8th, 2025
  •  
wise:able
Does not work well with mobile responsive dimensions.
February 6th, 2025
if you would like this to work well with mobile, it may not be suitable.
Thank you for your feedback. We would like to clarify that we cannot be held accountable for the component's performance, as its implementation is solely managed by shotstack.io. Therefore, for any issues related to the editor’s functionality, please reach out to shotstack.io directly. Additionally, please note that this reviews section is intended for sharing public feedbacks about the plugin’s quality and support performance—which unfortunately we did not have a chance to address through our dedicated support channel [email protected] prior to your review. (plugin author)
February 8th, 2025
  •  
wise:able
Bubble