Optimize Image with ShortPixel API on New Deal In Stage from HubSpot API

Pipedream makes it easy to connect APIs for ShortPixel, HubSpot and 2,500+ other apps remarkably fast.

Trigger workflow on

New Deal In Stage from the HubSpot API

Next, do this

Optimize Image with the ShortPixel 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 HubSpot trigger and ShortPixel action. When you configure and deploy the workflow, it will run on Pipedream's servers 24x7 for free.

Select this integration
Configure the New Deal In Stage trigger
1. Connect your HubSpot account
2. Configure timer
3. Select a Pipeline
4. Select one or more Stages
Configure the Optimize Image action
1. Connect your ShortPixel account
2. Configure URL
3. Optional- Configure Width
4. Optional- Configure Height
5. Optional- Select a Crop Style
6. Optional- Select a Quality
7. Optional- Configure Filename
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 Deal In Stage on HubSpot

Description:Emit new event for each new deal in a stage.

Version:0.0.24

Key:hubspot-new-deal-in-stage

View on GitHub

HubSpot Overview#

The HubSpot API enables developers to integrate into HubSpots CRM, CMS, Conversations, and other features. It allows for automated management of contacts, companies, deals, and marketing campaigns, enabling custom workflows, data synchronization, and task automation. This streamlines operations and boosts customer engagement, with real-time updates for rapid response to market changes.

Trigger Code#

import common from "../common/common.mjs";
import { DEFAULT_LIMIT } from "../../common/constants.mjs";
import sampleEmit from "./test-event.mjs";

export default {
  ...common,
  key: "hubspot-new-deal-in-stage",
  name: "New Deal In Stage",
  description: "Emit new event for each new deal in a stage.",
  version: "0.0.24",
  dedupe: "unique",
  type: "source",
  props: {
    ...common.props,
    pipeline: {
      propDefinition: [
        common.props.hubspot,
        "dealPipeline",
      ],
    },
    stages: {
      propDefinition: [
        common.props.hubspot,
        "stages",
        (c) => ({
          pipeline: c.pipeline,
        }),
      ],
    },
  },
  methods: {
    ...common.methods,
    async getTs(deal) {
      const { properties } = await this.hubspot.getDeal({
        dealId: deal.id,
        params: {
          includePropertyVersions: true,
        },
      });
      return properties.dealstage?.versions[0].timestamp;
    },
    emitEvent(deal, ts) {
      const {
        id,
        properties,
      } = deal;
      this.$emit(deal, {
        id: `${id}${properties.dealstage}`,
        summary: `${properties.dealname}`,
        ts,
      });
    },
    isRelevant(ts, updatedAfter) {
      return ts > updatedAfter;
    },
    getParams() {
      return null;
    },
    getStageParams(stage) {
      const filter = {
        propertyName: "dealstage",
        operator: "EQ",
        value: stage,
      };
      const filterGroup = {
        filters: [
          filter,
        ],
      };
      return {
        data: {
          limit: DEFAULT_LIMIT,
          filterGroups: [
            filterGroup,
          ],
          sorts: [
            {
              propertyName: "hs_lastmodifieddate",
              direction: "DESCENDING",
            },
          ],
        },
        object: "deals",
      };
    },
    async processDeals(params, after) {
      let maxTs = after || 0;

      do {
        const results = await this.hubspot.searchCRM(params);
        if (results.paging) {
          params.after = results.paging.next.after;
        } else {
          delete params.after;
        }

        for (const deal of results.results) {
          const ts = await this.getTs(deal);
          if (this.isRelevant(ts, after)) {
            this.emitEvent(deal, ts);
            if (ts > maxTs) {
              maxTs = ts;
              this._setAfter(ts);
            }
          }
        }
      } while (params.after);
    },
    async processResults(after) {
      for (const stage of this.stages) {
        const params = this.getStageParams(stage);
        await this.processDeals(params, after);
      }
    },
  },
  sampleEmit,
};

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
HubSpot	`hubspot`	`app`	This component uses the HubSpot app.
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.
	`timer`	`$.interface.timer`
Pipeline	`pipeline`	`string`	Select a value from the drop down menu.
Stages	`stages`	`string[]`	Select a value from the drop down menu.

Trigger Authentication#

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

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

business-intelligencecrm.lists.readcrm.lists.writecrm.objects.companies.readcrm.objects.companies.writecrm.objects.contacts.readcrm.objects.contacts.writecrm.objects.deals.readcrm.objects.deals.writecrm.objects.quotes.readcrm.objects.quotes.writecrm.objects.owners.readcrm.objects.listings.writecrm.objects.listings.readcrm.schemas.companies.readcrm.schemas.companies.writecrm.schemas.contacts.readcrm.schemas.contacts.writecrm.schemas.deals.readcrm.schemas.deals.writecrm.schemas.quotes.readcrm.schemas.listings.writecrm.schemas.listings.readconversations.readcrm.importfilesformsforms-uploaded-filesintegration-syncoauthtimeline

