Updating an external application (Asana, Jira, ClickUp, Monday.com, etc.) using Webhooks

Overview

The Webhooks feature in your Beefree account (Using Webhooks) can be leveraged to update external applications when someone comments on a design or the status of the design is updated in Beefree. This means that you can automatically keep the task up-to-date in your project management tool when an update has been posted in your Beefree account.

You can catch a webhook with any application that is able to do so, but in this article we will focus on a simple way to leverage a web automation tool like Zapier to take the information from a Beefree webhook and update a task in a project management tool.

Zapier is integrated with over 200 project management applications, so it's likely that you will find the one you are using. All you need is an "action" that allows you to post a comment to a task and/or update the task's status or other properties: Zapier will take information from your Beefree webhook and update the task in the project management tool.

Example: updating a task in Asana

In this tutorial, we will use Asana as a project management tool. Again, the same procedure shown here applies to pretty much any other project management application integrated with Zapier: Jira, ClickUp, Monday.com, Basecamp, ... you name it!

Our goal is to have a task updated in Asana when someone leaves a comment on an email or landing page that is being worked on in Beefree, or when the design status is changed.

For example, imagine that a nonprofit organization is working on a fundraising event and has created a task in Asana to track the design of the event invitation email. What they want is to have the task details in Asana reflect updates that happen in Beefree, where the email is being designed.

• When a comment is posted in Beefree, the same comment should be shown in the Asana in the task's "Comments" section.
• When the status of the email is changed in Beefree, the task should also be updated in Asana, and marked as "Complete" when the design has been approved in Beefree.

That way, the project management system is kept up-to-date with what's happening in the email design tool used by the organization.

Setting up the automation workflow

About zaps

Automation workflows in Zapier are called "zaps". They typically have a trigger, which starts the workflow, an action, which is the task to perform as a result of the trigger, and some steps in between.

In our case, we will:

• Use the webhook in Beefree as the trigger
• Extract the information we need from webhook's payload
• Use that information to update the task in Asana.

Creating a task in Asana

• Create a new task in Asana. It can be anything. For example, it could be called "Event invitation email"
• Look at the URL shown in the browser when viewing the task. It should look something like this: 

  https://app.asana.com/0/home/12094056447231/12094060175461

• Copy both numeric values from the URL.
  • The last one is the Task ID
  • The one before it is the Project ID
• You will need both to identify the task that needs to be updated in Asana.

Linking your design in Beefree to the task in Asana

• Log into your Beefree account.
• Locate the email(s) and/or landing page(s) connected to that task.
• Load the "Details" page, edit the design details, and add a tag as follows 

  taskid=TASK_ID

• ... where TASK_ID is the Task ID that you copied from Asana.
• Do the same for the Project ID.
• Save the new details.

The design "Details" page should now show the new tags below the name of the email or landing page. It should look something like this.

These new tags will be included in the webhook's payload, can be easily parsed to extract the two values, and will allow us to identify which task to update when calling Asana.

Catching the webhook

Now that we have the task created in Asana, and have linked the ID of that task to our design in Beefree, we can move on to configuring the trigger of our automation workflow.

Log into your Zapier account and create a new zap.

• If you are using the AI copilot, tell the copilot: "I want to catch a webhook, run some JavaScript code, and update a task in Asana". The copilot will create a zap with the three steps you need.
• Alternatively, simply add Webhooks by Zapier as the Trigger in the zap.
• Configure Webhooks by Zapier to "Catch Hook" and copy the "Webhook URL".
• Leave "Pick off a Child Key" empty.

Go back to your Beefree account, navigate to your Workspace settings, click on "Webhooks" and add a new webhook.

• Enter a name for your new webhook. It can be anything. Just pick something descriptive.
• Paste the webhook URL that you copied from Zapier. 
• For the "Trigger event", select "Comments".

Your new webhook should look something like this:

Click on "Save". The "Webhooks" page should now list your new webhook.

Now, go back to "Projects" in your Beefree account, select any email or landing page that you are working on, edit it to load the drag-n-drop builder, and leave a comment. This is important because it will trigger your new webhook, and pass information to Zapier that you will use when setting up the rest of the zap.

