Create ue-migration.mdx

fern/docs/pages/sdks/web/ue-migration.mdx

@@ -0,0 +1,276 @@
+# UserExperior migration
+
+The DevRev PLuG SDK serves as a direct replacement for the legacy UserExperior Web SDK. This section outlines the steps to facilitate a seamless migration from UserExperior to DevRev PLuG.
+
+<Callout intent="note">
+NPM package support is discontinued.
+</Callout>
+
+## Installation
+
+Update your script tags as shown to migrate successfully to the DevRev PLuG SDK.
+
+<Tabs>
+  <Tab title="UserExperior implementation">
+    ```jsx
+
+   <script src="https://unpkg.com/user-experior-web@latest/bundle/ue-web-bundle.js"></script>
+   ```
+  </Tab>
+  <Tab title="Replace with PLuG">
+   ```jsx
+
+   <script type="text/javascript" src="https://plug-platform.devrev.ai/static/plug.js"></script>
+   ```
+  </Tab>
+</Tabs>
+
+## Initialization
+
+Update your initialization code to work with the DevRev PLuG SDK, ensuring session recording is enabled and handling events appropriately.
+
+<Tabs>
+  <Tab title="UserExperior implementation">
+```jsx
+
+const ue = new UserExperior.init();
+ue.startRecording("<your_unique_app_id>")
+.then(() => {
+  // code you want to execute after recording starts
+  // you can call the setUserIdentifer method here
+})
+.catch((error) => {
+  // code you want to execute if recording fails
+});
+```
+  </Tab>
+  <Tab title="Replace with PLuG">
+```jsx
+
+window.plugSDK.init({
+   app_id: "<your_unique_app_id>",
+   enable_session_recording: true,
+});
+window.plugSDK.onEvent((payload) => {
+	if (payload.type === 'ON_OBSERVABILITY_READY') {
+    // code you want to execute after recording starts
+	}
+});
+```
+  </Tab>
+
+</Tabs>
+
+## Recording options
+
+<Tabs>
+  <Tab title="UserExperior implementation">
+```jsx
+
+ue.startRecording("243b0f40-db67-4f3e-b51d-c52001dd858a", {
+	sessionReplay: {
+		// To mask all the input fields pass the following.
+		maskAllInputs: true,
+
+		// Available Mask Input Options:
+		maskInputOptions: {
+		    color: boolean,
+		    date: boolean,
+		    'datetime-local': boolean,
+		    month: boolean,
+		    number: boolean,
+		    range: boolean,
+		    search: boolean,
+		    text: boolean,
+		    time: boolean,
+		    url: boolean,
+		    week: boolean,
+		    textarea: boolean
+		},
+
+		// Mouse moves are also ignored by default by the SDK to avoid unnecessary events increasing the payload size. To enable mouse move capture  
+		// you need to specify the following option to capture the mouse movements:
+		captureMouseMove: true 
+
+		// By default we track network log in session. To disable network log tracking you can specify the following option:
+		captureNetworkLogs: false 
+
+		// By default we track console errors in session. To disable console tracking you can specify the following option:
+		captureConsoleLogs: false 
+	}
+});
+```
+</Tab>
+  <Tab title="Replace with PLuG">
+  ```jsx
+
+window.plugSDK.init({
+    app_id: "<your_unique_app_id>",
+    session_recording_options: {
+			sessionReplay: {
+				maskAllInputs?: boolean;
+				maskInputOptions?: {
+					color: boolean;
+					date: boolean;
+					'datetime-local': boolean;
+					email: boolean;
+					month: boolean;
+					number: boolean;
+					range: boolean;
+					search: boolean;
+					tel: boolean;
+					text: boolean;
+					time: boolean;
+					url: boolean;
+					week: boolean;
+					textarea: boolean;
+					select: boolean;
+				};
+				captureMouseMove?: boolean;
+				captureNetworkLogs?: boolean;
+				captureConsoleLogs?: boolean;
+			}
+    },
+    enable_session_recording: true,
+})
+```
+  </Tab>
+
+</Tabs>
+
+## Masking
+
+The same CSS classes from UserExperior are compatible with the DevRev PLuG SDK without modifications.
+
+**Specific HTML elements**
+
+To mask a div:
+ ```
+<div class="ue-mask">Hello World</div>
+ ```
+
+**Input elements**
+
+To mask input text:
+
+ ```
+<input class="ue-input-mask"/>
+ ```
+
+To completely block the input element:
+
+ ```
+<input class="ue-block"/>
+ ```
+
+These classes ensure elements are masked or blocked as required.
+
+## User identification
+
+<Tabs>
+  <Tab title="UserExperior implementation">
+ ```jsx
+
+// Setting a user identifier
+ue.setUserIdentifier('unique-user-identifier');
+
+// Passing user properties
+ue.setUserIdentifier('unique-user-identifier', {
+  key1: value1,
+  key2: value2,
+  // ...
+});
+ ```
+</Tab>
+<Tab title="Replace with PLuG">
+  DevRev introduces the concept of a `RevUser` object for enhanced user identity management. Use this to associate sessions with users and attach properties. For more details, refer to the [DevRev user identity](https://developer.devrev.ai/sdks/web/user-identity).
+</Tab>
+</Tabs>
+
+## Logging custom events
+
+This approach facilitates custom event tracking, similar to the process in UserExperior, with additional capabilities.
+
+<Tabs>
+  <Tab title="UserExperior implementation">
+```jsx
+
+ue.logEvent("YOUR_EVENT", {
+    key1: value1,
+    key2: value2,
+    ...
+})
+```
+  </Tab>
+  <Tab title="Replace with PLuG">
+```jsx
+
+window.plugSDK.trackEvent("YOUR_EVENT", {
+    key1: value1,
+    key2: value2,
+    ...
+})
+```
+  </Tab>
+
+</Tabs>
+
+For more details, see the [Track events](https://developer.devrev.ai/sdks/web/track-events).
+
+## Session attributes (User properties)
+
+UserExperior allowed setting session-level properties but didn’t have a global user object. DevRev utilizes the `RevUser` object and `addSessionProperties()` for enhanced functionality.
+
+For setting user properties, refer to the [User Identification](https://developer.devrev.ai/sdks/web/user-identity).
+
+<Tabs>
+  <Tab title="UserExperior implementation">
+```jsx
+
+ue.setUserProperties({
+    key1: value1,
+    key2: value2,
+    ...
+})
+```
+  </Tab>
+  <Tab title="Replace with PLuG">
+```jsx
+
+window.plugSDK.addSessionProperties({
+    key1: value1,
+    key2: value2,
+    ...
+})
+```
+  </Tab>
+
+</Tabs>
+
+## Restart a session
+
+Terminate the current session recording and start a new one.
+
+<Tabs>
+  <Tab title="UserExperior implementation">
+```jsx
+
+ ue.restartSession();
+```  
+</Tab>
+  <Tab title="Replace with PLuG">
+```jsx
+
+await window.plugSDK.shutdown();
+window.plugSDK.init({
+   app_id: "<your_unique_app_id>",
+   enable_session_recording: true,
+});
+```
+  </Tab>
+
+</Tabs>
+
+
+
+

fern/versions/public.yml

@@ -94,6 +94,9 @@ navigation:
           - page: Custom implementation
             slug: customize
             path: ../docs/pages/sdks/web/customize.mdx
+          - page: UserExperior migration
+            slug: migration
+            path: ../docs/pages/sdks/web/ue-migration.mdx
       - section: DevRev SDK for Android
         slug: android
         icon: fa-brands fa-android