Extend the functionality of your app by sending webhook notifications to your customers. We know how hard it is to build a complete webhook notification system, especially when you’re focusing on building your app’s core features. So we take care of it for you.

In this guide, learn how to setup your Frontegg Admin portal to provide webhook notifications to your customers.

Webhooks Intro

You probably have used webhooks as a receiver. For instance, you've probably subscribed to a webhook notification provided by a SaaS provider. You subscribed by providing a URL for an event that happens on their platform. Then, when that event happens, your application receives a webhook notification from a SaaS platform.

Whereas in the past you've been the receiver, this guide shows you how to turn your application into the sender of webhook notifications. Yes, that's right. You'll be on the other side of the transaction this time. Accordingly, when you define a webhook in your Frontegg Admin Portal, you need to connect that webhook to an event that occurs in your application. This guide shows you how.

Without Frontegg, implementing webhooks as the sender is not easy. You have to manage complex queues, send HTTP requests, store customer subscription definitions, and create great UI/UX. Plus, you need to worry about security, scalability, and performance.

With Frontegg, however, you do not need to worry about any of those things. Frontegg webhooks plug directly into your app through a simple SDK, which allows us to handle the tedious parts of webhooks for you.

All you need to do is some easy configuration to define which events in your application trigger a webhook and paste some code into your application. It's that easy!

Events

Events are central to webhooks. An event triggers one application to send a webhook notification to another application.

An event can be virtually anything that happens in your application. For instance, let's say that your application is a server monitoring application. You could define a webhook to notify your customer when the server is down.

Setup Webhooks

Step 1: Webhooks Settings

Go to Self-Service ➜ Webhooks.

You should list of all webhooks. These are the webhooks triggered by events sent from Frontegg’s SDK. The events you configure here are available as subscriptions for your customers.



Step 2: Create a Category

Categories help you organize your events. In the form, enter the category name. Choose a name that describes what the events have in common. After you create a category, you should see it in the list.


Step 3: Create Events

Add an event to a category. Each individual event that you define has its own webhook, even if other events share the same category.

Under the category for your new event, click the add button and fill out the form that appears. After you create an event, you should see it in the list for its category.



Once you have created an event definition, your customers can subscribe to that event by providing a callback URL.

Step 4: Integrate With Frontegg SDK

Integrate your application with the Frontegg SDK. Copy and paste this code into your application in the file and location where the code is for the event that you want to trigger a webhook notification.


import { EventsClient } from '@frontegg/client'

// Init the events SDK with the clientId and api key
const eventsClient = new EventsClient();
await eventsClient.init('YOUR-CLIENT-ID', 'YOUR-API-KEY');

eventsClient.trigger({
 // A unique event key for the event
  eventKey: 'event-key',
  
  /* Title and description are required properties 
     and will be sent in the request payload */
  properties: { 
    title: 'Welcome To Our App',
    description: 'This is our new app',
  },
  
  /* Add additional properties to the request payload
     or use webhook:true to send only default properties */
  channels: {
    webhook: { 
      someKey: 'some value', 
    },
  },
  
  // Trigger the event for a specific tenantId.
  tenantId: 'my-tenant-id',
});

The code triggers the event that that you pass into the Event Client's trigger method. You pass an object containing the eventKey, properties for title and description of the event, additional properties, and the receiver's tenant id. The trigger method sends a payload from your application to Frontegg.

Here are descriptions for the properties you need for the code:

Property Name

Description

Client Id

Found in Frontegg Portal --> Workspace Settings

API Key

Found in Frontegg Portal --> Workspace Settings

Event Key

You defined in Frontegg Portal

Title

A title for your webhook

Description

A description for your webhook

Additional properties

You can add key:value pairs of your choosing to the payload that your customer receives at their callback URL; or use webhook:true to send only default properties

Tenant Id

TenantId for the webhook receiver


That is it! Now your application can send webhook notifications to subscribed customers.


Did this page help you?