In Zapier, click on "Find new records" to catch this new webhook event. The event that you just created by leaving a comment in one of your designs should be listed. Select it, and click on "Continue".

Extracting the Task ID and Project ID

Webhooks carry multiple pieces of information in what's called the "payload" of the webhook. Beefree includes things like who left the comment, on which design, on what date & time, what they said in the comment, etc.

It also includes all the tags associated with the design. In order to know what task this comment should be posted to in Asana, you will need to extract the Task ID and Project ID from the tags associated with the design.

To do so, you will use a built-in feature in Zapier called "Code by Zapier".

• Add a "Code by Zapier" step to your zap.
• Set the "Action event" to "Run Javascript"
• In the "Input Data" section, add:
  • Key: tags
  • Value: Select the Tags array from the webhook payload.
• In the "Code" section, enter the following JavaScript code:

  // Split the comma-separated string into an array
  let tagsArray = inputData.tags.split(',');
  
  // Find the tags that start with "taskid=" and "projectid="
  let taskIdTag = tagsArray.find(tag => tag.startsWith('taskid='));
  let projectIdTag = tagsArray.find(tag => tag.startsWith('projectid='));
  
  // Extract the task ID and project ID if found
  let taskId = taskIdTag ? taskIdTag.split('=')[1] : null;
  let projectId = projectIdTag ? projectIdTag.split('=')[1] : null;
  
  return { taskId, projectId };

• Click on "Continue"

Posting a comment to a Task in Asana

Now that you have the Task ID and Project ID, you can use it together with the rest of the information included in the webhook's payload to update the task in Asana.

• Add a new step in the zap
• Select "Asana" as the application and "Create Comment/Story" as the action to be taken.
• Select the "Workspace".
• For the "Project" and "Task" fields, you will use the variables extracted from the webhook. Click on the three dots on the right, click on "Custom", and select the "Project ID" variable from the "Ran Javascript in Code by Zapier" step.
• Do the same for the "Task" field using the "Task ID" variable.
• In the "Text" field, you can use any of the variables that are available from the webhook, including the "Comment". For example, in the example below we used the "User name", "Design name" and then the "Comment".

The configuration for this step in the Zap should look something like this.

Test the zap to confirm that everything is working properly. The comment should be posted to the "Comments" section of that task in Asana.

You can now "Publish" the zap so that it runs the next time there is a webhook event in your Beefree account.

Setting a Task as complete in Asana

Now let's assume that you want the task in Asana to be set as Complete when the status of an email or landing page is set to Approved in Beefree. That's easy to do by configuring a new webhook that uses a change in "Design status" as the trigger event, and a new zap that will react to those status changes.

Follow the same steps as above to configure the webhook in your Beefree account:

• create a new zap in Zapier to obtain a new "Webhook URL".
• create a new webhook in Beefree, but this time choose "Design status" as the trigger event.
• take any design in your account and change its status to "Approved" to trigger a webhook event.
• go back to Zapier and follow the same steps to catch the webhook and extract the Task ID and Project ID from the webhook's payload.
• add a "Paths" step to decide what to do based on whether the design status has been updated to "Approved". To do so, configure "Path A" so that it uses "Custom rules" and it's configured to "Only continue if" the variable "Status Name" contains the value "approved". Your zap should look something like this:

• Continue "Path A" with the "Update task" event in Asana. 
• Configure "Mark Task as complete" as true, this time, and any of the other fields as you wish.
• Do not enter anything in the description, or it will overwrite the task description in Asana.
• If you want to post a comment to the task at the same time you are updating its status, you can add another "Create comment/story" step to the zap, and add a comment like: "This design was Approved in Beefree and therefore this task has been marked as Complete", as shown below.

• Finally, set "Path B" to be a "Fallback", meaning that the zap will follow that path in all other cases. Add a step to post a comment, without changing the task's status, as shown in the screenshot below.

You can now "Publish" the zap so that it runs the next time there is a webhook event in your Beefree account.