Skip to main content

App Portal

Svix comes with a application portal for your users that you can use out of the box. Your users can then use it to add endpoints, debug delivery, as well as inspect and replay past webhooks. This is the easiest way to get started, but you can alternatively use the API to build your own.

Here is what it looks like standalone, or scroll down for the embedded version:

App Portal screenshot

Application portal usage guides

For more information on how to use the app portal please refer to the receiving webhooks section of the docs.

Giving your users access

To give your users access to the App Portal, just use the dashboard access endpoint. Calling this endpoint with an app_id returns a URL you can just redirect your users to in order to log them into the App Portal. They will stay logged in for a few days or until they log out.

const svix = new Svix("AUTH_TOKEN");
const dashboard = await svix.authentication.dashboardAccess(
// A URL that automatically logs user into the dashboard

Embedding in your own dashboard

Embedding as an iframe

The returned URL from the previous section can also be embedded in your own dashboard using an iframe.

Embedded App Portal screenshot

To add this to your application, just pass the URL you received in the previous example to the src property of the iframe:

style="width: 100%; height: 100%; border: none;"

We have also included some basic styling to make the iframe to look nicer, though that can be omitted or modified depending on your needs.

Embedding in a React application

We also provide the svix-react package that you can use to easily embed the App Portal. To use it, simply run:

npm install svix-react
# or
yarn add svix-react

The npm package is lightweight and provides some basic styling and a loading indicator out of the box. To use it, simply provide the magic link from the get_dashboard_access endpoint.

import React from "react";
import ReactDOM from "react-dom";
import { AppPortal } from "svix-react";

import "svix-react/style.css";

const SvixEmbed = () => {
const svixAppId = "app_x"; // this might vary from customer to customer

const [appPortal, setAppPortal] = React.useState(null);
const svixAppPortal = React.useEffect(() => {
// Prerequisite: You'll need an endpoint that returns the App Portal
// magic URL (
fetch(`/your-backend-service/svix/${svixAppId}/app-portal`, { method: "POST" })
.then((res) => res.json())
.then((result) => setAppPortal(result));
}, [svixAppId]);

return <AppPortal url={appPortal?.url} />;

const App = () => <SvixEmbed />;

ReactDOM.render(<App />, document.body);

Design Considerations

When embedding the App Portal into your application, keep in mind that the App Portal is an information dense master-detail view. We recommend keeping the view at 100% width to avoid abbreviating important information for your users. If you are hoping to avoid having an embedded scrollbar, we recommend putting the view inside a full screen modal from your dashboard.

embedded iframe modal

White labeling

Keep the same look and feel of your application by white labeling the App Portal. From the Svix dashboard, you can configure the color palette, font and the logo that your users will see.

To customize these settings, please head to your Organization Settings on the Svix Dashboard.

Custom settings per application

In some scenarios, you may want to customize the application portal per application, rather than for your whole organization. For example, if you change the color of your own dashboard for each of your users.

This is possible by changing the query parameters of the URL to the settings of your choosing.


Please use proper URL parsing rather than string manipulation as the structure of the URL (e.g. the fragment part) may change. Another reason to use proper URL parsing is that you want to make sure to URL-encode the parameters.

The supported parameters are:

  • primaryColor - the primary color of the UI. Format: RRGGBB, e.g. 28bb93.
  • icon - a URL to an image file. E.g. (remember to URL-encode it!).
  • fontFamily - one of the fonts listed in the dashboard (see previous section). E.g. Roboto.

So for example: