Skip to main content

Management UI

Svix comes with a management UI 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 how it looks like:

Management UI screenshot

Giving your users access#

To give your users access to the admin UI, 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 admin UI. 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 dashboard
console.log(dashboard.url);

Embedding in your own dashboard#

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

Embedded Management UI 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;">
</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.

White labeling#

Keep the same look and feel of your application by white labeling the Management UI. From the Svix dashboard, you can configure the color palette as well as the logo that your users will see.

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