script.js

async function loadSnippyly() {

    await Snippyly.init("<Your API Key Goes Here>");

    const presenceElement = Snippyly.getPresenceElement();
    presenceElement.getOnlineUsersOnCurrentDocument().subscribe((data) => {
        console.log('getOnlineUsersOnCurrentDocument in html', data);
    });

    // To enable text comment feature
    const commentElement = Snippyly.getCommentElement();
    commentElement.enableTextComments(true);

    if (localStorage.getItem('user')) {
        try {
            const user = JSON.parse(localStorage.getItem('user'));
            if (user) {
                signIn(user.userId);
            }
        } catch (err) {
            localStorage.removeItem('user');
            window.location.reload();
        }
    } else {
        const userDetailsContainer = document.getElementById('userDetailsContainer');
        userDetailsContainer.style.display = 'none';

        const loginContainer = document.getElementById('loginContainer');
        loginContainer.style.display = 'block';
    }
}

const users = [
    {
        userId: '1',
        name: 'James Smith',
        photoUrl: '',
        email: '[email protected]',
        plan: 'free',
        groupId: '',
        contacts: [
            {
                userId: '2',
                name: 'Maria Garcia',
                email: '[email protected]',
            },
            {
                userId: '3',
                name: 'Sarah Wilson',
                email: '[email protected]',
            }
        ]
    },
    {
        userId: '2',
        name: 'Maria Garcia',
        photoUrl: '',
        email: '[email protected]',
        plan: 'paid',
        groupId: '',
        contacts: [
            {
                userId: '1',
                name: 'James Smith',
                email: '[email protected]',
            },
            {
                userId: '3',
                name: 'Sarah Wilson',
                email: '[email protected]',
            }
        ]
    },
    {
        userId: '3',
        name: 'Sarah Wilson',
        photoUrl: '',
        email: '[email protected]',
        plan: 'trial',
        groupId: '',
        contacts: [
            {
                userId: '1',
                name: 'James Smith',
                email: '[email protected]',
            },
            {
                userId: '2',
                name: 'Maria Garcia',
                email: '[email protected]',
            }
        ]
    }
];

async function signIn(userId) {
    if (Snippyly) {
        const user = users.find((user) => user.userId === userId);
        if (user) {
            const userDetails = document.getElementById('userDetails');
            userDetails.innerText = `Hi ${user.name}`;
            const userDetailsContainer = document.getElementById('userDetailsContainer');
            userDetailsContainer.style.display = 'block';

            const loginContainer = document.getElementById('loginContainer');
            loginContainer.style.display = 'none';

            localStorage.setItem('user', JSON.stringify(user));
            await Snippyly.identify(user);
        }
    }
}

function signOut() {
    localStorage.removeItem('user');
    window.location.reload();
}