Is it possible to install and use clarity-js instead of embedding script?

[mikan3rd]

Clarity manual says to set it up by embedding a script. I have already confirmed that it works correctly when script is embedded. https://docs.microsoft.com/en-us/clarity/clarity-setup

However, I think it would be smarter if I could npm install and use clarity-js . After doing npm install clarity-js, I started clarity as follows, but the analysis did not POST. I couldn't see any errors either.

import { clarity } from 'clarity-js';

clarity.start({ projectId: ClarityProjectId });

Is it possible to use clarity-js instead of embedding script? What is the purpose of clarity-js if it is not available?

It would be helpful if you could specify how to use it in the README.

[karandatwani92]

@mikan3rd, have you figured this out to work at your end?

[henriquemod]

After a couple of days trying to use Clarity-JS in a React Project i was finally able to make it work, however the lack of documentation made it very hard.

Since i wanted to track also user info, i implemented as soon as user authenticate in the system:

useEffect(() => {
        clarity.consent()
        if (user?.email) {
            const { id, email, name } = user

            // The only way a found to pass specific info to clarity so i can filter info was using 
            // cookies
            setCookie('user_id', id, 1)
            setCookie('user_email', email, 1)
            setCookie('user_name', name, 1)
            clarity.set('user_id', id)
            clarity.set('user_email', email)
            clarity.set('user_name', name)

            clarity.start({
                projectId: 'YOUR_PROJECT_ID',
                upload: 'https://m.clarity.ms/collect',
                track: true,
                content: true,
                cookies: ['user_id', 'user_email', 'user_name']
            })
        }

        return () => {
            clarity.stop()
        }
    }, [user])

Also give it some time, some times it can take half an hour until i see some recordings on clarity website

[srikiranvelpuri]

Thank you @henriquemod for the code snippet, But using clarity-js instead of embedding the script, the clarity live extension is failing , is there any config change required to allow the plugin .

[almcaffee]

Would be nice for the team to actually add some documentation here. Has anyone come across any docs yet?

[giulianok]

any update on this? what's the best approach to replace the embedded script

[karandatwani92]

Install:

npm i clarity-js

Import:

import { clarity } from 'clarity-js';

Use:

clarity.start({
    projectId: "xxxxxx",
    upload: 'https://m.clarity.ms/collect',
    track: true,
    content: true,
});

[tmchow]

import { clarity } from 'clarity-js';

This results in error of Module '"clarity-js"' has no exported member 'clarity' since the 'clarity-js' package exports the 'clarity' object as a whole, not its properties as named exports.

however once you try to import it with:

import * as clarity from 'clarity-js';

You get errors on trying to use start():

Property 'start' does not exist on type 'typeof import("clarity-js")'.

[tmchow]

No amount of mucking with this could I get this to cleanly work. I've raised this issue here: https://github.com/microsoft/clarity/issues/408

[hocktoh89]

honestly speaking, it is from Microsoft, i think it will be great to have documentation of how to use clarity-js right? if it is meant to be used by others. Kamsahamida! Xie Xie! Thank You!

[HemangDholu]

window is not defined at eval (c:/Users/sit310.SIT/Desktop/CloneSurveyor_Admin/node_modules/clarity-js/build/clarity.module.js:76:9) at async instantiateModule (file:///C:/Users/sit310.SIT/Desktop/CloneSurveyor_Admin/node_modules/vite/dist/no