← Twilio SendGrid + ClickUp integrations

Create Task with ClickUp APIon New Contact (Instant) from Twilio SendGrid API

Pipedream makes it easy to connect APIs for ClickUp, Twilio SendGrid and + other apps remarkably fast.

Trigger workflow on
New Contact (Instant) from the Twilio SendGrid API
Next, do this
Create Task with the ClickUp API
No credit card required
Trusted by 200,000+ developers from startups to Fortune 500 companies:
Trusted by 200,000+ developers from startups to Fortune 500 companies

Developers Pipedream

Getting Started

This integration creates a workflow with a Twilio SendGrid trigger and ClickUp 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 (Instant) trigger
    1. Connect your Twilio SendGrid account
    2. Configure timer
  3. Configure the Create Task action
    1. Connect your ClickUp account
    2. Select a Workspace
    3. Select a Space
    4. Optional- Select a Folder
    5. Optional- Configure Priority
    6. Select a List
    7. Configure Name
    8. Optional- Configure Description
    9. Optional- Select one or more Assignees
    10. Optional- Select one or more Tags
    11. Optional- Select a Status
    12. Optional- Configure Due Date
    13. Optional- Configure Due Date Time
    14. Optional- Configure Time Estimate
    15. Optional- Configure Start Date
    16. Optional- Configure Start Date Time
    17. Optional- Configure Notify All
    18. Optional- Select a Parent
    19. Optional- Select a Links To
    20. Optional- Configure Check Required Custom Fields
    21. Optional- Configure Custom Fields
  4. Deploy the workflow
  5. Send a test event to validate your setup
  6. Turn on the trigger

Details

This integration uses pre-built, open source 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 an event when a new contact is created
Version:0.0.2
Key:sendgrid-new-contact

Trigger Code

const orderBy = require("lodash/orderBy");

const common = require("../common/timer-based");

module.exports = {
  ...common,
  key: "sendgrid-new-contact",
  name: "New Contact (Instant)",
  description: "Emit an event when a new contact is created",
  version: "0.0.2",
  dedupe: "unique",
  hooks: {
    async activate() {
      const currentTimestamp = Date.now();
      const state = {
        processedItems: [],
        lowerTimestamp: currentTimestamp,
        upperTimestamp: currentTimestamp,
      };
      this.db.set("state", state);
    },
  },
  methods: {
    ...common.methods,
    _maxDelayTime() {
      // There is no report from SendGrid as to how much time it takes
      // for a contact to be created and appear in search results, so
      // we're using a rough estimate of 30 minutes here.
      return 30 * 60 * 1000;  // 30 minutes, in milliseconds
    },
    _addDelayOffset(timestamp) {
      return timestamp - this._maxDelayTime();
    },
    _cleanupOldProcessedItems(processedItems, currentTimestamp) {
      return processedItems
        .map((item) => ({
          // We just need to keep track of the record ID and
          // its creation date.
          id: item.id,
          created_at: item.created_at,
        }))
        .filter((item) => {
          const { created_at: createdAt } = item;
          const createdAtTimestamp = Date.parse(createdAt);
          const cutoffTimestamp = this._addDelayOffset(currentTimestamp);
          return createdAtTimestamp > cutoffTimestamp;
        });
    },
    _makeSearchQuery(processedItems, lowerTimestamp, upperTimestamp) {
      const idList = processedItems
        .map((item) => item.id)
        .map((id) => `'${id}'`)
        .join(", ")
      || "''";
      const startTimestamp = this._addDelayOffset(lowerTimestamp);
      const startDate = this.toISOString(startTimestamp);
      const endDate = this.toISOString(upperTimestamp);
      return `
        contact_id NOT IN (${idList}) AND
        created_at BETWEEN
          TIMESTAMP '${startDate}' AND
          TIMESTAMP '${endDate}'
      `;
    },
    generateMeta(data) {
      const {
        item,
        eventTimestamp: ts,
      } = data;
      const {
        id,
        email,
      } = item;
      const slugifiedEmail = this.slugifyEmail(email);
      const summary = `New contact: ${slugifiedEmail}`;
      return {
        id,
        summary,
        ts,
      };
    },
    async processEvent(event) {
      // Transform the timer timestamp to milliseconds
      // to be consistent with how Javascript handles timestamps.
      const eventTimestamp = event.timestamp * 1000;

      // Retrieve the current state of the component.
      const {
        processedItems,
        lowerTimestamp,
        upperTimestamp,
      } = this.db.get("state");

      // Search for contacts within a specific timeframe, excluding
      // items that have already been processed.
      const query = this._makeSearchQuery(processedItems, lowerTimestamp, upperTimestamp);
      const {
        result: items,
        contact_count: contactCount,
      } = await this.sendgrid.searchContacts(query);

      // If no contacts have been retrieved via the API,
      // move the time window forward to possibly capture newer contacts.
      if (contactCount === 0) {
        const newState = {
          processedItems: this._cleanupOldProcessedItems(processedItems, lowerTimestamp),
          lowerTimestamp: upperTimestamp,
          upperTimestamp: eventTimestamp,
        };
        this.db.set("state", newState);
        return;
      }

      // We process the searched records from oldest to newest.
      const itemsToProcess = orderBy(items, "created_at");
      itemsToProcess
        .forEach((item) => {
          const meta = this.generateMeta({
            item,
            eventTimestamp,
          });
          this.$emit(item, meta);
        });

      // Use the timestamp of the last processed record as a lower bound for
      // following searches. This bound will be subjected to an offset so in
      // case older records appear in future search results, but have not
      // appeared until now, can be processed. We only adjust it if it means
      // moving forward, not backwards. Otherwise, we might start retrieving
      // older and older records indefinitely (and we're all about *new*
      // records!)
      const newLowerTimestamp = Math.max(
        lowerTimestamp,
        Date.parse(itemsToProcess[0].created_at),
      );

      // If the total contact count is less than 100, it means that during the
      // next iteration the search results count will most likely be less than
      // 50. In that case, if we extend the upper bound of the search time range
      // we might be able to retrieve more records.
      const newUpperTimestamp = contactCount < 100
        ? eventTimestamp
        : upperTimestamp;

      // The list of processed items can grow indefinitely.
      // Since we don't want to keep track of every processed record
      // ever, we need to clean up this list, removing any records
      // that are no longer relevant.
      const newProcessedItems = this._cleanupOldProcessedItems(
        [
          ...processedItems,
          ...itemsToProcess,
        ],
        newLowerTimestamp,
      );

      // Update the state of the component to reflect the computations
      // made above.
      const newState = {
        processedItems: newProcessedItems,
        lowerTimestamp: newLowerTimestamp,
        upperTimestamp: newUpperTimestamp,
      };
      this.db.set("state", newState);
    },
  },
};

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
N/Adb$.service.dbThis component uses $.service.db to maintain state between component invocations.
Twilio SendGridsendgridappThis component uses the Twilio SendGrid app.
timer$.interface.timer

