What is a Webhook?

A webhook is the act of any tool(e.g Postmark) making an HTTP POST request to your application’s API when an event occurs. This way Postmark is able to immediately notify you when an event occurs and your application doesn’t have to perform complicated polling of Postmark’s API to determine if something new occurred(e.g an email is received)

What is PostMark?

Postmark is an email delivery service, which is used for transactional and marketing emails, and to receive them in the inbox with their promise of “on time and every time”. Postmark is loaded with services

Let’s get to business and see how to make this connection between bubble.io and postmark.

Example use case

Let’s say some user A wants to sell some electronics. He sends emails to its client with the

details of the product and expects the clients to reply to them with their bidding amount.

As a developer what we need here

• Send a bunch of emails

• This is supported by bubble.io.

• Keep track of bids in detail

• Extract the bidding amount from the email reply and keep a track of which client bid what, on which product in the bubble database.

Procedure

Follow these following steps to achieve above mentioned tasks

• Sign up at Postmark
• Configure the Inbound Stream
• Enable webhook in bubble.io
• Receive data from postmark to your bubble.io app

Sign up at Postmark

Create an account on postmark, you can also avail their free trial. Simply go to Sign up.

Configure the Inbound Stream
This is the most important step of all. When you create an account, postmark creates a default server “My First Server” for you with three Streams

• Broadcast
• Inbound
• Transactional

We are concerned with the “Inbound Stream”.

“Default Inbound Stream” is where you will see the emails you received on the postmark server. “Default transactional stream” is where you will see the emails you sent via postmark server.
To receive emails on the postmark server you will have to connect it to your email service.
There are two ways to do so

• Using third party mail services like gmail.
• Configuring your DNS records

Using third party mail services like gmail.

1. Go to “Default Inbound stream” and then go to settings.

Sign up at Postmark

2. Copy the Inbound Email address. This is the email that you need to add in “Forwarding” for your domain. (This can be done in gmail by going to settings > More settings > Forwarding and POP/IMAP > Add a forwarding address)

3. Scroll down and press “Save changes” and you will receive a verification email in the “transactional Stream” of postmark click on that and verify yourself.

4. Back in your Gmail account, select the “Forward a copy of incoming mail to…” option and select your forwarding address from the drop-down menu.

5. Now your email is connected to postmark

Configuring your DNS records
Set your MX record
Create a subdomain and point it to inbound.postmarkapp.com with a value of 10.

Set the Domain
Enter your domain on the Inbound Stream settings page and save changes.

Enable SMTP

Enable SMTP on the server’s setting page

Enable webhook in bubble.io

You are done with configuring the Inbound Stream, Now let’s enable the webhooks on bubble.io.
First enable backend workflows(Settings > API and check “Enable workflow API and backend workflows”)

Go to backend workflows and create a “New API workflow”. Give it a name, eg “email” and select “Detect request data” as the parameter definition

Click on “detect data” which will open a popup with a trigger link, copy that trigger link.

DO NOT CANCEL this popup. Go to postmark and paste the copied link in “inbound” and click check. Note: Remote server will return successfully only if the detect data popup was open when clicking “detect”.

Once the connection is established, Bubble will receive the API workflow request data. You can check all the fields that we can parse and play around with.

Press “Save” and you are good to go.

You can update the database by referring to the webhook data with “Request Data’s…..”

For further information please visit inbound domain forwarding.
We hope that you found this article helpful. If you want to support us, please share this within your circle.

‍