Session recording options

During PLuG SDK initialization, you can provide custom attributes for session recording options. If no custom attributes are specified, the default options will be used.

PLuG SDK offers the ability to hide sensitive user information by masking it in session recordings. During session replays, masking replaces user-visible or typed content in specific elements with asterisks ("*"). This ensures that sensitive information is not displayed in the recordings, protecting user privacy.

During PLuG initialization, you have several options to manually configure which elements should be masked. Masking is applied based on the element's ID, allowing you to control which specific fields are protected in the session replay.

1 window.plugSDK.init({
2 // Please ensure you replace the app_id with your unique app id
3     app_id: "<your_unique_app_id>",
4     session_recording_options: PlugStartRecordingOptions,
5 })
6 
7 PlugStartRecordingOptions = {
8     sessionReplay: {
9         maskAllInputs?: boolean;
10         maskInputOptions?: {
11             color: boolean;
12             date: boolean;
13             'datetime-local': boolean;
14             email: boolean;
15             month: boolean;
16             number: boolean;
17             range: boolean;
18             search: boolean;
19             tel: boolean;
20             text: boolean;
21             time: boolean;
22             url: boolean;
23             week: boolean;
24             textarea: boolean;
25             select: boolean;
26         };
27         captureMouseMove?: boolean;
28         captureNetworkLogs?: boolean;
29         captureConsoleLogs?: boolean;
30         recordCrossOriginIframes?: boolean;
31     }
32 }

Option	Description	Default
maskAllInputs	Whether all input elements (irrespective of their types) should be masked during session recording.	False
maskInputOptions	Whether specific input element types should be masked during session recording.	The masking preference applies as follows: input elements with types email, tel, or password will be masked during session recording, while other input types will not be masked. For example, <input type="email"/> will be masked, but <input type="text" name="email"/> will not be masked.
captureMouseMove	Whether to capture the full mouse movement throughout the session or only track mouse clicks.	False
captureNetworkLogs	Whether network logs should be captured during the session.	True
captureConsoleLogs	Whether the session will capture console logs or not.	True
recordCrossOriginIframes	Whether interactions occurring within the chat widget and search agent should be captured or not.	True

In addition, you can use the following CSS classes to mask specific elements on your webpage:

Purpose	CSS classes
To mask all page elements, add the CSS class ue-mask to your app's body tag.	<body class="ue-mask"> ... </body>
To mask a specific element during capture, apply the CSS class ue-mask to it.	<div class="ue-mask"> Hello World </div>
Apply the ue-mask CSS class to images to mask them with a black overlay during capture.	<img class="ue-mask" src=”…” >
Use the CSS class ue-input-mask to mask input elements, displaying their data as * in session replays. NOTE**: Password fields are masked by default, but applying the ue-input-mask class adds extra security.	<input class="ue-input-mask"/>
To block input data from being captured in the session replay, apply the ue-block class. This prevents the SDK from recording the input.	<input class="ue-block"/>