Trigger Authentication

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

When you create an API key, you assign scopes, or specific permissions, to the key. Sendgrid requires separate API keys for making billing-related API calls. To create an API key, navigate to Settings on the left navigation bar, and then select API keys.

More info: Creating an API key | API key permissions

About Twilio SendGrid

Delivering your transactional and marketing emails through the world's largest cloud-based email delivery platform. Send with confidence.

Action

Description:Creates a new task
Version:0.0.1
Key:clickup-create-task

Action Code

const common = require("../common.js");

module.exports = {
  ...common,
  key: "clickup-create-task",
  name: "Create Task",
  description: "Creates a new task",
  version: "0.0.1",
  type: "action",
  props: {
    ...common.props,
    list: {
      propDefinition: [
        common.props.clickup,
        "list",
        (c) => ({
          folder: c.folder,
          space: c.space,
        }),
      ],
    },
    name: {
      propDefinition: [
        common.props.clickup,
        "name",
      ],
      description: "New task name",
    },
    description: {
      type: "string",
      label: "Description",
      description: "New task description",
      optional: true,
    },
    assignees: {
      propDefinition: [
        common.props.clickup,
        "assignees",
        (c) => ({
          workspace: c.workspace,
        }),
      ],
    },
    tags: {
      propDefinition: [
        common.props.clickup,
        "tags",
        (c) => ({
          space: c.space,
        }),
      ],
    },
    status: {
      propDefinition: [
        common.props.clickup,
        "status",
        (c) => ({
          list: c.list,
        }),
      ],
    },
    dueDate: {
      propDefinition: [
        common.props.clickup,
        "dueDate",
      ],
      description:
        `The date by which you must complete the task. Use UTC time in 
        milliseconds (ex. 1508369194377)`,
    },
    dueDateTime: {
      propDefinition: [
        common.props.clickup,
        "dueDateTime",
      ],
      description:
        "Set to true if you want to enable the due date time for the task",
    },
    timeEstimate: {
      type: "integer",
      label: "Time Estimate",
      description: "Use milliseconds",
      optional: true,
    },
    startDate: {
      type: "integer",
      label: "Start Date",
      description:
        "The start date of the task. Use UTC time in milliseconds (ex. 1567780450202)",
      optional: true,
    },
    startDateTime: {
      type: "boolean",
      label: "Start Date Time",
      description: "Select true if you want to enable the start date time",
      optional: true,
    },
    notifyAll: {
      type: "boolean",
      label: "Notify All",
      description:
        `If Notify All is true, creation notifications will be sent to everyone including the 
        creator of the task.`,
      optional: true,
    },
    parent: {
      propDefinition: [
        common.props.clickup,
        "parent",
        (c) => ({
          list: c.list,
        }),
      ],
      optional: true,
    },
    linksTo: {
      propDefinition: [
        common.props.clickup,
        "task",
        (c) => ({
          list: c.list,
        }),
      ],
      label: "Links To",
      description:
        "Accepts a task ID to create a linked dependency on the new task",
      optional: true,
    },
    checkRequiredCustomFields: {
      type: "boolean",
      label: "Check Required Custom Fields",
      description:
        `Indicates whether or not your new task will include data for required 
        Custom Fields (true) or not (false). The default is false. If you set this option to true, 
        and do not include information for required Custom Fields, then you will receive an error 
        that 'One or more required fields is missing'.`,
      optional: true,
    },
    customFields: {
      type: "string[]",
      label: "Custom Fields",
      description: `An array of objects containing 'id' and 'value' keys.
        Example:
        {
          "id": "0a52c486-5f05-403b-b4fd-c512ff05131c",
          "value": 23
        },
      `,
      optional: true,
    },
  },
  async run() {
    const data = {
      name: this.name,
      description: this.description,
      assignees: this.assignees,
      tags: this.tags,
      status: this.status,
      priority: this.priority,
      due_date: this.dueDate,
      due_date_time: this.dueDateTime,
      time_estimate: this.timeEstimate,
      start_date: this.startDate,
      start_date_time: this.startDateTime,
      notify_all: this.notifyAll,
      parent: this.parent,
      links_to: this.linksTo,
      check_required_custom_fields: this.checkRequiredCustomFields,
      custom_fields: this.customFields,
    };
    return await this.clickup.createTask(this.list, 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
ClickUpclickupappThis component uses the ClickUp app.
WorkspaceworkspacestringSelect a value from the drop down menu.
SpacespacestringSelect a value from the drop down menu.
FolderfolderstringSelect a value from the drop down menu.
Prioritypriorityinteger

1 is Urgent
2 is High
3 is Normal
4 is Low

ListliststringSelect a value from the drop down menu.
Namenamestring

New task name

Descriptiondescriptionstring

New task description

Assigneesassigneesstring[]Select a value from the drop down menu.
Tagstagsstring[]Select a value from the drop down menu.
StatusstatusstringSelect a value from the drop down menu.
Due DatedueDateinteger

The date by which you must complete the task. Use UTC time in
milliseconds (ex. 1508369194377)

Due Date TimedueDateTimeboolean

Set to true if you want to enable the due date time for the task

Time EstimatetimeEstimateinteger

Use milliseconds

Start DatestartDateinteger

The start date of the task. Use UTC time in milliseconds (ex. 1567780450202)

Start Date TimestartDateTimeboolean

Select true if you want to enable the start date time

Notify AllnotifyAllboolean

If Notify All is true, creation notifications will be sent to everyone including the
creator of the task.

ParentparentstringSelect a value from the drop down menu.
Links TolinksTostringSelect a value from the drop down menu.
Check Required Custom FieldscheckRequiredCustomFieldsboolean

Indicates whether or not your new task will include data for required
Custom Fields (true) or not (false). The default is false. If you set this option to true,
and do not include information for required Custom Fields, then you will receive an error
that 'One or more required fields is missing'.

Custom FieldscustomFieldsstring[]

An array of objects containing 'id' and 'value' keys.
Example:
{
"id": "0a52c486-5f05-403b-b4fd-c512ff05131c",
"value": 23
},

Action Authentication

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

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

About ClickUp

One app to replace them all

About Pipedream

Stop writing boilerplate code, struggling with authentication and managing infrastructure. Start connecting APIs with code-level control when you need it — and no code when you don't.

Into to Pipedream
Watch us build a workflow
Watch us build a workflow
4 min
Watch now ➜
"The past few weeks, I truly feel like the clichéd 10x engineer."
@heyellieday
Powerful features that scale
Manage concurrency and execution rate
Manage concurrency and execution rate

Queue up to 10,000 events per workfow and manage the concurrency and rate at which workflows are triggered.

Process large payloads up to 5 terabytes
Process large payloads up to 5 terabytes

Large file support enables you to trigger workflows with any data (e.g., large JSON files, images and videos) up to 5 terabytes.

Return custom responses to HTTP requests
Return custom responses to HTTP requests

Return any JSON-serializable response from an HTTP triggered workflow using $respond().

Use most npm packages
Use most npm packages

To use any npm package, just require() it -- there's no npm install or package.json required.

Maintain state between executions
Maintain state between executions

Use $checkpoint to save state in one workflow invocation and read it the next time your workflow runs.

Pass data between steps
Pass data between steps

Return data from any step to inspect it in a human-friendly way and reference the data in future steps via the steps object.