# Shotstack plugin help

**URL:** <https://forum.bubble.io/t/shotstack-plugin-help/205725>\
**Category:** Jobs / Freelance\
**Created:** [May 8, 2022, 4:03pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725 "2022-05-08T16:03:35Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffmccutcheon](https://avatars.discourse-cdn.com/v4/letter/j/b5ac83/32.png) [@jeffmccutcheon](https://forum.bubble.io/u/jeffmccutcheon)\
**Post date:** [May 8, 2022, 4:03pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/1 "2022-05-08T16:03:35Z")

</div>

Hi there, I have a [shotstack.io](http://shotstack.io) plugin that creates videos from any number of clips or images with any transitions.

i lost the original plugin author and need someone to add the ability to add overlays.

---

<div class="post-metadata">

**Author:** ![AlexanderS](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexanders/32/138885_2.png) [@AlexanderS](https://forum.bubble.io/u/AlexanderS)\
**Post date:** [May 9, 2022, 1:32pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/2 "2022-05-09T13:32:56Z")

</div>

Hello @jeffmccutcheon

I can help you with this work. Write me in PM and we will discuss everything in detail.

---

<div class="post-metadata">

**Author:** ![andrewjohnson56782](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@andrewjohnson56782](https://forum.bubble.io/u/andrewjohnson56782)\
**Post date:** [May 9, 2022, 10:41pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/3 "2022-05-09T22:41:36Z")

</div>

Hi Jeff,  
If you are still looking out for some help, feel free to reach out to me as this is well within my area of expertise.  
You can reach me on [andrewjohnson56782@gmail.com](mailto:andrewjohnson56782@gmail.com)  
Best Wishes,  
Andrew

---

<div class="post-metadata">

**Author:** ![hugolee](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/hugolee/32/129260_2.png) [@hugolee](https://forum.bubble.io/u/hugolee)\
**Post date:** [May 10, 2022, 9:28am UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/4 "2022-05-10T09:28:43Z")

</div>

Hello @jeffmccutcheon

If you are looking for plugin creator, I offer a [development subscription](https://openprojecthq.com/profile/hugo-lee) with unlimited custom plugin development requests. I’ve used Shotstack API to merge videos before so I believe I am able to add overlays with Shotstack in a few days. If you don’t have any more request afterward, you can cancel the subscription at any time.

Hugo  
Developer @ Nalfe

[60+ Bubble Templates](https://bubble.io/contributor/nalfe-1535307396920x727486899588257000)  
[10+ Bubble Plugins](https://bubble.io/contributor/nalfe-1535307396920x727486899588257000)  
[Bubble Component Library & Extension](https://chrome.google.com/webstore/detail/nalfe/fnmoehckfflkplnllpddbjjdhbmdoapc)  
[No-code Development Subscriptions](https://openprojecthq.com/profile/hugo-lee)  
[No-code Podcast](https://www.youtube.com/channel/UCyAdPoHly6tAiQwhaeke6tw)

---

<div class="post-metadata">

**Author:** ![AB01](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@AB01](https://forum.bubble.io/u/AB01)\
**Post date:** [July 8, 2022, 5:38pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/5 "2022-07-08T17:38:25Z")

</div>

Hello,  
I’m also looking for a Shotstack specialist … please PM me.

Thanks

---

<div class="post-metadata">

**Author:** ![dbom009](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/dbom009/32/259579_2.png) [@dbom009](https://forum.bubble.io/u/dbom009)\
**Post date:** [October 7, 2022, 12:34pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/6 "2022-10-07T12:34:29Z")

</div>

Hi, can you help me with the ShotStack plugin or how to utilize this tool for my app?

---

<div class="post-metadata">

**Author:** ![initialsjz](https://avatars.discourse-cdn.com/v4/letter/i/59ef9b/32.png) [@initialsjz](https://forum.bubble.io/u/initialsjz)\
**Post date:** [July 19, 2024, 10:19pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/7 "2024-07-19T22:19:12Z")

</div>

Hi,

Could not find the plugin anymore so want to connect directly through API connecter plugin, to the Shotstack API curl: [Hello World | Shotstack Documentation](https://shotstack.io/docs/guide/getting-started/hello-world-using-curl/?_gl=1*1ltx1gg*_gcl_au*ODU3OTA5NTc2LjE3MjExNDc2ODY.*_ga*NDY2MTU5OTI0LjE3MjExNDc2ODY.*_ga_0KPVTRT370*MTcyMTQxNDI3MS41LjEuMTcyMTQxNDY4MC41MC4wLjA.&_ga=2.147867255.1147933325.1721399145-466159924.1721147686#poll-the-api-to-check-the-render-status)

How do I get a response with the test endpoints? Right now they return “be sure to call a valid resource” instead of “response”:{  
“message”:“Render Successfully Queued”,  
“id”:“d2b46ed6-998a-4d6b-9d91-b8cf0193a655”

What an awesome AI generative video API. They just have no no-code documentation for Bubble, just Zapier. Thanks in advance!

-jz

 ![Screen Shot 2024-07-19 at 5.35.33 PM](https://us1.discourse-cdn.com/bubble/original/3X/9/3/93115e07ca8ade4e33dee1a7eca0931e3925dbcc.jpeg)

 ![Screen Shot 2024-07-19 at 6.02.47 PM](https://us1.discourse-cdn.com/bubble/original/3X/f/f/ffd65a0fd41fb372076fc6123e786f5fb5c8b86d.jpeg)

---

<div class="post-metadata">

**Author:** ![incomdies](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/incomdies/32/200314_2.png) [@incomdies](https://forum.bubble.io/u/incomdies)\
**Post date:** [July 20, 2024, 3:43am UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/8 "2024-07-20T03:43:00Z")

</div>

Did u get valid API keys and set up your authentication correctly?

---

<div class="post-metadata">

**Author:** ![mital8488](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@mital8488](https://forum.bubble.io/u/mital8488)\
**Post date:** [July 21, 2024, 8:45am UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/9 "2024-07-21T08:45:26Z")

</div>

I’ve experience in Shotstack Plugin. Please send me the details.

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [July 22, 2024, 3:00pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/10 "2024-07-22T15:00:22Z")

</div>

Hey @initialsjz 👋

I got it working pretty quickly. Fortunately, they have pretty good documentation. So for the first call, you need to render something. Like this:

 ![Screenshot 2024-07-22 at 7.55.43 AM](https://us1.discourse-cdn.com/bubble/original/3X/f/5/f5b841b68687049085ad4a6dae4f77ac7f75eedf.png)

I used this Body from their example to get it to work:

```auto
{
  "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
    }
  }
}

```

Then you can check on the status of the render like this:

 ![Screenshot 2024-07-22 at 7.56.53 AM](https://us1.discourse-cdn.com/bubble/original/3X/a/f/af4ec958b6ededf3a49b0dcccc7da86f66edf13b.png)

Then you just need to fill in the data that you want by switching out the data in the body from the Render endpoint to something that allows you to put in the information in a workflow.

I am using the ‘Stage’ endpoint so it doesn’t count against any credits. It will have the watermark. that will be for the test environment. For the live environment, you can use the real endpoint without the ‘stage’ part in the url. This could also be done dynamically by taking advantage of the ‘isn’t live version’ value in a workflow.

Does that help a little bit? Let us know where you get stuck and we can help some more. 😊

---

<div class="post-metadata">

**Author:** ![initialsjz](https://avatars.discourse-cdn.com/v4/letter/i/59ef9b/32.png) [@initialsjz](https://forum.bubble.io/u/initialsjz)\
**Post date:** [July 22, 2024, 8:02pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/11 "2024-07-22T20:02:53Z")

</div>

Wow thanks! How do I, and great if you can screenshot a workflow:

> [@J805](#):
>
> switching out the data in the body from the Render endpoint to something that allows you to put in the information in a workflow

I created a database thing and use in a workflow. But make changes to a thing does not save the API url response to my database? Thanks so much!

 ![Screen Shot 2024-07-22 at 4.16.54 PM](https://us1.discourse-cdn.com/bubble/original/3X/2/3/23f613261d08cdabdc781968995d968435e17af6.jpeg)  
 ![Screen Shot 2024-07-22 at 4.17.30 PM](https://us1.discourse-cdn.com/bubble/original/3X/8/3/83483629395abd220c0336604c41f0beee4a2f6b.png)  
 ![Screen Shot 2024-07-22 at 4.18.36 PM](https://us1.discourse-cdn.com/bubble/original/3X/f/4/f45c2ac8ef6eea5b0455e921641cb4d87bccb1df.png)

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [July 22, 2024, 8:28pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/12 "2024-07-22T20:28:28Z")

</div>

I don’t have a workflow set up. However, the first ‘render’ endpoint only starts the process. You would use the ‘poll’ method or, even better, use this ‘webhook’ method to send the file to you once it has completed rendering.

Here is the documentation about it, we just have to figure out how it works: [Shotstack Ingestion Webhook | Shotstack Documentation](https://shotstack.io/docs/guide/ingesting-footage/polling-vs-webhook/#receiving-a-webhook)

---

<div class="post-metadata">

**Author:** ![initialsjz](https://avatars.discourse-cdn.com/v4/letter/i/59ef9b/32.png) [@initialsjz](https://forum.bubble.io/u/initialsjz)\
**Post date:** [July 23, 2024, 12:20am UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/13 "2024-07-23T00:20:38Z")

</div>

Thanks! Hope to get to the next step. I’m still having trouble understanding if I put the data in the API connector or the workflow, or both. When I intialize the call in the api connector, it errors out if there is no data in the body. It also errors out when there is a data [parameter]. Am I supposed to set this in both places? Is the API connector data ignored after initialization? Thank you!

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [July 23, 2024, 6:21pm UTC](https://forum.bubble.io/t/shotstack-plugin-help/205725/14 "2024-07-23T18:21:03Z")

</div>

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:

 ![Screenshot 2024-07-23 at 10.39.10 AM](https://us1.discourse-cdn.com/bubble/original/3X/e/5/e506f453744cb11a6cf12080d7e400bab8d93e97.png)

```auto
{
  "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
    }
  }
}

```

 ![Screenshot 2024-07-23 at 10.37.37 AM](https://us1.discourse-cdn.com/bubble/original/3X/c/3/c3f1eae28458baa5af7cf6ed6216638633d0e796.jpeg)  
 ![Screenshot 2024-07-23 at 10.37.43 AM](https://us1.discourse-cdn.com/bubble/original/3X/0/b/0bb420c3576527d1f43f925e0acce3bb6b6c9a27.jpeg)  
 ![Screenshot 2024-07-23 at 11.19.36 AM](https://us1.discourse-cdn.com/bubble/original/3X/d/7/d73006eeeefdad57572243b135cb296b3bc2d7ba.png)

Does that help? Let me know. 😊
