← HubSpot + Google Slides integrations

Create Image with Google Slides API on New Contact Added to List from HubSpot API

Pipedream makes it easy to connect APIs for Google Slides, HubSpot and 3,000+ other apps remarkably fast.

Trigger workflow on
New Contact Added to List from the HubSpot API
Next, do this
Create Image with the Google Slides API
No credit card required
Intro to Pipedream
Watch us build a workflow
Watch us build a workflow
8 min
Watch now ➜

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

Adyen logo
Appcues logo
Bandwidth logo
Checkr logo
ChartMogul logo
Dataminr logo
Gopuff logo
Gorgias logo
LinkedIn logo
Logitech logo
Replicated logo
Rudderstack logo
SAS logo
Scale AI logo
Webflow logo
Warner Bros. logo
Adyen logo
Appcues logo
Bandwidth logo
Checkr logo
ChartMogul logo
Dataminr logo
Gopuff logo
Gorgias logo
LinkedIn logo
Logitech logo
Replicated logo
Rudderstack logo
SAS logo
Scale AI logo
Webflow logo
Warner Bros. logo

Developers Pipedream

Getting Started

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

  1. Select this integration
  2. Configure the New Contact Added to List trigger
    1. Connect your HubSpot account
    2. Configure timer
    3. Configure info
    4. Select a List ID
    5. Optional- Select one or more Additional contact properties to retrieve
    6. Optional- Configure Fetch all contact properties
  3. Configure the Create Image action
    1. Connect your Google Slides account
    2. Select a Presentation
    3. Select a Slide ID
    4. Configure URL
    5. Configure Height
    6. Configure Width
    7. Optional- Configure Scale X
    8. Optional- Configure Scale Y
    9. Optional- Configure Translate X
    10. Optional- Configure Translate Y
  4. Deploy the workflow
  5. Send a test event to validate your setup
  6. 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

Description:Emit new event when a contact is added to a HubSpot list. [See the documentation](https://developers.hubspot.com/docs/reference/api/crm/lists#get-%2Fcrm%2Fv3%2Flists%2F%7Blistid%7D%2Fmemberships%2Fjoin-order)
Version:0.0.9
Key:hubspot-new-contact-added-to-list

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,
  DEFAULT_CONTACT_PROPERTIES,
  API_PATH,
} from "../../common/constants.mjs";
import sampleEmit from "./test-event.mjs";

