Overview

Beefree offers a suite of connectors as an option for exporting your email or page designs to an external sending or marketing application, or email service provider (ESP). While this suite offers a comprehensive list of connectors, we wanted to offer an option for exporting your emails and pages to platforms that do not currently exist within our suite. For that use case, we developed a Custom connector. Through the Custom connector, you can export your Beefree emails and pages to any platform of your choosing. The Custom connector does this by leveraging webhooks to send your design HTML to the delivery platform of your choice. Continue reading this article to learn more about how to use this feature and export your HTML to any sending platform of your choosing.

You can also reference our Connect any platform to Beefree using the Custom Connector video tutorial to learn more about this feature.

Benefits

A few of the benefits of using a Custom connector are the following:

• If your platform is not offered within the Beefree connector suite, you can use Custom connector to create your own connection to any platform.
• If you need to send one design’s HTML to multiple platforms, Custom connector enables you to do so.
• Export HTML and design data to other platforms.

Prerequisites

Ensure you have the following prior to getting started with Custom connector:

• A Beefree account
• An external application account
• A webhook URL

Note: You can obtain a webhook URL in one of the following two ways:

• Use a no-code automation tool to create one.
• Develop your own API for webhooks. This is a technical option designed for customers with an internal development team.

Select a Platform

Prior to getting started with a Custom connector, it is important you first identify which platform you want to send your Beefree data to. You can reference Beefree’s current list of connectors in our Using connectors in Beefree article. If your sending platform is not listed in the article, use this feature, Custom connector, to configure a connection between your Beefree account and your platform.

How to Create a Webhook URL

Webhooks are a key component of creating a Custom connector. As a second step to getting started with Custom connectors, it is important that you create a webhook for the connector to send data from Beefree to. This section will cover how to create a webhook using a no-code automation tool like Zapier or Make. If you are more technical, or have a development team, you can also create your own webhook from scratch.  

Zapier Webhooks

Zapier is a popular no-code automation tool. To learn more about how to use Zapier to create a webhook and webhook trigger, reference the Trigger Zaps from webhooks article by Zapier.

Make Webhooks

Make is another popular no-code automation tool. To learn more about how to use Make to create a webhook, reference the Webhooks documentation by Make.

Develop a Webhook from Scratch

If you have a development team, you can also use an in-house webhook URL from your own API. Your internal development team will provide you with the webhook URL if you select this option. For high-level information on how to build a webhook, reference Building a Webhooks System with Event Driven Architecture by CodeOpinion.

Whether you decide to use a no-code automation tool, or you use an in-house webhook URL, it is important that the webhook URL returns a 200 response so that Beefree can verify that the connection to the URL works. As you configure your webhook, ensure it returns a 200 response.

How to Create a Custom connector

Once you have your webhook, you can move forward with configuring your Custom connector within Beefree.

Take the following steps to configure your Custom connector:

1. Log in to Beefree
2. Click Settings
3. Click Connectors
4. Navigate to Custom connector
5. Click Connect
   1. Enter the name of your Custom connector
   2. Enter the Custom connector url (the webhook url you created in the previous section)
   3. Confirm whether or not you would like to add headers with the toggle feature
   4. Click Connect to create your new Custom connector

Should I Include Headers?

Whether or not you decide to configure your Custom connector with headers is entirely up to you. When you use no-code automation tools like Zapier or Make, you do not need to add headers, because these tools will manage them automatically for you to ensure your webhook URL’s security. In this section, we will discuss what headers and values are. We will also list a few considerations to help you decide whether or not headers are right for you.

Introduction to Standard Headers for Webhooks

Standard headers are the basic settings that are automatically set up by the system that sends out webhooks. They're like labels that help different computer systems understand each other. Here are some of the most common ones:

1. Content-Type: This tells the receiving system what kind of information is being sent. For example, it might say "application/json" to show that the data is in a certain format.
2. User-Agent: This tells the receiving system what software is being used to send the webhook. It might say something like "Mozilla/5.0" to indicate a specific web browser.
3. Content-Length: This shows how much data is being sent, measured in bytes. It helps the receiving system prepare to handle the incoming information properly.
4. Accept or Accept-Encoding: These headers say what kind of response is expected from the system receiving the webhook. They tell the system what format or coding is preferred for the response.

