Create Timeline with Shotstack API on New Outbound Message (Instant) from Salesforce API

Pipedream makes it easy to connect APIs for Shotstack, Salesforce and 2,400+ other apps remarkably fast.

Trigger workflow on

New Outbound Message (Instant) from the Salesforce API

Next, do this

Create Timeline with the Shotstack API

No credit card required

▶

Watch us build a workflow

8 min

Watch now ➜

Trusted by 1,000,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

Getting Started#

This integration creates a workflow with a Salesforce trigger and Shotstack action. When you configure and deploy the workflow, it will run on Pipedream's servers 24x7 for free.

Select this integration
Configure the New Outbound Message (Instant) trigger
1. Connect your Salesforce account
2. Configure infoBox
Configure the Create Timeline action
1. Connect your Shotstack account
2. Configure How Many Tracks?
3. Optional- Configure Soundtrack Source
4. Optional- Select a Soundtrack Effect
5. Optional- Configure Background
6. Optional- Configure Fonts
Deploy the workflow
Send a test event to validate your setup
Turn on the trigger

Details#

This integration uses pre-built, source-available components from Pipedream's GitHub repo. These components are developed by Pipedream and the community, and verified and maintained by Pipedream.

To contribute an update to an existing component or create a new component, create a PR on GitHub. If you're new to Pipedream component development, you can start with quickstarts for trigger span and action development, and then review the component API reference.

Trigger#

New Outbound Message (Instant) on Salesforce

Description:Emit new event when a new outbound message is received in Salesforce.

Version:0.1.7

Key:salesforce_rest_api-new-outbound-message

View on GitHub

Salesforce Overview#

The Salesforce (REST API) provides a powerful platform for creating and managing customer relationships with a wide array of features like data manipulation, querying, and complex automation. With Pipedream's serverless execution, you can create workflows that automate your sales processes, sync data with other platforms, enhance customer engagement, and trigger actions based on specific events. Dive into Salesforce data, streamline lead management, track customer interactions, and push or pull data to or from Salesforce seamlessly.

Trigger Code#

import { XMLParser } from "fast-xml-parser";
import salesforce from "../../salesforce_rest_api.app.mjs";

export default {
  type: "source",
  name: "New Outbound Message (Instant)",
  key: "salesforce_rest_api-new-outbound-message",
  description: "Emit new event when a new outbound message is received in Salesforce.",
  version: "0.1.7",
  dedupe: "unique",
  props: {
    db: "$.service.db",
    http: {
      type: "$.interface.http",
      customResponse: true,
    },
    salesforce,
    infoBox: {
      type: "alert",
      alertType: "info",
      content: `See Salesforce's guide on [setting up Outbound Messaging](https://sforce.co/3JbZJom).
\\
Set the Outbound Message's \`Endpoint URL\` to the endpoint of this source, which you can view after it is created.
\\
The \`Send Session ID\` option must be enabled in Salesforce for validating outbound messages.`,
    },
  },
  methods: {
    _unwrapMessage(message) {
      const parser = new XMLParser({
        removeNSPrefix: true,
      });
      const obj = parser.parse(message);
      const notifications = obj["Envelope"]["Body"].notifications;
      return notifications;
    },
    _sendHttpResponse(successValue = true, status) {
      // eslint-disable-next-line multiline-ternary
      status = status ?? (successValue ? 200 : 400);
      this.http.respond({
        status,
        body: `
          <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
          xmlns:out="http://soap.sforce.com/2005/09/outbound">
            <soapenv:Header/>
            <soapenv:Body>
              <out:notificationsResponse>
                <out:Ack>${successValue}</out:Ack>
              </out:notificationsResponse>
            </soapenv:Body>
          </soapenv:Envelope>
        `,
        headers: {
          "content-type": "text/xml",
        },
      });
    },
    async _isValidSessionId(sessionId) {
      try {
        const data = await this.salesforce.getUserInfo(sessionId);
        return Boolean(data);
      } catch (err) {
        console.log("Error validating SessionId:", err);
        return false;
      }
    },
    async _isValidSource(data) {
      const { SessionId: sessionId } = data;
      if (!sessionId) {
        throw new Error("The outbound message is missing a Session ID. Please configure the outbound message to send Session ID to validate the webhook source.");
      }

      return this._isValidSessionId(sessionId);
    },
    generateMeta(data) {
      const {
        ActionId: actionId,
        Notification: { Id: eventId },
      } = data;
      const id = `${eventId}-${actionId}`;
      const summary = JSON.stringify(data);
      const ts = Date.now();
      return {
        id,
        summary,
        ts,
      };
    },
  },
  async run(event) {
    const { bodyRaw } = event;
    this._sendHttpResponse(true);
    const data = this._unwrapMessage(bodyRaw);
    if (!(await this._isValidSource(data))) {
      console.log("Skipping event from unrecognized source");
      return;
    }

    let notifications = data.Notification;
    if (!Array.isArray(notifications)) {
      notifications = [
        data.Notification,
      ];
    }

    notifications.forEach((n) => {
      const notification = Object.assign(data, {
        Notification: n,
      });
      this.$emit(notification, this.generateMeta(notification));
    });
  },
};

