Skip to content

edited session replays initialization #242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

edited session replays initialization #242

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
342d985
removed session_recording_enabled
AvinashSingh10-1 May 29, 2025
6e581cb
testing the change
AvinashSingh10-1 May 29, 2025
57cbb3e
added note in session recordings
AvinashSingh10-1 May 29, 2025
206d67a
fixed position of note
AvinashSingh10-1 May 29, 2025
a7ff4bc
changed navigate to go
AvinashSingh10-1 May 29, 2025
93d7165
modified note
AvinashSingh10-1 May 30, 2025
49c8fd0
merge conflict resolved
AvinashSingh10-1 May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 85 additions & 78 deletions fern/docs/pages/sdks/web/ue-migration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,26 @@

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>
<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 src="https://unpkg.com/user-experior-web@latest/bundle/ue-web-bundle.js"></script>

````
</Tab>
<Tab title="Replace with PLuG">
```jsx

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

<script type="text/javascript" src="https://plug-platform.devrev.ai/static/plug.js"></script>
````
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be 3 backticks not 4?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it automatically became 4 backticks instead of 3 when I saved the file.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What editor or utility made it 4?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am using prettier extension for auto formatting


<script type="text/javascript" src="https://plug-platform.devrev.ai/static/plug.js"></script>
```
</Tab>
</Tabs>

Expand All @@ -36,27 +36,33 @@ Update your initialization code to work with the DevRev PLuG SDK, ensuring sessi
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
// 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
// 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
}
});
```
````
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 backticks again.


<Note>
To enable session recordings, go to **Settings** > **Support** > **Session
Replays** and enable recordings for your desired platforms.
</Note>

</Tab>

</Tabs>
Expand All @@ -68,38 +74,35 @@ window.plugSDK.onEvent((payload) => {
```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
}
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
}
});
```

````
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 backticks again.

</Tab>
<Tab title="Replace with PLuG">
```jsx
Expand Down Expand Up @@ -133,7 +136,8 @@ window.plugSDK.init({
},
enable_session_recording: true,
})
```
````

</Tab>

</Tabs>
Expand All @@ -145,23 +149,24 @@ The same CSS classes from UserExperior are compatible with the DevRev PLuG SDK w
**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.

Expand All @@ -176,14 +181,15 @@ ue.setUserIdentifier('unique-user-identifier');

// Passing user properties
ue.setUserIdentifier('unique-user-identifier', {
key1: value1,
key2: value2,
// ...
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).
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>

Expand All @@ -192,27 +198,29 @@ ue.setUserIdentifier('unique-user-identifier', {
This approach facilitates custom event tracking, similar to the process in UserExperior, with additional capabilities.

<Tabs>
<Tab title="UserExperior implementation">
<Tab title="UserExperior implementation">
```jsx

ue.logEvent("YOUR_EVENT", {
key1: value1,
key2: value2,
...
key1: value1,
key2: value2,
...
})
```
````

</Tab>
<Tab title="Replace with PLuG">
```jsx

window.plugSDK.trackEvent("YOUR_EVENT", {
key1: value1,
key2: value2,
...
key1: value1,
key2: value2,
...
})
```

````
</Tab>

</Tabs>

For more details, see the [Track events](https://developer.devrev.ai/sdks/web/track-events).
Expand All @@ -232,7 +240,8 @@ ue.setUserProperties({
key2: value2,
...
})
```
````

</Tab>
<Tab title="Replace with PLuG">
```jsx
Expand All @@ -255,8 +264,9 @@ Terminate the current session recording and start a new one.
<Tab title="UserExperior implementation">
```jsx

ue.restartSession();
```
ue.restartSession();

````
</Tab>
<Tab title="Replace with PLuG">
```jsx
Expand All @@ -266,11 +276,8 @@ window.plugSDK.init({
app_id: "<your_unique_app_id>",
enable_session_recording: true,
});
```
````

</Tab>

</Tabs>




Loading