Knowing about these basic headers is important when setting up webhooks, especially if you're using a tool that doesn't require coding. Understanding them helps make sure your data gets where it needs to go successfully.

Introduction to Custom Headers for Webhooks

Custom headers are like secret codes that make webhooks super safe and useful, especially when dealing with important stuff like client IDs and secret info. These headers are like pairs of keys and values that do big jobs, like checking if a webhook request is real and keeping it safe from sneaky folks who shouldn't see it.

Once a custom header joins a webhook, its value stays hidden in the system's secret part and can't be changed. This makes sure no one can mess with it, even if they can't see it on the screen.

In real life, custom headers do lots of cool things for webhook requests. They can sign the request to prove it's legit, give other ways to prove who's asking for it, like using special keys, or send extra info that didn't fit in the main request.

Also, custom headers can do even more, like adding special security codes called HMAC signatures. This makes sure the webhook's endpoint is super safe. By using these headers, people can keep their data safe.

You can learn more about headers, Key-value pairs, and webhooks in the Anatomy of a Webhook HTTP Request article.

Note: If you decide to add headers to your Custom connector within Beefree, make sure you add 10 or less. Beefree does not support over 10 headers.

Data

This section lists the data that could be sent through the webhook within the Custom connector. During the webhook configuration, you can decide what data you would like to transfer with the HTML.

The following table lists the available webhook data.

Table 1.0 Complete List of Data Available within Beefree to Export Via Webhook URL

Walk Through an Example

In this section, we will walk through an example, and demonstrate how each step above will work in practice.

In this example, we will create a workflow to export a Beefree email design to Postmark. Postmark will then send the email to the recipients listed. The platform we will use to achieve this is Make.

Create a Webhook

The first step we will take is to create a new webhook within Make. To do this, take the following steps:

1. Log in to Make
2. Click on Scenarios
   1. Create a new scenario
   2. Add a new webhook module to the scenario
   3. Create a new webhook URL
3. Copy the webhook address to your clipboard

After you copy your webhook URL, you can navigate to the Beefree application.

Add your Webhook URL to Beefree

In the Beefree application, take the following steps to add your new webhook URL:

1. Navigate to Settings
2. Select Connectors
3. Click on Custom connector
4. Enter a Custom connector name
5. Paste the Custom connector URL you copied in the previous section
6. Click Connect

Once you click Connect, a test event will automatically send to Make to verify the connection.

A successful connection will show the following confirmation message in the Make platform:

Connect a Sending or Marketing Platform

As a next step, in the same Make scenario, we will take the following steps to connect to Postmark—the sending platform.

1. Add Postmark as a second module that connects to the webhook
   1. Select Create a Draft as the action
   2. Select Send an Email as the action
2. Connect your Postmark account to the module
   1. Add the subject data to the Email Subject field
   2. Add HTML to the HTML Body field
   3. Add a From email address in the From field
   4. Add a To email address in the To field
   5. Select a Postmark Message Stream
3. Click OK to confirm the Postmark configuration

Export Your Email Design from Beefree

Take the following steps to export your email design from Beefree:

1. Navigate to your email’s details within Beefree
2. Select Export
3. Select Push to your sending system
4. Click Custom connector
5. Click Create to confirm

Verify the Email Delivery

To verify that the email template was successfully delivered to the sending platform, take the following steps:

1. Log in to Postmark
2. Navigate to the Server with the Message Stream you previously configured
3. Enter the Message Stream
4. Navigate to the Activity tab
5. You should see a confirmation that the Beefree email sent 

Note: As a test, you can send the email to yourself from Postmark to confirm the functionality before you send it to your contacts list. 

The following image shows an example of how the Beefree email design looks once it is delivered to the Postmark recipient.

And, that concludes this example! Remember, this is one of the endless options for utilizing Custom connectors. There are a variety of unique ways that you can leverage Custom connectors to optimize your workflow and export Beefree data. 

Important Considerations

Consider the following when working with a Custom connector:

• You can have one website link in a Custom connector, but you can include many headers and values.
• You don't have to include headers and values if you don't need them.
• When you are creating the webhook, make sure your platform offers one of the following options: send email, create a draft, create a template, or create an email.
• You can disconnect your Custom connector whenever you want by clicking Disconnect on the Custom connector account.