SDKs
Help centerCommunityDevelopersAcademyStatus

Integrate the Connect SDK into your web application (Ultimate)

Guide for Connect Ultimate customers

Suggest Edits

The Connect Web SDK is a JavaScript library that captures visitor interactions with your web application and makes them available for analysis in Acoustic Connect.

The library works with any web application using standard HTTP or HTTPS protocols and supports all major browsers — Chrome, Edge, Safari, and Firefox. We recommend using the latest stable browser version or one of the two previous major versions. The library is compatible with JavaScript ES5.1.

📘

Note

This guide covers integration for Ultimate subscriptions. If you have an Premium subscription, see Integrate the Connect SDK into your web application (Premium). If you have a Pro subscription, see Behavioral signals in the Connect web library (Pro).

Prerequisites

Before you begin, make sure you have:

For accurate session capture, assign unique id attributes to all UI controls you want to track. Elements without IDs are identified by XPath, which is less stable and can break if the page structure changes.

Step 1: Add and initialize the library

Add the following to the <head> of your webpage template and replace the placeholder values with your Connect credentials:

<script src="https://cdn.goacoustic.com/connect/latest/acoconnect.min.js"></script>
<script>
    window.TLT && window.TLT.initUltimate({
        appKey: "YOUR APP KEY",
        postUrl: "YOUR COLLECTOR URL"
    });
</script>

initUltimate() automatically applies the correct configuration for your subscription tier: all behavioral signals + DOM capture for session replay.

If you need configuration beyond the tier-specific defaults, use initLibAdv() instead:

TLT.initLibAdv({
    appKey: "YOUR APP KEY",
    postUrl: "YOUR COLLECTOR URL",
    callback: function() {
        // Trigger behavioral signals here
    }
});

See the API reference for the full list of initLibAdv() parameters.

Previous versions of the script are available in the Acoustic CDN for debugging purposes.

📘

Self-hosting

If you prefer to host the library on your own server rather than pulling it from our CDN, you can download it from the Acoustic CDN and reference it from your server instead. The initialization snippet above remains the same. Do not modify the core library section unless instructed by our Services team.

Step 2: Configure the library

The library initializes with sensible defaults. The most important settings to be aware of are listed below. For the self-hosted approach, these settings live inside your library file. For the CDN approach, pass a custom configuration object using initLibAdv().

const myConfig = TLT.getDefaultConfig();

// --- Queue settings ---
// Controls how often data is sent to the collector.
// Reduce maxEvents and timerInterval for mobile or high-traffic apps.
myConfig.services.queue.queues[0].maxEvents = 30;        // Flush after 30 events
myConfig.services.queue.queues[0].timerInterval = 60000; // Flush every 60 seconds
myConfig.services.queue.queues[0].maxSize = 300000;      // Max payload size in bytes

// --- Privacy ---
// Masks sensitive inputs by default. Extend targets as needed.
// myConfig.services.message.privacy = [ ... ];

// --- DOM capture ---
// Controls session replay fidelity. Enable only what your app needs.
myConfig.services.domCapture.options.captureShadowDOM = false; // Enable if using Shadow DOM
myConfig.services.domCapture.options.captureFrames = false;    // Enable if capturing iframes

// --- Inactivity timeout ---
// Sessions end after this period of inactivity (milliseconds).
myConfig.core.inactivityTimeout = 1740000; // 29 minutes

For a full reference of configuration options, see the API reference.

Verifying the integration

To confirm the library has loaded, open your browser's developer console and run:

TLT.getLibraryVersion()

This should return the current library version string. If you see TLT is not defined, the library has not loaded — check that the script tag is present in the page source and the URL is correct.

You can also verify that sessions are being captured:

  1. Click around on your website.
  2. In Connect, go to Insights > Sessions > Session search.
  3. Find your session and watch the replay.

Next steps

  1. Before deploying to production, configure privacy masking to protect your users' personally identifiable information (PII). See Enable privacy protection in the Connect Web SDK.
  2. Work with your Acoustic representative to discuss options for deploying and hosting the SDK and to verify that all necessary data is captured correctly.

Related pages

Updated about 4 hours ago