Using Webhooks

Overview

Many companies and agencies have adopted Beefree in their design workflows. We know every team has their own unique needs and workflows. However, most teams are in agreement - real-time notifications are a necessity. Beefree provides in-app and email notifications, but what if they are not in the app? What if they're not checking their email? That's where webhooks come in.

Webhooks enable you to send information one way from one platform to another. An example would be when you post a photo to Instagram, and it posts to other social media websites. Another example would be when you receive a message from an external tool in a messaging app in Slack.

We know that many of our customers have well-established procedures. Using webhooks allows you to seamlessly integrate Beefree into your existing workflow. For example, you can send notifications for new comments.

Getting Started

To get started with webhooks in Beefree, ensure you have the following:

• A Beefree Enterprise plan account
• Access to workspace settings permissions and a role of Owner, Admin, or Manager
• Access to a third-party automation tool, or a tool with webhooks functionality

Getting Started with a Third-Party Automation Tool

To get started with a third-party automation tool, take the following steps:

1. Select the automation tool that best suits your use case.
2. Create an account.
3. Create a new automation workflow.
   Note: These workflows have different names depending on the tool. At times they are referred to as “scenarios” or “zaps”. Regardless of the name, the functionality of event trigger workflows remains the same.
4. Select “webhooks” as the first component in your workflow.
5. Copy and save your webhook url, you will need to enter this into your Beefree webhook settings later on.
6. Select the notification platform you would like to receive notifications through. Ensure you connect it to the webhook you created in the previous step.
   Note: For your notification platform, you can connect to a variety of tool options. Slack and Gmail are popular options.
7. Follow the steps outlined in the Create a Webhook in Beefree section to connect your new automation workflow to Beefree.

Automating Notifications

Webhooks in Beefree enable you to automate notifications for comments or design statuses. Webhooks are specific to the workspace where they are created. These are currently the only two event triggers, but new ones may be added in the future. You can request new triggers you would like to see within Beefree in the future through this form. The following sections discuss both event triggers in more detail.

Comments

With webhooks, you can automatically push notifications for new comments on a design. The available trigger events for comments are the following:

• New replies
• Replies
• Mentions
• Resolved comments

You can use any or all of the following data details to the webhook in your custom notifications.

The following image shows an example of a webhook component within the tool Make. The screen shows the data details from a comment event trigger within Beefree, and the option to customize a notification using the Beefree data details.

Design Status Updates

With webhooks, you can automatically push notifications when the design status changes. The available trigger events for design status are the following:

• Draft
• In review
• Approved

The tool receiving the data will allow you to customize the notification format.

You can use any or all of the following data details to the webhook in your custom notifications.

Example Notification

The notification customization options are limitless. Through webhooks and a third party tool, you can create unique notification messages. Additionally, you can send these notifications almost anywhere.

The following is an example notification created with webhooks. You can see how we're using incoming data fields to create the notification.

Creating a webhook

1. Navigate to the Webhooks tab in your workspace settings. Each workspace can have its own unique webhooks.

2. Click Create a new webhook. If you already have a webhook set up, you'll see a button that says Create new instead.

3. Fill out all the fields in the modal.

• Name - Enter whatever name you would like to help you identify this webhook.
• Url destination - This information is provided by the third-party application. It's the URL the webhook sends requests to. 
• Trigger event - Use the dropdown to select Comments or Design Status notifications. 

We recommend using the Test button to ensure your external tool will receive the updates. A green checkmark will populate in the textbox if the test is successful. 

Once complete, click Create webhook and start receiving your notifications immediately. 

Edit a webhook

If you need to edit an existing webhook, click the pencil icon to the right of your webhook details. 

You can modify any of the fields for your webhook or test the URL again. Click the Save button to save your changes. 

Delete a webhook

To delete a webhook, click the red trash icon. A modal including a warning message will populate asking you want to proceed.

Use the Delete button to confirm you want to proceed. Beefree cannot predict any impacts this may have on your external workflows.