Setup Guide

This guide will help you set up a webhook destination in the RudderStack dashboard. It also lists the configuration settings required to correctly send data from the supported sources to your webhook destination.

Connection compatibility

Destination info
Status: Generally Available Supported sources: Android, iOS , Web, Unity, AMP , Cloud, Warehouse, React Native , Flutter, Cordova, Shopify Refer to it as WEBHOOK in the Integrations object.

Connection modes
Source	Cloud mode	Device mode	Hybrid mode
AMP
Android
Cloud
Cordova
Flutter
iOS
React Native
Shopify
Unity
Warehouse
Web

Supported message types
Source	Identify	Page	Track	Screen	Group	Alias
Cloud mode
Supported sources

Setup

In your RudderStack dashboard, add a source. Then, from the list of destinations, select Webhook.

Assign a name to uniquely identify your destination in the RudderStack dashboard and click Continue.

Connection settings

Configuration settings

Configure the below settings to receive your data correctly in your webhook destination.

Set non-string data types as headers

RudderStack supports defining non-string data types (like Boolean, object, array, etc.) as headers while setting up your webhook destination. RudderStack automatically stringifies these data types before setting the header.

For example, if you set the headers as shown:

In this case, RudderStack automatically stringifies and sets the below headers in the transformed payload before sending it to the specified webhook URL:

"headers": {
    "key1": "null",
    "key2": "{\"key1\":\"\"}",
    "key3": "true",
}

Add dynamic header to events

RudderStack provides a transformation template for cases where you need to dynamically change or add a header to the webhook, as shown:

export function transformEvent(event, metadata) {
  event.header = {
    Authorization: "Basic <credentials>",  // Change headers and values
    header_2: "<value>"
  };
  return event;
}

The following snippet highlights a sample event payload with a dynamic header:

{
  event: "Product Viewed",
  type: "track",
  properties: {
    color: "blue",
    number: 3,
    newMember: true
  },
  header: {
    "Authorization": "Bearer 3841718412jhcdskc"
  }
}

Add dynamic path to base URL

This feature is helpful in cases where you need to change the webhook endpoint depending on a certain condition.

RudderStack provides a transformation template for cases where you need to add a dynamic path to your base webhook URL.

For example, if the webhook URL configured in the RudderStack dashboard is https://www.example.com/, you can append a string /search?email=${email} to it depending on the email property present in your event:

export function transformEvent(event, metadata) {
  const email = event.context?.traits?.email; // Change property
  if (email) event.appendPath = `/search?email=${email}`; // Change property and appendPath
  return event;
}

In this case, the final webhook URL endpoint where RudderStack sends the event becomes https://www.example.com/search?email=${email}.

FAQ

How do I check for delivery failures while sending events to the webhook destination?

Log in to your RudderStack dashboard and go to the Live Events tab of your destination to check for any delivery failures. In case there are any, you can check the Error Response by clicking the event to get more details.

Next steps

• Send events in cloud mode

Questions? Contact us by email or on Slack