Add or Update Subscriber with Mailchimp API on New Comment (Instant) from Figma API

Pipedream makes it easy to connect APIs for Mailchimp, Figma and 2,000+ other apps remarkably fast.

Trigger workflow on

New Comment (Instant) from the Figma API

Next, do this

Add or Update Subscriber with the Mailchimp API

No credit card required

▶

Watch us build a workflow

4 min

Watch now ➜

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

Developers ♥ Pipedream

Getting Started#

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

Select this integration
Configure the New Comment (Instant) trigger
1. Configure alert
2. Connect your Figma account
Configure the Add or Update Subscriber action
1. Connect your Mailchimp account
2. Select a List Id
3. Select a Subscriber
4. Configure Email address
5. Optional- Configure Skip merge validation
6. Select a Status if new
7. Optional- Select a Email type
8. Optional- Select a Status
9. Optional- Configure Merge fields
10. Optional- Configure Interests
11. Optional- Configure Language
12. Optional- Configure Vip
13. Optional- Configure Latitude
14. Optional- Configure Longitude
15. Optional- Configure Marketing permission ID
16. Optional- Configure Marketing permissions enabled
17. Optional- Configure IP signup
18. Optional- Configure Timestamp signup
19. Optional- Configure IP opt in
20. Optional- Configure Timestamp opt in
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 Comment (Instant) on Figma

Description:Emit new event when someone comments on a file

Version:0.0.3

Key:figma-new-comment

View on GitHub

Figma Overview#

The Figma API unlocks the power to automate and integrate design workflows, enabling both designers and developers to extract assets, update designs, and manage files programmatically. By leveraging the Figma API on Pipedream, you can create automated processes that sync design updates with other tools, notify team members of changes, or feed design information into other parts of your digital ecosystem.

Trigger Code#

import { ConfigurationError } from "@pipedream/platform";
import { v4 as uuid } from "uuid";
import common from "../../common/common.mjs";

export default {
  ...common,
  key: "figma-new-comment",
  name: "New Comment (Instant)",
  description: "Emit new event when someone comments on a file",
  version: "0.0.3",
  type: "source",
  dedupe: "unique",
  props: {
    alert: {
      type: "alert",
      alertType: "info",
      content: "A Figma Organization Plan or higher is required to use webhooks. See Figma's [pricing page](https://www.figma.com/pricing) for more details.",
    },
    ...common.props,
    http: "$.interface.http",
    db: "$.service.db",
  },
  hooks: {
    async activate() {
      try {
        const passcode = uuid();
        this.setPasscode(passcode);

        const hookId = await this.figmaApp.createHook(
          "FILE_COMMENT",
          this.getTeamId(),
          this.http.endpoint,
          passcode,
        );

        this.setHookId(hookId);
      } catch (error) {
        if (error.response.status === 400) {
          throw new ConfigurationError("A Figma Organization Plan or higher is required to use webhooks. See Figma's [pricing page](https://www.figma.com/pricing) for more details.");
        }
        throw error;
      }
    },
    async deactivate() {
      await this.figmaApp.deleteHook(this.getHookId());
    },
  },
  methods: {
    ...common.methods,
    getHookId() {
      return this.db.get("hookId");
    },
    setHookId(hookId) {
      this.db.set("hookId", hookId);
    },
    getPasscode() {
      return this.db.get("passcode");
    },
    setPasscode(passcode) {
      this.db.set("passcode", passcode);
    },
  },
  async run(event) {
    this.http.respond({
      status: 200,
    });

    if (event.body.passcode === this.getPasscode()) {
      this.$emit(event.body, {
        summary: `New comment on a file (${event.body.comment_id})`,
        id: event.body.comment_id,
        ts: event.body.timestamp,
      });
    }
  },
};

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
Figma	`figmaApp`	`app`	This component uses the Figma app.
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.
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.

Trigger Authentication#

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

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

file_read

About Figma#

Figma is the leading collaborative design tool for building meaningful products.

Action#

Add or Update Subscriber on Mailchimp

