An example use-case could be creating Klaviyo profiles in real-time whenever a contact submits information to a flow. Without needing to write transformation code in your own endpoint (or even needing to have your own endpoint), you can create a webhook transformation that allows you to match the shape of the Klaviyo request directly from Flowcode. This provides you the option of setting up your webhook endpoint to point to and send messages to Klaviyo directly (you of course always have the option of the traditional route consisting of performing the transformations and Klaviyo API calls in your own self-controlled endpoint).

The following is a guide on how we can achieve this.

First, we will need to create an endpoint with an address that points directly to Klaviyo, specifically https://a.klaviyo.com/api/profile-import/ for this example. We will also need two things: an API key and a revision header. Please note that when using webhooks, it is always recommended to use endpoints secured by some auth mechanism (long-lived tokens in an Authorization header being best since you will not need to update the endpoint’s auth header often if at all and the value is redacted from the webhooks UI).

Once we have added our endpoint, we can edit it to enable transforms by clicking on the toggle under “Transformations.”

Once we have enabled transformations on our endpoint, we can click “Edit transformation” to start writing our transformation code.

Once we have started editing our first transformation, we will want to take a look at the comment at the top of the transformation function.

Here, we see our list of webhook properties that we can observe/manipulate before delivery. For example, if I have a webhook endpoint with a URL that requires a query string parameter (e.g. https://api.something.com/contacts?email=), I can actually write code in my transformation that adds a value to the parameter with a value from the webhook payload (e.g. a form value from a submission). The webhook will then be delivered to the newly written URL. It could look something like this:

As you can see, by manipulating these webhook properties, we can change the behavior of our webhook at processing time. There are some other things happening in this code snippet that we will dive into.

For our example, we’re going to use the following function which we will explain in detail:

Function Breakdown

We must first grab the list of fields on our submission form from the original webhook payload. Please view the event catalog for a full list of fields you can expect on the payload.

const fields = webhook.payload.data.submission.data.form.submission.fields;

Next, we can grab the fields from our form based on their titles (when setting up your webhook transform, you will need to replace these titles with the field titles used in the form).

const email = fields.find(f => f.field.title === 'Email')?.value;

const name = fields.find(f => f.field.title === 'Full Name')?.value;

const favoriteMovie = fields.find(f => f.field.title === 'Favorite Movie')?.value;

Once we have our fields, we can do validation on them so that we are not sending bad values to Klaviyo. In this code snippet, even though email is a required field, we are being defensive here to demonstrate how one could cancel a webhook dispatch based on some value in the payload.

if (!email) {

// setting this to true cancels the dispatch of the payload

webhook.cancel = true;

return webhook;

}

We can also grab data about the flow that the contact interacted with and set that as a property on my Klaviyo profile.

const flowName = webhook.payload.data.submission.flowName;

Finally, we will want to use the values that we extracted from the original payload and arrange them into a new payload that Klaviyo understands for upserting profiles. The following code snippet demonstrates this and a few more important lines of code needed to complete our transformation.

const profile = {

data: {

type: "profile",

attributes: {

email: email,

properties: {

... name ? { 'name': name } : {},

... flowName ? { 'flow_name': flowName } : {},

... favoriteMovie ? { 'favorite_movie': favoriteMovie } : {},

}

}

},

};

webhook.payload = profile;

return webhook;

We are doing three very important things in this snippet:

const profile = {

data: {

type: "profile",

attributes: {

email: email,

properties: {

... name ? { 'name': name } : {},

... flowName ? { 'flow_name': flowName } : {},

... favoriteMovie ? { 'favorite_movie': favoriteMovie } : {},

}

}

},

};

webhook.payload = profile;

return webhook;

Our transformation has been written! We can now see it in action.

For our example, we have set up a CRM form flow to which consumers can submit information. Whenever this happens, we want to create (or update) a profile in Klaviyo with values from the submission.

Here’s our form

When this form is submitted, our Klaviyo webhook endpoint is subscribed to this event and will receive a webhooks payload. Clicking into our endpoint, we can see 2 message attempts. Let’s take a look at the latest (at the top) event.

Here’s what our event payload looks like (some of the form fields highlighted in green):

Note some of the form values that we’re using in our transformation code.

And then we can see a response from Klaviyo at the bottom of the message attempt details view:

Notice the Klaviyo profile values are set exactly as we wrote in our transformation. It’s working! But just to double check, we can also query Klaviyo using their APIs to see our new profile using the ID in the response above.

As you can see from the screenshot above, our profile is confirmed to have been created from our conversion event.