Migrate from Cord to SuperViz

With the latest announcement from the Cord Team stating that the company is shutting down in August, many of their users are now seeking an alternative. SuperViz shares the same mission: making it easy for any developer to add real-time collaboration to their apps. Today, we want to show you how we can help you transition from Cord to SuperViz.

Migrating to SuperViz

We understand that news like this directly affects your team's backlog, and we want to make the migration as easy as possible. That's why we are offering a free subscription until you go into production, as well as free support from the SuperViz team to help you switch from Cord's components to ours.

If you want to know more, book a meeting with us to learn more about SuperViz and plan hands-on support for your migration. We are committed to making this transition as smooth as possible, so don't hesitate to reach out to us.

What is SuperViz

SuperViz offers a variety of products that extend what you could build with Cord, like our AI-Powered Video SDK and a Real-time Data Engine that can be integrated into your application to enable real-time data synchronization and collaboration. With SuperViz, you can take your app's interactivity and user engagement to the next level.

Just like Cord, we offer not only a Vanilla JavaScript SDK that can be used in any JS/TS project, but also a React SDK to make integration with your React application simpler. If you don’t use NPM packages, we have an option to use it as a CDN.

Quickstart

When building with SuperViz, you can add multiple participants easily by creating a room. A place where everyone with the same roomId will be together by default. You can create participants and groups using our REST API, but you don’t need it to start using multi-user features.

const room = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "<ROOM-ID>",
  group: {
    id: "<GROUP-ID>",
    name: "<GROUP-NAME>",
  },
  participant: {
    id: "<USER-ID>",
    name: "<USER-NAME>"
  },
});

Following the initialization of the room, you can add components to it as shown below. In this article, I’m showing you the quickest and simplest form of utilization, but each component has its own set of properties and methods that give it more power.

Collaboration Components

Mouse Pointers: Show where each user is looking and interacting in your application, in an HTML element or a Canvas element, providing a more collaborative experience, just like Cord’s Live Cursors. It’s quite simple to initialize:

import { MousePointers } from "@superviz/sdk"

const mousePointers = new MousePointers("my-id"); // ID of the HTML or Canvas element

// Adding the component to the already initialized room.
room.addComponent(mousePointers);

Contextual Comments: Allow users to leave comments and feedback directly within the application, facilitating meaningful conversations and discussions, including in 3D environments like Three.js, Autodesk Viewer, and Matterport.

The initialization of Contextual Comments depends on the environment you want the comments to be displayed in. We offer a range of adapters. Here is how you would initialize it in an HTML element:

import { Comments, HTMLPin } from '@superviz/sdk/lib/components';

// Initializing the Adapter with the HTML element ID 
const pinAdapter = new HTMLPin("my-id", {
    // This property is used to locate the elements that can receive a comment pin. 
    dataAttributeName: "data-comment-id", 
});

// Initializing the Comments component with the adapter created
const comments = new Comments(pinAdapter);

// Adding the component to the already initialized room. 
room.addComponent(comments); 

Who-is-Online: Shows who is currently active in your application, promoting a sense of community and collaboration. When used alongside other components, it includes features like Follow, Gather, and Go-To. With just a few lines of code, you can create a Page Presence replacement:

import { WhoIsOnline } from "@superviz/sdk"

//ID of the element ou want the participants to be displayed
const whoIsOnline = new WhoIsOnline("my-id"); 

// Adding the component to the already initialized room.
room.addComponent(whoIsOnline);

Form Elements: Integrate interactive form elements in your application, enabling users to input data synchronized in real-time among participants. Here is the code to enable it:

import { FormElements } from '@superviz/sdk';

const formElements = new FormElements({
    // Use the fields array to input the elements ID you want to sync between participants
  fields: ['name', 'email', 'dog', 'cat', 'fish'],
});

// Adding the component to the already initialized room.
room.addComponent(formElements);

Presence 3D: Provides a real-time display of users' positions in 3D environments, creating a more immersive collaboration experience. It can be integrated with platforms such as Three.js, Autodesk Viewer, and Matterport.

When using a 3D environment, you will need to install a different plugin for the type of environment you want, then you will have a code similar to this:

import { Presence3D } from "@superviz/autodesk-viewer-plugin";

// Creating an Presence 3D with the Autodesk Viewer object, 
// depending on your enviroment the list of properties to input can be differente
const autodeskPresence = new Presence3D(viewer);

// Adding the component to the already initialized room.
room.addComponent(autodeskPresence);

Video SDK

Our Video SDK allows you to easily add video conferencing capabilities to your application. It integrates seamlessly with other SuperViz components, providing you with the tools to create a fully interactive and collaborative experience for your users.

Some of the key features include recently launched meeting recordings and generation of transcripts that can be interacted with AI to get topics of conversation, follow-ups, and much more.

To start a video meeting, you only need a few lines of code:

import { VideoConference } from "@superviz/sdk";

const video = new VideoConference({
  participantType: "host" // you will need at least one host on the meeting
});

// Adding the component to the already initialized room.
room.addComponent(video);

Real-time Data Engine

Our Real-time Data Engine provides the foundation for the collaboration components. It enables the synchronization of data between users, allowing for shared experiences and interactive sessions. You can create new experiences with this simple-to-use tool.

It uses a PubSub design pattern, where you subscribe to a event and when new data is published to this topic, all subscribers receive it.

import { Realtime } from "@superviz/sdk";  

let channel;
const realtime = new Realtime();  

// Subscribe to the REALTIME_STATE_CHANGED event 
realtime.subscribe(RealtimeComponentEvent.REALTIME_STATE_CHANGED, (state) => {   
    // Check if the state of the component is ready
    if (state === RealtimeComponentState.STARTED) {     
        // If it has, connect to a channel     
        channel = realtime.connect('<YOUR-CHANNEL-NAME>');   
    } 
});  

room.addComponent(realtime);  

// Publish an event to the channel with any data 
channel.publish("<EVENT_NAME>", anyObject);  

// Subscribe to an event on the channel with a callback function 
channel.subscribe("<EVENT_NAME>", callbackFunction);  

// Define the callback function to handle the event data 
function callbackFunction(eventData) {   
    // Handle event data here 
} 

As you can see migration from Cord to SuperViz is easy, and you can count with our dedicated team ready to guide you through the process. We believe in empowering developers to create interactive and collaborative applications, and we are here to help make your transition as seamless as possible.