Trigger Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI and CLI.

Label	Prop	Type	Description
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.
N/A	`http`	`$.interface.http`	This component uses `$.interface.http` to generate a unique URL when the component is first instantiated. Each request to the URL will trigger the `run()` method of the component.
Salesforce	`salesforce`	`app`	This component uses the Salesforce app.

Trigger Authentication#

Salesforce uses OAuth authentication. When you connect your Salesforce account, Pipedream will open a popup window where you can sign into Salesforce and grant Pipedream permission to connect to your account. Pipedream securely stores and automatically refreshes the OAuth tokens so you can easily authenticate any Salesforce API.

Pipedream requests the following authorization scopes when you connect your account:

About Salesforce#

Web services API for interacting with Salesforce

Action#

Create Timeline on Shotstack

Description:Generate a timeline with layers and assets for a new video project. [See the documentation here](https://github.com/shotstack/shotstack-sdk-node#timeline).

Version:0.0.1

Key:shotstack-create-timeline

View on GitHub

Shotstack Overview#

The Shotstack API is a video editing platform that allows you to automate the creation and production of videos. With it, you can edit clips, add transitions, overlays, and backgrounds, and even include music in your videos. Integrating Shotstack with Pipedream can supercharge your workflow by automating the video creation process. You can trigger video edits in response to various events, manage assets, or even kick off rendering jobs based on data from other apps and services.

Action Code#

import app from "../../shotstack.app.mjs";
import constants from "../../common/constants.mjs";

const { SEP } = constants;

export default {
  key: "shotstack-create-timeline",
  name: "Create Timeline",
  description: "Generate a timeline with layers and assets for a new video project. [See the documentation here](https://github.com/shotstack/shotstack-sdk-node#timeline).",
  type: "action",
  version: "0.0.1",
  props: {
    app,
    howManyTracks: {
      type: "integer",
      label: "How Many Tracks?",
      description: "The number of tracks to create.",
      reloadProps: true,
      min: 1,
    },
    soundtrackSrc: {
      type: "string",
      label: "Soundtrack Source",
      description: "The URL of the soundtrack to use.",
      optional: true,
    },
    soundtrackEffect: {
      type: "string",
      label: "Soundtrack Effect",
      description: "The effect to apply to the soundtrack.",
      optional: true,
      options: Object.values(constants.SOUNDTRACK_EFFECT),
    },
    background: {
      type: "string",
      label: "Background",
      description: "A hexadecimal value for the timeline background colour. Defaults to `#000000` (black).",
      optional: true,
    },
    fonts: {
      type: "string[]",
      label: "Fonts",
      description: "An array of custom fonts to be downloaded for use by the HTML assets. The URL must be publicly accessible or include credentials. E.g. `https://s3-ap-northeast-1.amazonaws.com/my-bucket/open-sans.ttf`",
      optional: true,
    },
  },
  methods: {
    getClip({
      start, length, type, src, text, html,
    }) {
      return {
        start,
        length,
        asset: {
          src,
          html,
          text,
          type,
        },
      };
    },
    getClips(trackNumber, assetType, length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const clipNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const clipName = `${trackName}${SEP}clip${clipNumber}${SEP}${assetType}`;
        const clipAssetStart = `${clipName}${SEP}start`;
        const clipAssetLength = `${clipName}${SEP}length`;
        const clipAssetSrc = `${clipName}${SEP}src`;
        const clipAssetText = `${clipName}${SEP}text`;
        const clipAssetHtml = `${clipName}${SEP}html`;
        return this.getClip({
          start: this[clipAssetStart],
          length: this[clipAssetLength],
          type: assetType,
          src: this[clipAssetSrc],
          text: this[clipAssetText],
          html: this[clipAssetHtml],
        });
      });
    },
    getTracks(length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const trackNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const trackHowManyVideoClips = `${trackName}${SEP}HowManyVideoClips`;
        const trackHowManyImageClips = `${trackName}${SEP}HowManyImageClips`;
        const trackHowManyAudioClips = `${trackName}${SEP}HowManyAudioClips`;
        const trackHowManyTitleClips = `${trackName}${SEP}HowManyTitleClips`;
        const trackHowManyHtmlClips = `${trackName}${SEP}HowManyHtmlClips`;
        const trackHowManyLumaClips = `${trackName}${SEP}HowManyLumaClips`;
        return {
          clips: [
            ...this.getClips(trackNumber, constants.ASSET_TYPE.VIDEO, this[trackHowManyVideoClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.IMAGE, this[trackHowManyImageClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.AUDIO, this[trackHowManyAudioClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.TITLE, this[trackHowManyTitleClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.HTML, this[trackHowManyHtmlClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.LUMA, this[trackHowManyLumaClips]),
          ],
        };
      });
    },
    getClipProps(trackNumber, assetType, length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const clipNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const clipName = `${trackName}${SEP}clip${clipNumber}${SEP}${assetType}`;
        const clipAssetStart = `${clipName}${SEP}start`;
        const clipAssetLength = `${clipName}${SEP}length`;
        const description = `Track ${trackNumber} - ${assetType} clip ${clipNumber}.`;

        const commonProps = {
          [clipAssetStart]: {
            type: "integer",
            label: "Start",
            description: `${description} The start time of the asset`,
          },
          [clipAssetLength]: {
            type: "integer",
            label: "Length",
            description: `${description} The length of the asset.`,
          },
        };

        if (assetType === constants.ASSET_TYPE.TITLE) {
          return {
            ...commonProps,
            [`${clipName}${SEP}text`]: {
              type: "string",
              label: "Text",
              description: `${description} The text of the title.`,
            },
          };
        }

        if (assetType === constants.ASSET_TYPE.HTML) {
          return {
            ...commonProps,
            [`${clipName}${SEP}html`]: {
              type: "string",
              label: "HTML",
              description: `${description} The HTML of the asset.`,
            },
          };
        }

        return {
          ...commonProps,
          [`${clipName}${SEP}src`]: {
            type: "string",
            label: "Source",
            description: `${description} The source url of the asset.`,
          },
        };
      })
        .reduce((acc, next) => ({
          ...acc,
          ...next,
        }), {});
    },
  },
  additionalProps() {
    return Array.from({
      length: this.howManyTracks,
    }).reduce((acc, _, index) => {
      const trackNumber = index + 1;
      const trackName = `track${trackNumber}`;
      const trackHowManyVideoClips = `${trackName}${SEP}HowManyVideoClips`;
      const trackHowManyImageClips = `${trackName}${SEP}HowManyImageClips`;
      const trackHowManyAudioClips = `${trackName}${SEP}HowManyAudioClips`;
      const trackHowManyTitleClips = `${trackName}${SEP}HowManyTitleClips`;
      const trackHowManyHtmlClips = `${trackName}${SEP}HowManyHtmlClips`;
      const trackHowManyLumaClips = `${trackName}${SEP}HowManyLumaClips`;
      const commonDescription = `Track ${trackNumber}:`;

      return {
        ...acc,
        [trackHowManyVideoClips]: {
          type: "integer",
          label: "How Many Video Clips?",
          description: `${commonDescription} The number of video clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyImageClips]: {
          type: "integer",
          label: "How Many Image Clips?",
          description: `${commonDescription} The number of image clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyAudioClips]: {
          type: "integer",
          label: "How Many Audio Clips?",
          description: `${commonDescription} The number of audio clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyTitleClips]: {
          type: "integer",
          label: "How Many Title Clips?",
          description: `${commonDescription} The number of title clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyHtmlClips]: {
          type: "integer",
          label: "How Many HTML Clips?",
          description: `${commonDescription} The number of HTML clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyLumaClips]: {
          type: "integer",
          label: "How Many Luma Clips?",
          description: `${commonDescription} The number of luma clips to create.`,
          reloadProps: true,
          optional: true,
        },
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.VIDEO, this[trackHowManyVideoClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.IMAGE, this[trackHowManyImageClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.AUDIO, this[trackHowManyAudioClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.TITLE, this[trackHowManyTitleClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.HTML, this[trackHowManyHtmlClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.LUMA, this[trackHowManyLumaClips]),
      };
    }, {});
  },
  async run({ $: step }) {
    const {
      howManyTracks,
      soundtrackSrc,
      soundtrackEffect,
      background,
      fonts,
    } = this;

    const timeline = {
      soundtrack: {
        src: soundtrackSrc,
        effect: soundtrackEffect,
      },
      background,
      fonts: Array.isArray(fonts)
        ? fonts.map((src) => ({
          src,
        }))
        : fonts?.split(",").map((src) => ({
          src,
        })),
      tracks: this.getTracks(howManyTracks),
    };

    step.export("$summary", "Successfully created a timeline.");

    return timeline;
  },
};

Action Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI.

Label	Prop	Type	Description
Shotstack	`app`	`app`	This component uses the Shotstack app.
How Many Tracks?	`howManyTracks`	`integer`	The number of tracks to create.
Soundtrack Source	`soundtrackSrc`	`string`	The URL of the soundtrack to use.
Soundtrack Effect	`soundtrackEffect`	`string`	Select a value from the drop down menu:`{ "label": "Fade volume in only", "value": "fadeIn" }{ "label": "Fade volume out only", "value": "fadeOut" }{ "label": "Fade volume in and out", "value": "fadeInFadeOut" }`
Background	`background`	`string`	A hexadecimal value for the timeline background colour. Defaults to `#000000` (black).
Fonts	`fonts`	`string[]`	An array of custom fonts to be downloaded for use by the HTML assets. The URL must be publicly accessible or include credentials. E.g. `https://s3-ap-northeast-1.amazonaws.com/my-bucket/open-sans.ttf`

Action Authentication#

Shotstack uses API keys for authentication. When you connect your Shotstack account, Pipedream securely stores the keys so you can easily authenticate to Shotstack APIs in both code and no-code steps.

About Shotstack#

Revolutionizing how video is built. Create, edit and distribute thousands of bespoke, data driven videos in minutes with Shotstack.

More Ways to Connect Shotstack + Salesforce#

Other Popular Integrations#

Start Render with Shotstack API on New Object (of Selectable Type) from Salesforce (REST API) API

Salesforce + Shotstack

Create Timeline with Shotstack API on New Outbound Message (Instant) from Salesforce API

Pipedream makes it easy to connect APIs for Shotstack, Salesforce and 2,400+ other apps remarkably fast.

Trusted by 1,000,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

1-24of2,400+apps by most popular

1
-
24
of
2,400+
apps by most popular