Using SuperViz with CDN

One of the options to use our SDK, besides using it as a package, is usage with a Content Delivery Network, or CDN. This means that you are importing our SDK with a script tag. On this page, you will find detailed instructions on how to use our SDK as a CDN, including the technical differences from using it as a package, and how to adapt the examples and explanations given in this documentation for a CDN context.

Technical differences

Utilizing SuperViz SDK differs a bit when employed via HTML script tags versus using it as a package.

Using as a package

As a package, instantiation involves creating a new instance, just as you would expect:

import SuperVizRoom from '@superviz/sdk'

const room = await SuperVizRoom(DEVELOPER_KEY, {...});

However, within the CDN paradigm, the process diverges.

Using a script tag

The inclusion of 'window' when using the script tag is essential for scoping and context within the global environment.

In the browser's scripting context, the window object represents the global scope. When importing our SDK with a script tag, it's crucial to explicitly reference the window object to ensure that the room and its components are invoked within the correct scope.

That means that you should have a code like this:

const room = await window.SuperVizRoom.init(DEVELOPER_KEY, {...});

By using window.SuperVizRoom.init(), you specify that the Room initialization is occurring in the global context, preventing any potential issues related to variable scope. This is particularly important in scenarios where scripts may be loaded asynchronously or in complex web environments where scoping becomes a critical consideration.

To initialize the room, there is another change from what is seen on the usage as a package, the .init() method. Make sure to use it when initializing the room in the CDN context.

Reading this documentation

While going through this documentation, keep in mind that some examples and explanations will be specific to the package context. Ensure to adapt these as necessary if you're utilizing the SDK via CDN. This distinction is particularly important when initializing the room and managing its lifecycle.

Components

Take a look at a comparison table that illustrates the differences in how to use a component when utilizing the SDK as a package (as it is shown in the documentation) versus as a CDN. This table will help clarify the differing syntax and methods required in each context.

Component	As a package	As CDN
Room	await SuperVizRoom(...)	await window.SuperVizRoom.Init(...)
Autodesk Pin	new AutodeskPin(...)	new window.AutodeskPin(...)
Canvas Pin	new CanvasPin(...)	new window.SuperVizRoom.CanvasPin(...)
Contextual Comments	new Comments(...)	new window.SuperVizRoom.Comments(...)
Forms Elements	new FormElements(...)	new window.SuperVizRoom.FormElements(...)
Presence3D	new Presence3D(...)	new window.Presence3D(...)
Matterport Pin	new MatterportPin(...)	new window.MatterportPin(...)
Mouse Pointers	new MousePointers(...)	new window.SuperVizRoom.MousePointers(...)
Real-time Data Engine	new Realtime(...)	new window.SuperVizRoom.Realtime(...)
ThreeJS Pin	new ThreeJsPin(...)	new window.ThreeJsPin(...)
Video Conference	new VideoConference(...)	new window.SuperVizRoom.VideoConference(...)
Who-is-Online	new WhoIsOnline(...)	new window.SuperVizRoom.WhoIsOnline(...)

Samples with CDN

We have created a resource to make it easier for you to get started even quicker. Check out the samples for each component of our SDK using the CDN to help you get started.