Step 1. Add a helper file to your project. This file will help you interact with the Hyperuser API.

React + Vite

Step 2. Add the script tag to your index.html file:

Step 3. Initialize Hyperuser in any client file

App.jsx
import hyperuser from "./utils/hyperuser";

useEffect(() => {
      hyperuser.initialize({
         userId: "<user_id>",
         apiKey: "<api_key>",
         user: {
            displayName: "<user_display_name>",
            email: "<user_email>",
            isProUser: false,
         },
    });
}, []);

Next.js

Step 2. Initialize Hyperuser in any client file

client.jsx
import Script from "next/script";
import hyperuser from "../utils/hyperuser";

<Script
  src="https://static.hyperuser.dev/main.js"
  onLoad={() => {
    hyperuser.initialize({
      userId: "<user_id>",
      apiKey: "<api_key>",
      user: {
        displayName: "<user_display_name>",
        email: "<user_email>",
        isProUser: false,
      },
    });
  }}
/>;