Add Collaboration to your Web App

Add Collaboration to your Web App

Easily add real-time presence, video conference, and contextual comments to your web app. SuperViz provides a complete collaboration SDK and API for developers.

trusted_by
easy_integration

For developers, by developers

Our developer friendly feature-rich API and SDK gets you up and running with just a few lines of code.

				
					function App() {
    const { pin } = useCanvasPin({})

    return (
        // init room ::         
        <SuperVizRoomProvider
            developerKey={'developer-key'}
            group={{
                id: 'react-sdk-group',
                name: 'react sdk',
            }}
            participant={{
                id: 'react-sdk-participant',
                name: 'John Doe',
            }}
            roomId={roomId}
        >
        {/*  add mousepointers and contextual comments::. */}
        <MousePointers>
          <Comments pin={pin} >
            <canvas ref={canvas} />
          </Comments>
        </MousePointers> 
        {/*  add video huddle::. */}
        <VideoConference />
      </SuperVizRoomProvider>
  );
}
				
			
				
					<script lang="ts">
export default {
    setup() {
        const room = ref(null);
        // init room :: 
        async function initializeRoom() { 
            room = await SuperVizRoom(DEVELOPER_KEY, {
                roomId: 'roomId',
                group: {
                    id: 'vue-group',
                    name: 'Vue Group',
                },
                participant: {
                    id: 'vue-participant',
                    name: 'John Doe',
                },
            });
            // add mousepointers and contextual comments::   
            const mouse = new MousePointers('my-canvas');
            const pinAdapter = new CanvasPin('my-canvas');
            const comments = new Comments(pinAdapter);
        }
    
        onBeforeMount(() => initializeRoom());
        onBeforeUnmount(() => room?.destoy());
    },
};
</script>
				
			
				
					const room = null;

async function initializeRoom() { 
    // init room :: 
    room = await window.SuperVizRoom.init(DEVELOPER_KEY,{
        roomId: 'roomId',
            group: {
            id: 'vanilla-group',
            name: 'vanilla Group',
        },
        participant: {
            id: 'vanilla-participant',
            name: 'John Doe',
        },
    });
    
    // add mousepointers and contextual comments::   
    const mouse = new window.SuperVizRoom.MousePointers('my-canvas');
    const pinAdapter = new window.SuperVizRoom.CanvasPin('my-canvas');
    const comments = new window.SuperVizRoom.Comments(pinAdapter);

    room.addComponent(mouse);
    room.addComponent(comments);
}
				
			

Designed for Everywhere

Easily integrate with the world’s leading Javascript frameworks.

React

Angular

Vue.js

Svelte

jQuery

Vanilla js

Next js

Others

Easy to use

1

Create a Free Account

Get started by creating a free account— it’s simple and quick. Set the stage for improved collaboration.

2

Build With no Costs

Our flexible SDK is designed for an easy building process. Explore and integrate collaboration features at no initial cost.

3

Ship

Transition from the development to production. SuperViz is designed to ensure an easy transition from creation to deployment

SuperViz digital twin plugin
plugins

Empowering Digital Twins Collaboration

SuperViz is your gateway to integrated collaboration. Alongside support for regular web applications, our SDK is designed for platforms like Autodesk, Matterport, Three.js, and more. Seamlessly blend real-time interactions with digital twins and 3D applications, ensuring that whether you’re in a conventional web app or inside spatial content, the experience remains fluid and intuitive. 

Who can Benefit From SuperViz?

Integrate SuperViz into your creative and productivity tools to enhance collaboration capabilities. This allows for real-time interaction, review, and iteration on design projects, be it UI/UX design tools, video editors, or online brainstorming applications.

Elevate your sales platforms with SuperViz Video and Presence, facilitating interactive and real-time presentations for live demos and personalized showcases to potential customers.

SuperViz Digital Twin and 3D plugins enable real-time collaboration within BIM projects, facilitating rich interactive discussions on architectural designs.

easy integration

For Developers, by Developers

Our developer friendly feature-rich API and SDK gets you up and running with just a few lines of code.

				
					// NPM
npm install --save @superviz/sdk

// Yarn
yarn add @superviz/sdk

// pnpm
pnpm install --save @superviz/sdk

// CDN
<script type="module" src="https://unpkg.com/@superviz/sdk@latest"></script>


				
			
				
					async function initializeSuperVizRoom() {
    const room = await SuperVizRoom(DEVELOPER_KEY, {
      roomId: "<ROOM-ID>",
      group: {
        id: "<GROUP-ID>",
        name: "<GROUP-NAME>",
      },
      participant: {
        id: "<USER-ID>",
        name: "<USER-NAME>"
      },
    });
    
    return room;
}
				
			
				
					// SDK listeners ::
room.subscribe(ParticipantEvent.LOCAL_JOINED, onMyParticipantJoined);

const onMyParticipantJoined = function (participant) {
    // add cursor presence to room ::
    const cursors = new Cursors(HTMLElement);
    room.addComponent(cursors);
    
    // add comments to room ::
    const comments = new Comments(HTMLElement);
    room.addComponent(comments);
};
      

 
				
			

Designed for Everywhere

Easily integrate with the world’s leading Javascript frameworks.

React

Angular

Vue.js

Svelte

jQuery

Vanilla js

Next js

Others

This website uses cookies to give you the best experience. See our Privacy Policy for further details.