There are two ways to deploy dashboard in your front end:

  1. iFrame Embedding
  2. Native React Component Embedding

Please click on the Deploy button in the Hub.

You will need to get the JWT for the current user and the dashboard ID to render the correct dashboard. The JWT is generated by following the steps in Backend Setup. The dashboard ID could be found in the URL when you are viewing the dashboard you want to embed.

Below is an example of deploying component with JWT using Clerk middleware:

"use client";
import React from "react";
import { useUser } from "@clerk/nextjs";

const Analytics: React.FC = () => {
  // Get the user information from Clerk and extract the Upsolve token from the metadata
  const { user } = useUser();
  const upsolveToken = user?.publicMetadata?.["upsolveToken"];

  // Embed the component into your app
  return (
    <>
      {upsolveToken != null && typeof upsolveToken === "string" && (
        <iframe
          id="c5da5cb3-fedb-4656-9170-0cc65c9db29a"
          title="Example Dashboard"
          width="1000"
          height="1000"
          src="https://hub.upsolve.ai/share/dashboard/c5da5cb3-fedb-4656-9170-0cc65c9db29a?theme=light&jwt=<upsolveToken>"
        />
      )}
    </>
  );
};

export default Analytics;

Was this page helpful?

Backend SetupDashboard Link Sharing