Skill Level: Intermediate


Review the UI Capture SDK overview for system prerequisites, supported browsers, and guidelines and tips before installing.


  1. Download the UI Capture SDK

    There are three methods to download the UI Capture SDK:


      A user account with administrator privileges is required to access the UI Capture SDK on the IBM Cloud portal.

    1. Login to the IBM Tealeaf cloud portal.
    2. Select the “Admin” link in your username dropdown to go to the Admin Management page.
    3. Select the “Applications” tab.
    4. Select the “Configure” link for the application to launch the UI Capture SDK configuration wizard.
    5. Download and configure the UI Capture SDK using the configuration wizard.


      The UI Capture SDK release bundle is also available from Fix Central in the IBM Support portal.

    1. Login to the IBM Support portal: https://www.ibm.com/support
    2. Select Fix Central from the Downloads dropdown menu.
    3. On Fix Central landing page, make the following choices:
      • Product Selector – Tealeaf Customer Experience
      • Installed Version – All
      • Platform – Windows
    4. On the Identify fixes page enter “UI Capture” in the text search field and press Continue.
    5. On the results page, sort by Release date to get the latest UI Capture SDK release bundle.
    6. The Production build of the UI Capture SDK, tealeaf.js, can be obtained from the W3C folder. The example configuration file, defaultconfiguration.js, is in the root folder.


  2. Install the UI Capture SDK JavaScript on your web server

    The UI Capture SDK should be installed in a directory on the web server which contains site JavaScript. For best performance, the JavaScript should be served with caching and compression encoding (gzip) enabled. Consult your web server documentation for enabling these settings.

    Do not bundle the UI Capture SDK with unrelated scripts. Doing so creates an unnecessary dependency between otherwise completely independent scripts. The UI Capture SDK can be bundled with 3rd party scripts that it has dependencies on, such as pako, hammer, and jQuery.

    Use the non-minified, human readable copy of the UI Capture SDK to ease the integration and debugging in the development environment. The non-minified JavaScript makes it easier to debug and add console logging functionality. It is not recommended to use the non-minified build in a production setting or during performance testing.

    Verify the JavaScript is accessible by navigating to the URL in the browser.

  3. Include the UI Capture SDK JavaScript in your web application

    Use the URL of the UI Capture SDK JavaScript and include it in the HTML using the script tag. It is strongly recommended to set the async attribute for the best performance.

    The UI Capture SDK JavaScript can be included anywhere in the HTML and at any time during the page lifecycle, including after page load. However, it is important to verify correct operation with a simple static include before switching to any dynamic loading mechanisms.

    To capture all user interaction with the page, the script must be statically included at the top of the HTML page in the <head> section as follows:

    <script async src=”/scripts/tealeaf.js”></script>

    Verify the JavaScript is loaded by checking for the presence of the window.TLT object on the page.

Expected outcome

You installed the UI Capture SDK. Next, implement and configure UI Capture for your website!

Join The Discussion

Your email address will not be published. Required fields are marked *