Shotstack plugin help

So here is how you setup a web hook from Shotstack so you will always get the rendered video after it has completed.

  1. Create a backend workflow to catch your web hook.
  2. Choose detect data
  3. Initialize your API Connector ‘Render’ call with your own URL from the backend workflow when choose detect data. Will look something like the url I put in the code.
  4. For security, drop in your bubble api token from the settings page here: Settings > API > API tokens > generate a new API token.
  5. Remove the initialize part after it has been initialized and start making the data dynamic. Example of dynamic data would be below like

Check it out:

{
  "callback": "https://nocodeminute.bubbleapps.io/version-test/api/1.1/wf/shotstack?api_token=YOURAPIKEY",
  "timeline": {
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "text",
              "text": "NoCodeMinute.com",
              "font": {
                "family": "Clear Sans",
                "color": "#ffffff",
                "size": 46
              },
              "alignment": {
                "horizontal": "left"
              },
              "width": 566,
              "height": 70
            },
            "start": 4,
            "length": "end",
            "transition": {
              "in": "fade",
              "out": "fade"
            },
            "offset": {
              "x": -0.15,
              "y": 0
            },
            "effect": "zoomIn"
          }
        ]
      },
      {
        "clips": [
          {
            "asset": {
              "type": "video",
              "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/earth.mp4",
              "trim": 5,
              "volume": 1
            },
            "start": 0,
            "length": "auto",
            "transition": {
              "in": "fade",
              "out": "fade"
            }
          }
        ]
      },
      {
        "clips": [
          {
            "asset": {
              "type": "audio",
              "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/motions.mp3",
              "effect": "fadeOut",
              "volume": 1
            },
            "start": 0,
            "length": "end"
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "size": {
      "width": 1280,
      "height": 720
    }
  }
}



Does that help? Let me know. :blush:

1 Like