This guide shows you how to integrate the Userorbit SDK into your vanilla JavaScript web application.

Before You Begin

• You have a Userorbit account.
• Your Userorbit Account ID from the Userorbit Admin Panel (Settings → Widget).
• Basic understanding of HTML and JavaScript.

Steps

1. Add the Userorbit SDK script to your HTML — Include the Userorbit SDK script tag just before the closing </body> tag of your HTML file. The script loads asynchronously so it does not block page rendering. Replace YOUR_ACCOUNT_ID with your actual Account ID.

   <!-- START Userorbit SDK -->
   <script type="text/javascript">
     !function(){
       var apiHost = "https://api.userorbit.com";
       var accountId = "YOUR_ACCOUNT_ID";
       var s=document.createElement("script");
       s.type="text/javascript",s.async=!0,s.src="https://cdn.userorbit.com/userorbit.umd.cjs",
       s.onload=function(){window.userorbit&&typeof window.userorbit.init==="function"&&window.userorbit.init({accountId:accountId,apiHost:apiHost})};
       var e=document.getElementsByTagName("script")[0];
       e.parentNode.insertBefore(s,e);
     }();
   </script>
   <!-- END Userorbit SDK -->

2. Identify users — To associate activity with a known user, pass their identity when initializing the SDK. The userId, email, name, and attributes are all optional but recommended for logged-in users.

   <!-- START Userorbit SDK -->
   <script type="text/javascript">
     !function(){
       var apiHost = "https://api.userorbit.com";
       var accountId = "YOUR_ACCOUNT_ID";
       var userId = "USER_ID_FROM_YOUR_APP";
       var email = "person@example.com";
       var name = "Jane Doe";
       var s=document.createElement("script");
       s.type="text/javascript",s.async=!0,s.src="https://cdn.userorbit.com/userorbit.umd.cjs",
       s.onload=function(){window.userorbit&&typeof window.userorbit.init==="function"&&window.userorbit.init({accountId:accountId,apiHost:apiHost,userId:userId,email:email,name:name,attributes:{"user.role":"member"}})};
       var e=document.getElementsByTagName("script")[0];
       e.parentNode.insertBefore(s,e);
     }();
   </script>
   <!-- END Userorbit SDK -->

3. Update user attributes at runtime — After initialization, you can update user identity and track events through the SDK.

   // Update email
   await window.userorbit.setEmail("new@example.com");
   
   // Set custom attributes
   await window.userorbit.setAttribute("plan", "enterprise");
   await window.userorbit.setAttribute("account.id", "acct_123");
   
   // Track a custom event
   await window.userorbit.track("feature-used", {
     hiddenFields: { feature: "analytics" }
   });
   
   // Log the user out
   await window.userorbit.logout();
   

Verify It Worked

• Open your browser developer tools (F12).
• In the Network tab, filter for requests to api.userorbit.com.
• In the Console, type window.userorbit and press Enter — it should return the SDK object.
• Check the Contacts page in your Userorbit Admin Panel for incoming user data.