Skip to content

Integrate Checksum SDK

Checksum collects session data using a lightweight JavaScript SDK that is loaded onto the tested web application and deployed on one of the company’s environments, preferably production, but you can also integrate the SDK in your staging or testing environment, or even generate tests without integrating the SDK. Our recommendation is to integrate our SDK on both production and staging/testing.

SDK Integration

  1. Add Checksum SDK To Your Main HTML
<script src="https://cdn.checksum.ai/checksum-sdk-min-0.2.js"></script>
  1. Initialize Checksum as soon as your app is mounted.
window.checksumai?.init("SDK_KEY");
  1. [Optional] Identify user login and logout

When the user logs in, identify the user (you can use any consistent ID. Checksum does not need to know the user identity)

window.checksumai?.identify(
'user_unique_id', // distinct_id, required
{
userProperty: 'value1', // optional user property
anotherUserProperty: 'value2’ // another optional user property
});

When the user logs out, reset

window.checksumai?.reset();

Data Privacy

Simply explained, without any filters or masks, the collection includes data necessary to reconstruct the web page. This includes assets such as CSS files, text, image URLs, HTML elements and inner text (in JSON format), and user activity like clicks and types.

Privacy controls

However, we do offer very strong privacy tools to minimize user data processed by Checksum. There are a few levels of protection:

  1. Hashing: Checksum can hash all inner text and input values automatically for all elements on the client side, so the raw data doesn’t leave your user browsers.
  2. Masking: Checksum automatically replaces inner text with “*” automatically for sensitive elements like passwords, zip code, SSN, email addresses, any text with only numbers. You can also customize which elements are masked.
  3. Blocking: On very rare occasions, hashing and masking the inner text and inputs is not enough. For example, when sensitive data is added to HTML attributes or when just the interaction with an element might be sensitive regardless of the inner text. In that case, you can manually block the entire elements and all related events.

By default, Checksum does not hash any text and only masks passwords. You can customize this behavior in Checksum by passing a sessionRecording object to your init function as follows:

{
masking?: {
// If true, checksum will mask sensitive text, such as phone numbers, SSNs, zip codes, credit card info or any field that contains only numbers.
// Passwords are masked automatically regardless.
maskSensitiveText?: boolean;
// Provide a custom masking function so you can granularly control which elements will be masked
customMaskFunction?: (value: string, element?: HTMLElement) => string;
};
hashing?: {
// Hash all input fields
hashAllInputs?: boolean;
// Hash all text fields
hashAllText?: boolean;
};
};

Hashing and Masking Example

A typical configuration, for example, would be to mask all sensitive elements and hash all text and inputs in production. For that, initialize Checksum as follows

const isProduction
window.checksumai?.init(
"<SDK_KEY>",
{
sessionRecording: {
hashing: {
hashAllText: isProduction,
hashAllInputs: isProduction,
},
masking: {
maskSensitiveText: isProduction,
},
},
},
{}
); // pass empty options (internal use)

Custom Masking Function

If you would like to customize which elements are masked, you can pass a custom masking function. For example, the code below will mask all elements of type search

checksumai?.init(
"SDK_KEY",
{
sessionRecording: {
masking: {
customMaskFunction: (value, element) => {
if (element?.attributes["type"]?.value === "search") {
// If this is a search input, replace input with stars
return "*".repeat(value.length);
}
// Otherwise, return it as is
return value;
},
},
},
},
{}
);