Description:Adds a new subscriber to an audience or updates existing subscriber. [See docs here](https://mailchimp.com/developer/marketing/api/list-members/add-or-update-list-member/)

Version:0.2.2

Key:mailchimp-add-or-update-subscriber

View on GitHub

Mailchimp Overview#

The Mailchimp API taps into the heart of your email marketing efforts, allowing you to manage subscribers, campaigns, and reports. With the API, you can automate tasks like syncing subscriber lists, segmenting contacts based on behavior, and personalizing email content to match user profiles. It's a powerful tool for marketers looking to fine-tune their email strategy and maximize engagement.

Action Code#

import mailchimp from "../../mailchimp.app.mjs";
import { removeNullEntries } from "../../common/utils.mjs";
import constants from "../../common/constants.mjs";

export default {
  key: "mailchimp-add-or-update-subscriber",
  name: "Add or Update Subscriber",
  description: "Adds a new subscriber to an audience or updates existing subscriber. [See docs here](https://mailchimp.com/developer/marketing/api/list-members/add-or-update-list-member/)",
  version: "0.2.2",
  type: "action",
  props: {
    mailchimp,
    listId: {
      propDefinition: [
        mailchimp,
        "listId",
      ],
      label: "List Id",
      description: "The unique ID of the list",
    },
    subscriberHash: {
      propDefinition: [
        mailchimp,
        "subscriberHash",
        (c) => ({
          listId: c.listId,
        }),
      ],
    },
    emailAddress: {
      label: "Email address",
      type: "string",
      description: "Email address for a subscriber.",
    },
    skipMergeValidation: {
      label: "Skip merge validation",
      type: "boolean",
      description: "If skip_merge_validation is true, member data will be accepted without merge field values, even if the merge field is usually required. This defaults to False.",
      optional: true,
    },
    statusIfNew: {
      label: "Status if new",
      type: "string",
      description: "Subscriber's status. This value is required only if the email address is not already present on the list.",
      options: constants.STATUS,
    },
    emailType: {
      label: "Email type",
      type: "string",
      description: "Type of email this member asked to get ('html' or 'text').",
      optional: true,
      options: constants.EMAIL_TYPES,
    },
    status: {
      label: "Status",
      type: "string",
      description: "Subscriber's current status.",
      optional: true,
      options: constants.STATUS,
    },
    mergeFields: {
      label: "Merge fields",
      type: "object",
      description: "An individual merge var and value for a member.",
      optional: true,
    },
    interests: {
      label: "Interests",
      type: "object",
      description: "The key of this object's properties is the ID of the interest in question.",
      optional: true,
    },
    language: {
      label: "Language",
      type: "string",
      description: "If set/detected, the subscriber's language.",
      optional: true,
    },
    vip: {
      label: "Vip",
      type: "boolean",
      description: "VIP status for subscriber.",
      optional: true,
    },
    latitude: {
      label: "Latitude",
      type: "string",
      description: "The location latitude.",
      optional: true,
    },
    longitude: {
      label: "Longitude",
      type: "string",
      description: "The location longitude.",
      optional: true,
    },
    marketingPermissionId: {
      label: "Marketing permission ID",
      type: "string",
      description: "The ID for the marketing permission on the list.",
      optional: true,
    },
    marketingPermissionsEnabled: {
      label: "Marketing permissions enabled",
      type: "boolean",
      description: "If the subscriber has opted-in to the marketing permission.",
      optional: true,
    },
    ipSignup: {
      label: "IP signup",
      type: "string",
      description: "IP address the subscriber signed up from.",
      optional: true,
    },
    timestampSignup: {
      label: "Timestamp signup",
      type: "string",
      description: "The date and time the subscriber signed up for the list in ISO 8601 format.",
      optional: true,
    },
    ipOpt: {
      label: "IP opt in",
      type: "string",
      description: "The IP address the subscriber used to confirm their opt-in status.",
      optional: true,
    },
    timestampOpt: {
      label: "Timestamp opt in",
      type: "string",
      description: "The date and time the subscriber confirmed their opt-in status in ISO 8601 format.",
      optional: true,
    },
  },
  async run({ $ }) {

    const payload = removeNullEntries({
      listId: this.listId,
      subscriberHash: this.subscriberHash,
      data: {
        email_address: this.emailAddress,
        status_if_new: this.statusIfNew,
        email_type: this.emailType,
        status: this.status,
        merge_fields: this.mergeFields,
        interests: this.interests,
        language: this.language,
        vip: this.vip,
        location: {
          latitude: this.latitude && Number(this.latitude),
          longitude: this.longitude && Number(this.longitude),
        },
        marketing_permissions: [
          {
            marketing_permission_id: this.marketingPermissionId,
            enabled: this.marketingPermissionsEnabled,
          },
        ],
        ip_signup: this.ipSignup,
        timestamp_signup: this.timestampSignup,
        ip_opt: this.ipOpt,
        timestamp_opt: this.timestampOpt,
      },
      params: {
        skip_merge_validation: this.skipMergeValidation,
      },
    });
    const response = await this.mailchimp.addOrUpdateListMember($, payload);
    response && $.export("$summary", "Successful");
    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
Mailchimp	`mailchimp`	`app`	This component uses the Mailchimp app.
List Id	`listId`	`string`	Select a value from the drop down menu.
Subscriber	`subscriberHash`	`string`	Select a value from the drop down menu.
Email address	`emailAddress`	`string`	Email address for a subscriber.
Skip merge validation	`skipMergeValidation`	`boolean`	If skip_merge_validation is true, member data will be accepted without merge field values, even if the merge field is usually required. This defaults to False.
Status if new	`statusIfNew`	`string`	Select a value from the drop down menu:`subscribedunsubscribedcleanedpendingtransactional`
Email type	`emailType`	`string`	Select a value from the drop down menu:`htmltext`
Status	`status`	`string`	Select a value from the drop down menu:`subscribedunsubscribedcleanedpendingtransactional`
Merge fields	`mergeFields`	`object`	An individual merge var and value for a member.
Interests	`interests`	`object`	The key of this object's properties is the ID of the interest in question.
Language	`language`	`string`	If set/detected, the subscriber's language.
Vip	`vip`	`boolean`	VIP status for subscriber.
Latitude	`latitude`	`string`	The location latitude.
Longitude	`longitude`	`string`	The location longitude.
Marketing permission ID	`marketingPermissionId`	`string`	The ID for the marketing permission on the list.
Marketing permissions enabled	`marketingPermissionsEnabled`	`boolean`	If the subscriber has opted-in to the marketing permission.
IP signup	`ipSignup`	`string`	IP address the subscriber signed up from.
Timestamp signup	`timestampSignup`	`string`	The date and time the subscriber signed up for the list in ISO 8601 format.
IP opt in	`ipOpt`	`string`	The IP address the subscriber used to confirm their opt-in status.
Timestamp opt in	`timestampOpt`	`string`	The date and time the subscriber confirmed their opt-in status in ISO 8601 format.

Action Authentication#

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

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