Skip to main content
Version: 4.8.4

Tutorial Intro

LibZL is wrapper library which provides access to multiple ZeroLight APIs such as zlbolt and direct2D.

This documentation assumes you already have a render service hosting your content to connect to, or you are using a demo service intended for integration testing. For more infomation on this topic, contact your account manager.

Getting Started

LibZL is written in TypeScript and provides first-class TypeScript support.

Get started by installing the LibZL module or including LibZL in your site.

info

The rest of this page assumes you are working in vanilla JavaScript. For a more modern react tutorial, see here.

Using LibZL

Including LibZL dynamically

The module is hosted to allow dynamic inclusion like so:

<script src="https://libzl.zlthunder.net/libzl/versions/latest/libzl.js"></script>

A specific version identifier can be used to stick to a specific version:

<script src="https://libzl.zlthunder.net/libzl/versions/5.1.3/libzl.js"></script>

Connecting to your first Palette experience

To get started, all you'll need is a set of connection parameters, including the name of a DOM element you have created where you would like Palette experience to appear. Here is a miminal set of options that can be used to get started:

{
connectionParameters: {
customer: "zerolight", // this will be your account name
environment: "streamingdemo" // this is a name provided by ZL for your service
},

// information about the model you want to connect to
car: {
model: "id3_mp2",
year: "2021",
manufacturer: "vw",
},

// the name of the application we're connecting from
clientApplication: "palettedocs",

// the id for the DOM element into which you wish the content to go
parent: "my-stream-container",

// the default camera to display
setupCamera: "GlobalStageCamera",

// the default environment to display
setupEnvironment: "3D_Gen_VW_White_Studio",

// the default configuration string to display
setupPrCodes: "0AE,0BE,0FA,0GA,0NB,0RH,0SA,0TA,0VC,0Y1,0YG,1CV,1D0,1EX,1J2,1JP,1KA,1LA,1N7,1NL,1PE,1S2,1T9,1X2,2F0,2FM,2I0,2WA,31K,3A2,3D2,3FA,3GD,3KB,3L5,3LJ,3QE,4A3,4E0,4G3,4GS,4K6,4KF,4L6,4N0,4S1,4UF,5C0,5F1,5JA,5K7,5LC,5XJ,6C2,6FG,6H1,6I6,6YD,76C,7AL,7E7,7G0,7K1,7PA,7UT,7W2,7X2,7Y1,8AS,8G4,8GJ,8I6,8IV,8J3,8N6,8RS,8T8,8VP,8Y0,8ZQ,9IJ,9M0,9P4,9T1,9WJ,9Z0,A8M,AV1,B01,B0A,C00,E0A,EA0,EL5,EM1,ER1,ES7,EV0,F0A,FC1,FT0,G03,G1Z,G9E,GM1,GP1,GW2,IG0,IN0,J2S,J51,J9D,JX0,K8G,KA2,KB3,KH4,KK3,KS0,L04,L0L,L1F,LH3,N06,N3B,NZ2,QH1,QQ9,QR9,QV3,QW6,S99,U9C,UD2,VF4,VI6,0ZA1,XF,QW5,C6I",
}

More details on these parameters, plus more, can be found here. Once your options have been selected, connecting to the service just requires a couple of steps:

// instantiate the wrapper library
let libzl = new LibZL();

// instantiate zlbolt (assumes the object above lives in 'options')
libzl.zlbolt(options.connectionParameters.customer).then((zlbolt) => {
// use the parameters defined above to connect
zlbolt.connect(options);
});

Putting it all together, a basic end to end basic example might look as follows:

caution

This example is to get you started and would be considered incomplete for production use cases.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://libzl.zlthunder.net/libzl/versions/latest/libzl.js"></script>
</head>
<body>
<input type="button" id="connect2d" value="Connect" onclick="connect()" />
<input type="button" id="disconnect" value="Disconnect" onclick="disconnect()" />
<div id="my-stream-container"></div>
</body>

<script>
var libzl = new LibZL();
var options = {
connectionParameters: {
customer: "zerolight",
environment: "streamingdemo"
},
car: {
model: "id3_mp2",
year: "2021",
manufacturer: "vw",
},
clientApplication: "palettedocs",
parent: "my-stream-container",

setupCamera: "GlobalStageCamera",
setupEnvironment: "3D_Gen_VW_White_Studio",
setupPrCodes: "0AE,0BE,0FA,0GA,0NB,0RH,0SA,0TA,0VC,0Y1,0YG,1CV,1D0,1EX,1J2,1JP,1KA,1LA,1N7,1NL,1PE,1S2,1T9,1X2,2F0,2FM,2I0,2WA,31K,3A2,3D2,3FA,3GD,3KB,3L5,3LJ,3QE,4A3,4E0,4G3,4GS,4K6,4KF,4L6,4N0,4S1,4UF,5C0,5F1,5JA,5K7,5LC,5XJ,6C2,6FG,6H1,6I6,6YD,76C,7AL,7E7,7G0,7K1,7PA,7UT,7W2,7X2,7Y1,8AS,8G4,8GJ,8I6,8IV,8J3,8N6,8RS,8T8,8VP,8Y0,8ZQ,9IJ,9M0,9P4,9T1,9WJ,9Z0,A8M,AV1,B01,B0A,C00,E0A,EA0,EL5,EM1,ER1,ES7,EV0,F0A,FC1,FT0,G03,G1Z,G9E,GM1,GP1,GW2,IG0,IN0,J2S,J51,J9D,JX0,K8G,KA2,KB3,KH4,KK3,KS0,L04,L0L,L1F,LH3,N06,N3B,NZ2,QH1,QQ9,QR9,QV3,QW6,S99,U9C,UD2,VF4,VI6,0ZA1,XF,QW5,C6I",
};

connect = () => {

libzl.zlbolt(options.connectionParameters.customer).then((zlbolt) => {
window.zlbolt = zlbolt; // for referencing later
zlbolt.connect(options);
});
};

disconnect = () => {
zlbolt.disconnect();
};
</script>
</html>

With the above example, you should expect to see something like this in your browser:

Sample working in browser