This guide shows you how to integrate the Userorbit SDK into your Vue.js application (Vue 3 with Composition API, with a brief mention of Vue 2 Options API) to start tracking user engagement and using Userorbit features.

Before You Begin

• A Vue.js project (Vue 3 with Composition API recommended, Vue 2 also supported).
• Your Userorbit Account ID from the Userorbit Admin Panel (Settings → Widget).
• Basic understanding of Vue.js development.

Steps

1. Install the Userorbit SDK — Install the SDK as an npm package.

   npm install userorbit-js
   # OR
   yarn add userorbit-js
   # OR
   pnpm add userorbit-js

2. Initialize the SDK — Initialize the Userorbit SDK with your Account ID when your application mounts.

   Vue 3 Composition API (App.vue):

   <script setup>
   import { onMounted } from "vue";
   import userorbit from "userorbit-js";
   
   onMounted(() => {
     userorbit.init({
       accountId: "YOUR_ACCOUNT_ID",
     });
   });
   </script>
   
   <template>
     <!-- Your app content -->
   </template>

   Vue 3 in main.ts/main.js:

   import { createApp } from "vue";
   import App from "./App.vue";
   import userorbit from "userorbit-js";
   
   userorbit.init({
     accountId: "YOUR_ACCOUNT_ID",
   });
   
   createApp(App).mount("#app");

   Vue 2 Options API:

   import userorbit from "userorbit-js";
   
   export default {
     mounted() {
       userorbit.init({
         accountId: "YOUR_ACCOUNT_ID",
       });
     },
   };

3. Identify users after authentication — Pass user identity in the init config after login. User identity is set during initialization, not through a separate identify method.

   import userorbit from "userorbit-js";
   
   const handleLogin = async (userData) => {
     // ... perform your authentication logic ...
   
     if (authenticationSuccessful) {
       userorbit.init({
         accountId: "YOUR_ACCOUNT_ID",
         userId: userData.id,
         email: userData.email,
         name: userData.name,
         attributes: {
           plan: userData.subscriptionPlan,
           companyId: userData.companyId,
         },
       });
     }
   };

   You can also update user attributes after initialization:

   await userorbit.setEmail("new@example.com");
   await userorbit.setAttribute("plan", "enterprise");
   await userorbit.track("feature-used", {
     hiddenFields: { feature: "analytics" },
   });
   await userorbit.logout();

4. Register route changes — Since Vue Router uses client-side routing, notify the SDK on navigation so page-targeted tours and surveys can trigger correctly.

   import { watch } from "vue";
   import { useRouter } from "vue-router";
   import userorbit from "userorbit-js";
   
   const router = useRouter();
   
   watch(() => router.currentRoute.value, () => {
     userorbit.registerRouteChange();
   });

Verify It Worked

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