HTML Code Snippet

Supported technologies

But not limited to..

  • Basic web (HTML CSS and Javascript)
  • React.js
  • Angular
  • Vue.js
  • Next.js
  • Flutter Web

To integrate the Web SDK follow these steps:

  1. Replace 'Your_App_Key' in the following HTML code with the App Key from your UXCam platform
  2. Copy the snippet and include it in all your HTML files before the closing </head> tag:

<script type="text/javascript" defer="">
(function(appKey, opts) {
    window.uxc = {
        __t: [],
        __ak: appKey,
        __o: opts,
        event: function(n, p) {
            this.__t.push(['event', n, p]);
        },
        setUserIdentity: function(i) {
            this.__t.push(['setUserIdentity', i]);
        },
        setUserProperty: function(k, v) {
            this.__t.push(['setUserProperty', k, v]);
        },
        setUserProperties: function(p) {
            this.__t.push(['setUserProperties', p]);
        },
    };
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//websdk-recording.uxcam.com/index.js';
    script.async = true;
    script.defer = true;
    script.id = 'uxcam-web-sdk';
    script.crossOrigin = 'anonymous';
    head.appendChild(script);
})('Your_App_Key', {}); 
</script>

Verify the integration

  1. Deploy or serve your site locally
  2. Check for the [UXCam] connected successfully message in the browser console
  3. Browse a few pages for at least 30 seconds
  4. Check your UXCam Dashboard — your session should appear after 5 - 10 minutes

Next steps - Setup and configuration

StepTaskGoal
1Configure occlusion Jump →Hide sensitive user data
2Define Pages Jump →Group similar URLs under consistent names
3Set User Identity & Propertie Jump →Unify sessions, power funnels & cohorts
4Add Custom Events Jump →Track user interactions and key behaviours
5 Check Content Security Policy Jump →Ensure the Web SDK functions correctly
6 ★Define App version Jump →Debug issues across different releases
7 ★Enable Iframe Recording Jump →Capture user interactions inside iframes

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Success

Negative potential consequences of an action.

Support

For questions or support, reach out to us at [email protected].