Supercharge your Webhooks with Transformation Templates

In case you're not already familiar with Svix transformations, it's a widely used feature that allows your customers to modify select aspects of a webhook, such as the payload and URL, using JavaScript. It saves webhooks consumers from having to deploy redundant glue code in their backends that just receives a payload, takes a small part of it, and forwards it to to another system or service.

A great use for transformations is connecting webhooks to other external APIs, without the need to deploy any extra backend code. That is great, but writing custom code for each event type and each API can be annoying and easy to get wrong.

This is where Transformation Templates come in. Templates let you provide your customers with pre-written transformations that work with your event types and the APIs that you want to support. This make transformations much easier to use for your customers, saving them the work of writing and testing custom code for every API they want to connect to.

Transformation templates are a great way to connect your webhooks to popular external services like Slack, Discord, Teams, or any API you can imagine.

Using the templates

The best way to understand how you can take advantage of the new transformation templates is with an example.

Let's use a payment processor as an example, we'll call it Squiggle Inc. Squiggle sends many webhooks, including payment.done, which looks something like this:

{
  "id": "fqvH9GidPNI2",
  "name": "Mike",
  "amount": 10,
  "invoice_id": "337306e3b15c",
  "timestamp": 1692650503973
}

Squiggle realized that their smaller customers like to celebrate every time someone pays, so they wrote a set of instructions in their docs to show their customers how to send Slack messages from their webhooks using transformations.

With a transformation template, they can provide a pre-made transformation and simplify the process significantly. No need to follow any external documentation, and no need to copy-paste code snippets and make sure that they work.

Once Squiggle's Slack template is created, when their customers add a new endpoint in the App Portal, they will see a new Transformation Templates tab where they can choose to use it.

Consumers only need to follow the instructions to get a Slack Incoming Webhooks URL, paste it in the transformation template form, and they are good to go! They will start receiving Slack messages from payment.done webhooks in minutes.

Diving deeper

The Slack template Squiggle created uses a transformation that looks like this:

/**
 * @param webhook the webhook object
 * @param webhook.url current destination address
 * @param webhook.eventType current webhook Event Type
 * @param webhook.payload JSON payload
 */
function handler(webhook) {
  if (webhook.eventType === 'payment.done') {
    webhook.payload = {
      text: `New payment from ${webhook.payload.name} for $${webhook.payload.amount}!`,
    }
  }

  return webhook
}

The connection makes use of Slack's Incoming Webhooks API, which is the perfect option to easily send Slack messages from incoming webhook payloads.

Additionally, to save customers the hassle of creating a new Slack app to use the API, Squiggle created a site where their customers can use Squiggle's Slack app rather than creating a new one.

Consumers can customize the transformation code to support more event types, change what the message says, add advanced formatting, or anything else they can imagine. The template is just the starting point.

Wrapping up

In this example, we connected one of our webhook events to Slack. This is just the start. The more event types you support, and the more external APIs you connect to, the happier your customers will be.

You can use templates to build integrations with any service you can imagine: CRMs, analytics APIs, other messaging apps like Discord or Teams, and whatever makes sense to connect to your API!

For a more detailed explanation on how to create and set up transformation templates, please refer to our docs.

If you want to know more about Transformations, read our other blog post: The What, Why, and How of Payload Transformations.

For more content like this, make sure to follow us on Twitter, Github, or RSS for the latest updates for the Svix webhook service, or join the discussion on our community Slack.