Home
Help CenterSign up for Frontegg

Frontend Integration

Suggest Edits

Step 1: Install Frontegg libraries

Now let's add the ability for the vendor to subscribe to your webhook notifications.
For this to happen, we will need to install the Frontegg frontend library on your frontend project, as follows:

npm i @frontegg/react-core @frontegg/react-connectivity

Step 2: Add Frontegg Imports

Under the src folder, create a file and name it withFrontegg.jsx
Copy the following content into the withFrontegg.jsx file.

import React from 'react';
import { FronteggProvider } from '@frontegg/react-core';
import { ConnectivityPlugin } from '@frontegg/react-connectivity';

/**
 * use this object to config Frontegg global context object
 */
const contextOptions = {
  baseUrl: `http://localhost:8080`, // Your server url
  requestCredentials: 'include',
};

const plugins = [
  // add frontegg plugin here
	ConnectivityPlugin(),
];

/**
 *  Wrap you entire application with this HOC.
 */
export const withFrontegg = (AppComponent) => (props) => {
  return <FronteggProvider
    plugins={plugins}
    context={contextOptions}>
    <AppComponent {...props} />
  </FronteggProvider>;
};

Update your index.js with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { withFrontegg } from "./withFrontegg";

const AppWithFrontegg = withFrontegg(App);

ReactDOM.render(
  <div>
    <AppWithFrontegg />
  </div>,
  document.getElementById('root')
);

Step 3: Embed the Webhooks component

The final step would be to embed the webhooks component on the relevant page on your React application

To complete this step, copy the code below to the relevant page on your application:

import React from "react";
import { WebhookComponent } from '@frontegg/react-connectivity';

function WebhooksPage() {
	return (
    <div>
    	<WebhookComponent />
    </div>
  );
}

📘

Custom router

If you are not using Frontegg's provided router, make sure to add rootPath to WebhookComponent.
For example:
If your webhooks route is my-base-url/my/custom/webhooks/path set <WebhookComponent rootPath='/my/custom/webhooks/path'>

👍

You are all set!

You should be able now to send and configure webhooks for your customers!

Updated 5 months ago