About HubSpot#

HubSpot's CRM platform contains the marketing, sales, service, operations, and website-building software you need to grow your business.

Action#

Optimize Image on ShortPixel

Description:Optimize and/or adjust an image using ShortPixel. [See the documentation](https://shortpixel.com/knowledge-base/article/shortpixel-adaptive-images-api-parameters/)

Version:0.0.1

Key:shortpixel-optimize-image

View on GitHub

ShortPixel Overview#

The ShortPixel API is a powerful tool for optimizing images and PDFs to improve website load times and performance without sacrificing quality. With the ShortPixel API on Pipedream, you can build automated workflows that trigger image optimization processes, handle optimized data, and integrate this functionality with other apps. Pipedream's serverless platform allows for creating scalable and maintenance-free workflows, turning manual image optimization into automated, seamless operations.

Action Code#

import shortpixel from "../../shortpixel.app.mjs";
import { ConfigurationError } from "@pipedream/platform";
import fs from "fs";

export default {
  key: "shortpixel-optimize-image",
  name: "Optimize Image",
  description: "Optimize and/or adjust an image using ShortPixel. [See the documentation](https://shortpixel.com/knowledge-base/article/shortpixel-adaptive-images-api-parameters/)",
  version: "0.0.1",
  type: "action",
  props: {
    shortpixel,
    url: {
      type: "string",
      label: "URL",
      description: "The URL of the image to optimize",
    },
    width: {
      type: "integer",
      label: "Width",
      description: "The width in pixels of the new image",
      optional: true,
    },
    height: {
      type: "integer",
      label: "Height",
      description: "The height in pixels of the new image",
      optional: true,
    },
    cropStyle: {
      type: "string",
      label: "Crop Style",
      description: "The crop style, useful when both width and height are specified",
      options: [
        "top",
        "right",
        "bottom",
        "left",
        "center",
      ],
      optional: true,
    },
    quality: {
      type: "string",
      label: "Quality",
      description: "The quality setting of the new image",
      options: [
        "lqip",
        "lossless",
        "glossy",
        "lossy",
      ],
      optional: true,
    },
    filename: {
      type: "string",
      label: "Filename",
      description: "Optionally, enter a filename that will be used to save the image in /tmp",
      optional: true,
    },
  },
  methods: {
    buildParams() {
      const paramArray = [
        "ret_wait ",
      ];
      if (this.width) {
        paramArray.push(`w_${this.width}`);
      }
      if (this.height) {
        paramArray.push(`h_${this.height}`);
      }
      if (this.cropStyle) {
        paramArray.push(`c_${this.cropStyle}`);
      }
      if (this.quality) {
        paramArray.push(`q_${this.quality}`);
      }
      return paramArray.join(",");
    },
    downloadFileToTmp(file, filePath) {
      const rawcontent = file.toString("base64");
      const buffer = Buffer.from(rawcontent, "base64");
      fs.writeFileSync(filePath, buffer);
    },
  },
  async run({ $ }) {
    if (!this.width && !this.height && !this.cropStyle && !this.quality) {
      throw new ConfigurationError("Must enter at least one of `width`, `height`, `cropStyle`, or `quality`");
    }

    const params = this.buildParams();

    let response = {
      url: `${this.shortpixel._baseUrl()}/client/${params}/${this.url}`,
    };

    try {
      const image = await this.shortpixel.optimizeImage({
        $,
        params,
        url: this.url,
        responseType: "arraybuffer",
      });
      if (this.filename) {
        const filePath = this.filename.includes("tmp/")
          ? this.filename
          : `/tmp/${this.filename}`;
        this.downloadFileToTmp(image, filePath);
        response.filePath = filePath;
      }
    } catch {
      throw new Error(`Unable to process image at URL: ${this.url}`);
    }

    return response;
  },
};

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
ShortPixel	`shortpixel`	`app`	This component uses the ShortPixel app.
URL	`url`	`string`	The URL of the image to optimize
Width	`width`	`integer`	The width in pixels of the new image
Height	`height`	`integer`	The height in pixels of the new image
Crop Style	`cropStyle`	`string`	Select a value from the drop down menu:`toprightbottomleftcenter`
Quality	`quality`	`string`	Select a value from the drop down menu:`lqiplosslessglossylossy`
Filename	`filename`	`string`	Optionally, enter a filename that will be used to save the image in /tmp

Optimize Image with ShortPixel API on New Deal In Stage from HubSpot API

Pipedream makes it easy to connect APIs for ShortPixel, HubSpot and 2,500+ other apps remarkably fast.

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

Developers ♥ Pipedream

1-24of2,500+apps by most popular

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