Installing and Configuring UI SDK

Procedure

  1. Configuring Required Properties
    1. Download pako.min.js.
    2. Include pako.min.js.
      Ensure that you include pako.min.js at the top of the script.
    3. Default Configuration:
      Ensure that default configurations are in place. This configuration contains default values for various settings.
  2. Setting Up the Queue
    In the configuration, define the queue settings, including endpoints and other parameters.
    queue: {
	asyncReqOnUnload: true,
	useBeacon: true,
	useFetch: true,
	xhrEnabled: true,
	queues: [{
		qid: "DEFAULT",
		endpoint: "https://your-endpoint-url/DiscoverUiPost.php",
		maxEvents: 30,
		timerInterval: 60000,  // Time in milliseconds between requests
		maxSize: 300000,       // Maximum allowed size per request
		checkEndpoint: false,
		endpointCheckTimeout: 4000,
		encoder: "gzip"        // Type of encoder used
	}]
}
    Endpoint All requests are posted to the configured endpoint.
    maxSize Maximum allowed size per request (in bytes).
    maxEvents Maximum number of events per request.
    timerInterval Interval (in ms) between requests.
    encoder The type of encoder used for requests, for example GZIP.
  3. Configuring Cookies
    In the modules object, set the dccookie property to True to enable DCCookie.
    modules: {
	DCCookie: {
		enabled: true
	}
}
  4. Configuring DOM Capture
    1. In the replay object, configure the domCapture settings to specify when and how to capture DOM events.
    2. Set the enabled parameter to True. 
      replay: {
    domCapture: {
        enabled: true,
        triggers: [
            { event: 'click' },
            { event: 'change' },
            { event: 'load' },
            { event: 'visibilitychange' }
        ]
    }
}
    3. Services: DOM Capture
      Under services, configure the domCapture object to capture a full DOM snapshot or capture just a DOM diff.
      domCapture: {
    diffEnabled: true,  // Set to false for full DOM capture on every request
    options: {
        maxMutations: 300,        // Full DOM captured if mutation threshold is exceeded
        maxLength: 10000000,      // Maximum length of snapshot (in bytes)
        captureFrames: false,     // Should child frames/iframes be captured?
        captureShadowDOM: false,  // Should shadow DOM be captured?
        captureStyle: true,       // Capture inline styles to reduce snapshot size
        keepImports: true,        // Capture <link>, <rel>, <import> tags
        removeComments: true,     // Remove comments from snapshot
        removeScripts: false,     // Should <script> tags be removed?
        removeBase64: 50000,      // Remove base64 images exceeding this size (0 removes all)
        captureJSS: false,        // Capture CSS styles for React/JSS sites
        //customStyle: "#className {display: none;}" // Apply custom styles
    }
}
  5. Setting Privacy Options
    Configure privacy settings correctly to comply with your data security and privacy policies. Refer to company guidelines for setting privacy parameters.