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

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(  "app_Xzx8bQeOB1D1XEYmAJaRGoj0");// A URL that automatically logs user into the dashboardconsole.log(dashboard.url);

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:

<iframe  src="http://app.svix.com/login#key=eyJhcHBJZCI6ICJhcHBfMXRSdFlMN3pwWWR2NHFuWTRRZFI1azE4eXQ0IiwgInRva2VuIjogImFwcHNrX2UxOUN0Rm5hbTFoOU1Gamh5azRSMTUzNUNSd05VSWI0In0="  style="width: 100%; height: 100%; border: none;"  allow="clipboard-write"  loading="lazy"></iframe>

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# oryarn 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 (https://api.svix.com/docs#operation/get_dashboard_access_api_v1_auth_dashboard_access__app_id___post)    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.

caution

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. https://www.example.com/logo.png (remember to URL-encode it!).
  • fontFamily - one of the fonts listed in the dashboard (see previous section). E.g. Roboto.

So for example:

http://app.svix.com/login?primaryColor=28bb93&fontFamily=Roboto#key=eyJhcHBJZCI6ICJhcHBfMXRSdFlMN3pwWWR2NHFuWTRRZFI1azE4eXQ0IiwgInRva2VuIjogImFwcHNrX2UxOUN0Rm5hbTFoOU1Gamh5azRSMTUzNUNSd05VSWI0In0=