export default {
  ...common,
  key: "hubspot-new-contact-added-to-list",
  name: "New Contact Added to List",
  description:
    "Emit new event when a contact is added to a HubSpot list. [See the documentation](https://developers.hubspot.com/docs/reference/api/crm/lists#get-%2Fcrm%2Fv3%2Flists%2F%7Blistid%7D%2Fmemberships%2Fjoin-order)",
  version: "0.0.9",
  type: "source",
  dedupe: "unique",
  props: {
    ...common.props,
    info: {
      type: "alert",
      alertType: "info",
      content: `Properties:\n\`${DEFAULT_CONTACT_PROPERTIES.join(", ")}\``,
    },
    listId: {
      type: "string",
      label: "List ID",
      description: "Select the list to watch for new contacts",
      withLabel: true,
      async options({ page }) {
        const { lists } = await this.searchLists({
          data: {
            count: DEFAULT_LIMIT,
            offset: page * DEFAULT_LIMIT,
          },
        });
        return (
          lists?.map(({
            listId, name,
          }) => ({
            value: listId,
            label: name,
          })) || []
        );
      },
    },
    properties: {
      propDefinition: [
        common.props.hubspot,
        "contactProperties",
        () => ({
          excludeDefaultProperties: true,
        }),
      ],
      label: "Additional contact properties to retrieve",
      optional: true,
    },
    fetchAllProperties: {
      type: "boolean",
      label: "Fetch all contact properties",
      description:
        "When enabled, fetches all available contact properties instead of just default and selected properties. This provides complete contact data but may increase API usage.",
      optional: true,
      default: false,
    },
  },
  methods: {
    ...common.methods,
    _getKey(listId) {
      return `list_${listId}_last_timestamp`;
    },
    _getLastMembershipTimestamp(listId) {
      return this.db.get(this._getKey(listId));
    },
    _setLastMembershipTimestamp(listId, timestamp) {
      this.db.set(this._getKey(listId), timestamp);
    },
    searchLists(opts = {}) {
      return this.hubspot.makeRequest({
        api: API_PATH.CRMV3,
        method: "POST",
        endpoint: "/lists/search",
        ...opts,
      });
    },
    getTs() {
      return Date.now();
    },
    generateMeta(membership, listInfo) {
      const {
        recordId, membershipTimestamp,
      } = membership;
      const ts = membershipTimestamp
        ? new Date(membershipTimestamp).getTime()
        : this.getTs();

      return {
        id: `${listInfo.listId}-${recordId}-${ts}`,
        summary: `Contact ${recordId} added to list: ${listInfo.name}`,
        ts,
      };
    },
    async getContactDetails(contactIds) {
      if (!contactIds.length) return {};

      if (this.fetchAllProperties) {
        const chunks = [];
        const chunkSize = 100;
        for (let i = 0; i < contactIds.length; i += chunkSize) {
          chunks.push(contactIds.slice(i, i + chunkSize));
        }

        const contactMap = {};

        try {
          for (const chunk of chunks) {
            try {
              const { results } = await this.hubspot.batchGetContactsWithAllProperties({
                contactIds: chunk,
              });

              results.forEach((contact) => {
                contactMap[contact.id] = contact;
              });
            } catch (error) {
              console.warn(
                `Error fetching contact details for chunk of ${chunk.length} contacts:`,
                error,
              );
            }
          }

          return contactMap;
        } catch (error) {
          console.warn("Error processing contact details:", error);
          return {};
        }
      }

      const { properties = [] } = this;
      const allProperties = [
        ...DEFAULT_CONTACT_PROPERTIES,
        ...properties,
      ];

      const chunks = [];
      const chunkSize = 100;
      for (let i = 0; i < contactIds.length; i += chunkSize) {
        chunks.push(contactIds.slice(i, i + chunkSize));
      }

      const contactMap = {};

      try {
        for (const chunk of chunks) {
          try {
            const { results } = await this.hubspot.batchGetObjects({
              objectType: "contacts",
              data: {
                inputs: chunk.map((id) => ({
                  id,
                })),
                properties: allProperties,
              },
            });

            results.forEach((contact) => {
              contactMap[contact.id] = contact;
            });
          } catch (error) {
            console.warn(
              `Error fetching contact details for chunk of ${chunk.length} contacts:`,
              error,
            );
          }
        }

        return contactMap;
      } catch (error) {
        console.warn("Error processing contact details:", error);
        return {};
      }
    },
    async processListMemberships(listId, listInfo) {
      const lastMembershipTimestamp = this._getLastMembershipTimestamp(listId);
      const newMemberships = [];

      let params = {
        limit: DEFAULT_LIMIT,
      };

      try {
        let hasMore = true;
        let latestMembershipTimestamp = lastMembershipTimestamp;

        if (!lastMembershipTimestamp) {
          const baselineTimestamp = new Date().toISOString();
          this._setLastMembershipTimestamp(listId, baselineTimestamp);
          return newMemberships;
        }

        while (hasMore) {
          const {
            results, paging,
          } =
            await this.hubspot.getListMembershipsByJoinOrder({
              listId,
              params,
            });

          if (!results) {
            console.warn(
              `No results returned from API for list ${listId} - possible API issue`,
            );
            break;
          }

          if (results.length === 0) {
            break;
          }

          for (const membership of results) {
            const { membershipTimestamp } = membership;

            if (membershipTimestamp > lastMembershipTimestamp) {
              newMemberships.push({
                membership,
                listInfo,
              });

              if (
                !latestMembershipTimestamp ||
                membershipTimestamp > latestMembershipTimestamp
              ) {
                latestMembershipTimestamp = membershipTimestamp;
              }
            }
          }

          if (paging?.next?.after) {
            params.after = paging.next.after;
          } else {
            hasMore = false;
          }
        }

        if (latestMembershipTimestamp !== lastMembershipTimestamp) {
          this._setLastMembershipTimestamp(listId, latestMembershipTimestamp);
        }
      } catch (error) {
        console.error(`Error processing list ${listId}:`, error);
      }

      return newMemberships;
    },
    async processResults() {
      if (!this.listId) {
        console.warn("No list selected to monitor");
        return;
      }

      const listId = this.listId?.value || this.listId;

      const listInfo = {
        listId,
        name: `List ${this.listId?.label || listId}`,
      };

      try {
        const newMemberships = await this.processListMemberships(
          listId,
          listInfo,
        );

        if (newMemberships.length > 0) {
          const contactIds = newMemberships.map(
            ({ membership }) => membership.recordId,
          );
          const contactDetails = await this.getContactDetails(contactIds);

          for (const {
            membership, listInfo,
          } of newMemberships) {
            const contactDetail = contactDetails[membership.recordId] || {};

            const eventData = {
              listId: listInfo.listId,
              listName: listInfo.name,
              contactId: membership.recordId,
              contact: contactDetail,
              membership,
              addedAt: membership.membershipTimestamp,
            };

            const meta = this.generateMeta(membership, listInfo);
            this.$emit(eventData, meta);
          }
        }
      } catch (error) {
        console.error(`Error processing list ${listId}:`, error);
      }
    },
    getParams() {
      return {};
    },
  },
  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.
LabelPropTypeDescription
HubSpothubspotappThis component uses the HubSpot app.
N/Adb$.service.dbThis component uses $.service.db to maintain state between executions.
timer$.interface.timer
List IDlistIdstringSelect a value from the drop down menu.
Additional contact properties to retrievepropertiesstring[]Select a value from the drop down menu.
Fetch all contact propertiesfetchAllPropertiesboolean

When enabled, fetches all available contact properties instead of just default and selected properties. This provides complete contact data but may increase API usage.

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.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.quotes.readcrm.schemas.listings.writecrm.schemas.listings.readcrm.importfilesformsforms-uploaded-filesoauthtimelineintegration-synccrm.schemas.deals.writecrm.lists.writeconversations.readconversations.write

About HubSpot

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

Action

Description:Creates an image in a slide. [See the documentation](https://developers.google.com/workspace/slides/api/reference/rest/v1/presentations/request#CreateImageRequest)
Version:0.0.3
Key:google_slides-create-image

Google Slides Overview

The Google Slides API allows you to create, read, and edit Google Slides presentations programmatically. With Pipedream's integration, you can automate your slide workflows, enabling dynamic content updates, collaboration enhancements, and streamlined reporting. By plugging into Pipedream's serverless platform, you can trigger slide creation or updates based on events from other apps, process data for presentations, and handle sharing and publishing tasks—all with minimal fuss.

Action Code

import googleSlides from "../../google_slides.app.mjs";

export default {
  key: "google_slides-create-image",
  name: "Create Image",
  description: "Creates an image in a slide. [See the documentation](https://developers.google.com/workspace/slides/api/reference/rest/v1/presentations/request#CreateImageRequest)",
  version: "0.0.3",
  annotations: {
    destructiveHint: false,
    openWorldHint: true,
    readOnlyHint: false,
  },
  type: "action",
  props: {
    googleSlides,
    presentationId: {
      propDefinition: [
        googleSlides,
        "presentationId",
      ],
    },
    slideId: {
      propDefinition: [
        googleSlides,
        "slideId",
        (c) => ({
          presentationId: c.presentationId,
        }),
      ],
    },
    url: {
      type: "string",
      label: "URL",
      description: "The URL of the image to insert",
    },
    height: {
      type: "integer",
      label: "Height",
      description: "The height of the shape in points (1/72 of an inch)",
    },
    width: {
      type: "integer",
      label: "Width",
      description: "The width of the shape in points (1/72 of an inch)",
    },
    scaleX: {
      type: "integer",
      label: "Scale X",
      description: "The scale of the shape on the x-axis",
      default: 1,
      optional: true,
    },
    scaleY: {
      type: "integer",
      label: "Scale Y",
      description: "The scale of the shape on the y-axis",
      default: 1,
      optional: true,
    },
    translateX: {
      type: "integer",
      label: "Translate X",
      description: "The translation of the shape on the x-axis",
      default: 0,
      optional: true,
    },
    translateY: {
      type: "integer",
      label: "Translate Y",
      description: "The translation of the shape on the y-axis",
      default: 0,
      optional: true,
    },
  },
  async run({ $ }) {
    const response = await this.googleSlides.createImage(this.presentationId, {
      url: this.url,
      elementProperties: {
        pageObjectId: this.slideId,
        size: {
          height: {
            magnitude: this.height,
            unit: "PT",
          },
          width: {
            magnitude: this.width,
            unit: "PT",
          },
        },
        transform: {
          scaleX: this.scaleX,
          scaleY: this.scaleY,
          translateX: this.translateX,
          translateY: this.translateY,
          unit: "PT",
        },
      },
    });
    $.export("$summary", `Successfully created image with ID: ${response.data.replies[0].createImage.objectId}`);
    return response.data;
  },
};

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.

LabelPropTypeDescription
Google SlidesgoogleSlidesappThis component uses the Google Slides app.
PresentationpresentationIdstringSelect a value from the drop down menu.
Slide IDslideIdstringSelect a value from the drop down menu.
URLurlstring

The URL of the image to insert

Heightheightinteger

The height of the shape in points (1/72 of an inch)

Widthwidthinteger

The width of the shape in points (1/72 of an inch)

Scale XscaleXinteger

The scale of the shape on the x-axis

Scale YscaleYinteger

The scale of the shape on the y-axis

Translate XtranslateXinteger

The translation of the shape on the x-axis

Translate YtranslateYinteger

The translation of the shape on the y-axis

Action Authentication

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

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

emailprofilehttps://www.googleapis.com/auth/drivehttps://www.googleapis.com/auth/drive.file

About Google Slides

Create, edit, and collaborate on presentations with the Google Slides app.

More Ways to Connect Google Slides + HubSpot

Create Presentation with Google Slides API on Company Updated from HubSpot API
HubSpot + Google Slides
 
Try it
Create Presentation with Google Slides API on Contact Updated from HubSpot API
HubSpot + Google Slides
 
Try it
Create Presentation with Google Slides API on Deal Updated from HubSpot API
HubSpot + Google Slides
 
Try it
Create Presentation with Google Slides API on Line Item Updated from HubSpot API
HubSpot + Google Slides
 
Try it
Create Presentation with Google Slides API on New Blog Posts from HubSpot API
HubSpot + Google Slides
 
Try it
Deleted Blog Posts from the HubSpot API

Emit new event for each deleted blog post.

 
Try it
New Company Property Change from the HubSpot API

Emit new event when a specified property is provided or updated on a company. See the documentation

 
Try it
New Contact Added to List from the HubSpot API

Emit new event when a contact is added to a HubSpot list. See the documentation

 
Try it
New Contact Property Change from the HubSpot API

Emit new event when a specified property is provided or updated on a contact. See the documentation

 
Try it
New Custom Object Property Change from the HubSpot API

Emit new event when a specified property is provided or updated on a custom object.

 
Try it
Add Comment with the HubSpot API

Adds a comment to a thread. See the documentation

 
Try it
Add Contact to List with the HubSpot API

Adds a contact to a specific static list. See the documentation

 
Try it
Batch Create Companies with the HubSpot API

Create a batch of companies in Hubspot. See the documentation

 
Try it
Batch Create or Update Contact with the HubSpot API

Create or update a batch of contacts by its ID or email. See the documentation

 
Try it
Batch Update Companies with the HubSpot API

Update a batch of companies in Hubspot. See the documentation

 
Try it

Explore Other Apps

1
-
24
of
3,000+
apps by most popular

Node
Node
Anything you can do with Node.js, you can do in a Pipedream workflow. This includes using most of npm's 400,000+ packages.
Python
Python
Anything you can do in Python can be done in a Pipedream Workflow. This includes using any of the 350,000+ PyPi packages available in your Python powered workflows.
Notion
Notion
Notion is a new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
OpenAI (ChatGPT)
OpenAI (ChatGPT)
OpenAI is an AI research and deployment company with the mission to ensure that artificial general intelligence benefits all of humanity. They are the makers of popular models like ChatGPT, DALL-E, and Whisper.
Anthropic (Claude)
Anthropic (Claude)
AI research and products that put safety at the frontier. Introducing Claude, a next-generation AI assistant for your tasks, no matter the scale.
Google Sheets
Google Sheets
Use Google Sheets to create and edit online spreadsheets. Get insights together with secure sharing in real-time and from any device.
Telegram
Telegram
Telegram, is a cloud-based, cross-platform, encrypted instant messaging (IM) service.
Google Drive
Google Drive
Google Drive is a file storage and synchronization service which allows you to create and share your work online, and access your documents from anywhere.
HTTP / Webhook
HTTP / Webhook
Get a unique URL where you can send HTTP or webhook requests
Google Calendar
Google Calendar
With Google Calendar, you can quickly schedule meetings and events and get reminders about upcoming activities, so you always know what’s next.
Schedule
Schedule
Trigger workflows on an interval or cron schedule.
Pipedream Utils
Pipedream Utils
Utility functions to use within your Pipedream workflows
Shopify
Shopify
Shopify is a complete commerce platform that lets anyone start, manage, and grow a business. You can use Shopify to build an online store, manage sales, market to customers, and accept payments in digital and physical locations.
Supabase
Supabase
Supabase is an open source Firebase alternative.
MySQL
MySQL
MySQL is an open-source relational database management system.
PostgreSQL
PostgreSQL
PostgreSQL is a free and open-source relational database management system emphasizing extensibility and SQL compliance.
AWS
AWS
Premium
Amazon Web Services (AWS) offers reliable, scalable, and inexpensive cloud computing services.
Twilio SendGrid
Twilio SendGrid
Premium
Send marketing and transactional email through the Twilio SendGrid platform with the Email API, proprietary mail transfer agent, and infrastructure for scalable delivery.
Amazon SES
Amazon SES
Amazon SES is a cloud-based email service provider that can integrate into any application for high volume email automation
Klaviyo
Klaviyo
Premium
Klaviyo unifies your data, channels, and AI agents in one platform—text, WhatsApp, email marketing, and more—driving growth with every interaction.
Zendesk
Zendesk
Premium
Zendesk is award-winning customer service software trusted by 200K+ customers. Make customers happy via text, mobile, phone, email, live chat, social media.
ServiceNow
ServiceNow
Premium
Beta
The smarter way to workflow
Slack
Slack
Slack is the AI-powered platform for work bringing all of your conversations, apps, and customers together in one place. Around the world, Slack is helping businesses of all sizes grow and send productivity through the roof.
Microsoft Teams
Microsoft Teams
Microsoft Teams has communities, events, chats, channels, meetings, storage, tasks, and calendars in one place.