Photo by Nicolas Picard on Unsplash

Typeform Webhooks just got better

Nicolas Grenié
Typeform's Engineering Blog
5 min readApr 19, 2019

--

Today is probably my happiest day ever at Typeform since I joined about a year ago 🎉
The team that focuses on Developer Experience (they called themselves Consigliori 🤔) just released a major improvement for anybody using webhooks on Typeform and I can’t wait to tell you more about it!

So let’s not wait further and dive in all the cool stuff that were shipped today!

Webhooks are now VIP 👑

Webhooks are an amazing way to integrate with Typeform. You can easily move data from Typeform to anywhere you need it. Everything is happening in a snap, which gives you control to react in real time when a new submission is posted on your typeform.

But until now, our webhook panel looked like a liquor chocolate in a box full belgian praline, alone and left out. (who eats liquor chocolate anyway? 🤔)

Grandpa, tell me how was the webhook panel before? 👴

More than one Webhook per form 🤹‍♂

Yes! You can now have more than one webhook per form!

This used to be only available via API. We made a proper interface to quickly visualize quickly which webhooks are ON or OFF and where do they point.

New webhook panel

You may ask why would you need more than one webhook per form?
To parallelize things, duh!

Once a typeform is submitted you can both send a notification to Slack, add a card on Trello and trigger a Philips Hue light in your office, all at the same time! Isn’t great? 🤯

A lot of our integrations with other SaaS partners also rely on webhooks.
You will also be able to see the webhooks created by those integrations in your webhook panel.
⚠️ So be careful and dont’s mess with it, specially if you have no idea what you are doingg⚠️

Inspect everything 🔎

Previously, we were giving you really basic informationg regarding the deliveries of your webhooks.

We had a big red ❌ if the delivery failed, and a nice rewarding ✅ if it went OK. And if you wanted to have more details you would click on the delivery id and it would display the payload of the webhook in another window. This would only work in Safari because of a mysterious bug on Chrome.

This was definitively not the best experience for developers like yourself. 🙇‍♂️

But take a look at this new panel to inspect deliveries, isn’t beautiful? 🤩

You can now inspect the payload 🎉

We keep it very visual so you can see which deliveries are failing and which are successful. In addition to colours, we also added a big label so you can quickly see the status code of the request.

And you can check easily what we send you, and what we got back from you, switching between the Request and the Response tabs.

Inspect both request and response 🤩

Redeliver in a breeze 📬

Nothing against your coding skills but I really doubt you can build a working webhook integration the first time you try it. We are all human after all, right?

That’s why we wanted to give you the best tool to debug your webhooks, and let you retry.

As you may have seen it in some of the screenshots, we added a “Redeliver” button. You can now replay each webhook delivery as many times as you like. Don’t worry this won’t affect the responses stored on Typeform.

Redeliver webhook by clicking on a button

More secure webhooks 🔐

Security is something crucial for us, and we wanted to make sure that our webhook experience wa reflecting this concern as well.

In the Settings panel of your webhook we added new security features following industry standards.

You can now add a secret to the webhook payload. This secret will be passed encrypted in a header named Typeform-signature. On your server you will have to decrypt it to make sure the request is really coming from us. You can read more in details in our Developer Documentation.

We also added an option to enforce SSL verification on your the destination URL of your webhook.

Security settings for webhook

With those two things you should feel safer 😉

Change in our Webhook API 📖

As we are shipping new features in our UI, we are also adding them to our Webhook API.

If you use our API to create Webhooks, there are now two new parameters secret and verify_ssl.

While they are optional, we recommend to setup both a secret and enforce ssl when setting up a webhook, to add more security.

You inspired us👏

This was a major project for our team and I wanted to acknowledge where we got the inspiration from to build a better experience around webhooks.

Thanks to all the individual developers that have been asking more improvements we were able to prioritized our roadmap.

Thanks to all the bigger players (Slack, Github, …) for setting up a high standard on Developer Experience, that forces us to be better and follow some of the best practices they started.

Go hack it 👩‍💻

Now, this is yours, go play with Typeform webhooks, go wild, go break it!
Please report any bug or feature request you want to see, we really learn from you 😉

Example hack project to receive webhook

--

--

Nicolas Grenié
Typeform's Engineering Blog

@typeform Dev Advocate, ex-@3scale, @sfcheeseparty enthusiast — G33k 🤓, fun🤘, frogs🐸 and snails🐌!